/* ============================================================
   hoeren.css — Premium UI polish for the Hören (Listening) area
   Scope: ALL rules are namespaced under .hoeren-page so this
   file cannot affect Lesen, Exam, or Admin pages.

   No logic, no scoring, no POST contracts depend on these styles.
   Only visual polish, focus rings, hover affordance, audio panel,
   segmented answer controls, correction/solution states.
   ============================================================ */

/* ── Local design tokens ───────────────────────────────────── */
.hoeren-page {
    --hoe-radius:        .9rem;
    --hoe-radius-sm:     .55rem;
    --hoe-border:        #e6e8ee;
    --hoe-border-strong: #d6dae3;
    --hoe-text:          #1f2937;
    --hoe-text-muted:    #64748b;
    --hoe-bg-soft:       #f8fafc;
    --hoe-bg-tint:       #f1f5f9;
    --hoe-shadow-1:      0 1px 2px rgba(15, 23, 42, .05);
    --hoe-shadow-2:      0 4px 14px rgba(15, 23, 42, .08);
    --hoe-shadow-3:      0 10px 30px rgba(15, 23, 42, .10);
    --hoe-accent:        #2563eb;
    --hoe-accent-dk:     #1d4ed8;
    --hoe-accent-soft:   #eff4ff;
    --hoe-info:          #0284c7;
    --hoe-info-soft:     #e0f2fe;
    --hoe-success:       #16a34a;
    --hoe-success-soft:  #dcfce7;
    --hoe-warning:       #b45309;
    --hoe-warning-soft:  #fef3c7;
    --hoe-danger:        #dc2626;
    --hoe-danger-soft:   #fee2e2;
    --hoe-focus-ring:    0 0 0 3px rgba(37, 99, 235, .25);
}

/* ── Hero block ───────────────────────────────────────────── */
.hoeren-page .hoeren-hero {
    background: linear-gradient(135deg, #eff4ff 0%, #f8fafc 60%, #ffffff 100%);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius);
    padding: 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--hoe-shadow-1);
}
.hoeren-page .hoeren-hero__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.hoeren-page .hoeren-hero__icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--hoe-accent-soft);
    color: var(--hoe-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .15);
}
.hoeren-page .hoeren-hero__title {
    margin: 0;
    font-weight: 700;
    color: var(--hoe-text);
    font-size: 1.4rem;
    line-height: 1.2;
}
.hoeren-page .hoeren-hero__subtitle {
    margin: .15rem 0 0;
    color: var(--hoe-text-muted);
    font-size: .9rem;
}
.hoeren-page .hoeren-hero__chips {
    display: inline-flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.hoeren-page .hoeren-hero__back {
    margin-inline-start: auto;
}

/* Context chip */
.hoeren-page .hoeren-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--hoe-border);
    color: var(--hoe-text);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
}
.hoeren-page .hoeren-chip .bi { font-size: .85rem; color: var(--hoe-accent); }
.hoeren-page .hoeren-chip--muted { background: var(--hoe-bg-tint); color: var(--hoe-text-muted); }
.hoeren-page .hoeren-chip--muted .bi { color: var(--hoe-text-muted); }

/* ── Pill groups (level + Teil) ───────────────────────────── */
.hoeren-page .hoeren-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}
.hoeren-page .hoeren-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--hoe-border);
    background: #fff;
    color: var(--hoe-text);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hoeren-page .hoeren-pill:hover {
    border-color: var(--hoe-accent);
    color: var(--hoe-accent);
    background: var(--hoe-accent-soft);
    transform: translateY(-1px);
}
.hoeren-page .hoeren-pill:focus-visible {
    outline: none;
    box-shadow: var(--hoe-focus-ring);
    border-color: var(--hoe-accent);
}
.hoeren-page .hoeren-pill--active,
.hoeren-page .hoeren-pill--active:hover {
    background: var(--hoe-accent);
    border-color: var(--hoe-accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
    transform: none;
}
.hoeren-page .hoeren-pill--disabled,
.hoeren-page .hoeren-pill--disabled:hover {
    opacity: .55;
    cursor: not-allowed;
    background: #fff;
    color: var(--hoe-text-muted);
    border-color: var(--hoe-border);
    transform: none;
    box-shadow: none;
}

/* ── Theme cards ──────────────────────────────────────────── */
.hoeren-page .hoeren-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .hoeren-page .hoeren-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .hoeren-page .hoeren-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hoeren-page .hoeren-theme-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius);
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: var(--hoe-shadow-1);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    overflow: hidden;
}
.hoeren-page .hoeren-theme-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--hoe-accent);
    opacity: .85;
}
.hoeren-page .hoeren-theme-card--locked::before    { background: #f59e0b; }
.hoeren-page .hoeren-theme-card--not_ready::before { background: #94a3b8; }
.hoeren-page .hoeren-theme-card--open:hover {
    transform: translateY(-2px);
    box-shadow: var(--hoe-shadow-2);
    border-color: var(--hoe-border-strong);
}
.hoeren-page .hoeren-theme-card__head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: .85rem;
}
.hoeren-page .hoeren-theme-card__icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: .65rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hoe-accent-soft);
    color: var(--hoe-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.hoeren-page .hoeren-theme-card--locked    .hoeren-theme-card__icon { background: var(--hoe-warning-soft); color: var(--hoe-warning); }
.hoeren-page .hoeren-theme-card--not_ready .hoeren-theme-card__icon { background: var(--hoe-bg-tint);     color: var(--hoe-text-muted); }
.hoeren-page .hoeren-theme-card__title {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--hoe-text);
    line-height: 1.3;
}
.hoeren-page .hoeren-theme-card__sub {
    margin: .2rem 0 0;
    font-size: .78rem;
    color: var(--hoe-text-muted);
}
.hoeren-page .hoeren-theme-card__badges {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin: 0 0 .9rem;
}
.hoeren-page .hoeren-theme-card__cta { margin-top: auto; }

/* State badges (cards + variant headers) */
.hoeren-page .hoeren-state-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}
.hoeren-page .hoeren-state-badge .bi { font-size: .8rem; }
.hoeren-page .hoeren-state-badge--open      { background: var(--hoe-success-soft); color: #15803d; border-color: #bbf7d0; }
.hoeren-page .hoeren-state-badge--locked    { background: var(--hoe-warning-soft); color: var(--hoe-warning); border-color: #fde68a; }
.hoeren-page .hoeren-state-badge--not_ready { background: var(--hoe-bg-tint);      color: var(--hoe-text-muted); border-color: var(--hoe-border); }
.hoeren-page .hoeren-state-badge--free      { background: var(--hoe-success-soft); color: #15803d; border-color: #bbf7d0; }
.hoeren-page .hoeren-state-badge--score     { background: var(--hoe-success-soft); color: #15803d; border-color: #bbf7d0; }
.hoeren-page .hoeren-state-badge--solution  { background: var(--hoe-info-soft);    color: #0369a1; border-color: #bae6fd; }

/* ── CTA buttons ──────────────────────────────────────────── */
.hoeren-page .hoeren-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 100%;
    min-height: 2.6rem;
    padding: .55rem 1rem;
    border-radius: var(--hoe-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid transparent;
    background: var(--hoe-accent);
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.hoeren-page .hoeren-cta:hover { background: var(--hoe-accent-dk); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.22); }
.hoeren-page .hoeren-cta:focus-visible { outline: none; box-shadow: var(--hoe-focus-ring); }
.hoeren-page .hoeren-cta--upsell {
    background: #f59e0b; color: #fff;
}
.hoeren-page .hoeren-cta--upsell:hover { background: #d97706; }
.hoeren-page .hoeren-cta--ghost {
    background: #fff; color: var(--hoe-text-muted); border-color: var(--hoe-border);
}
.hoeren-page .hoeren-cta--ghost:hover { background: var(--hoe-bg-tint); color: var(--hoe-text); transform: none; box-shadow: none; }
.hoeren-page .hoeren-cta[disabled],
.hoeren-page .hoeren-cta:disabled {
    opacity: .65; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ── Empty / locked / not-ready cards (page-level) ───────── */
.hoeren-page .hoeren-empty,
.hoeren-page .hoeren-locked-card,
.hoeren-page .hoeren-notready-card {
    background: #fff;
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--hoe-shadow-1);
}
.hoeren-page .hoeren-empty__icon,
.hoeren-page .hoeren-locked-card__icon,
.hoeren-page .hoeren-notready-card__icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .85rem;
    font-size: 1.5rem;
}
.hoeren-page .hoeren-empty__icon         { background: var(--hoe-accent-soft);  color: var(--hoe-accent); }
.hoeren-page .hoeren-locked-card__icon   { background: var(--hoe-warning-soft); color: var(--hoe-warning); }
.hoeren-page .hoeren-notready-card__icon { background: var(--hoe-bg-tint);      color: var(--hoe-text-muted); }
.hoeren-page .hoeren-empty__title,
.hoeren-page .hoeren-locked-card__title,
.hoeren-page .hoeren-notready-card__title {
    margin: 0 0 .35rem;
    font-weight: 700;
    color: var(--hoe-text);
    font-size: 1.15rem;
}
.hoeren-page .hoeren-empty__body,
.hoeren-page .hoeren-locked-card__body,
.hoeren-page .hoeren-notready-card__body {
    margin: 0 auto 1rem;
    max-width: 36rem;
    color: var(--hoe-text-muted);
    font-size: .92rem;
}
.hoeren-page .hoeren-empty__actions,
.hoeren-page .hoeren-locked-card__actions,
.hoeren-page .hoeren-notready-card__actions {
    display: inline-flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}

/* ── Variant card (solving page) ─────────────────────────── */
.hoeren-page .hoeren-variant-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--hoe-shadow-1);
    overflow: hidden;
}
.hoeren-page .hoeren-variant-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--hoe-accent);
}
.hoeren-page .hoeren-variant-card--modified::before { background: var(--hoe-info); }
.hoeren-page .hoeren-variant-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.hoeren-page .hoeren-variant-card__label {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--hoe-accent-soft);
    color: var(--hoe-accent);
    font-weight: 700;
    font-size: .82rem;
    border: 1px solid #dbe7ff;
}
.hoeren-page .hoeren-variant-card--modified .hoeren-variant-card__label {
    background: var(--hoe-info-soft);
    color: var(--hoe-info);
    border-color: #bae6fd;
}

/* ── Audio panel ──────────────────────────────────────────── */
.hoeren-page .hoeren-audio-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-sm);
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
}
.hoeren-page .hoeren-audio-panel__head {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
    color: var(--hoe-text);
    font-weight: 600;
    font-size: .88rem;
}
.hoeren-page .hoeren-audio-panel__head .bi-soundwave,
.hoeren-page .hoeren-audio-panel__head .bi-headphones {
    color: var(--hoe-accent);
    font-size: 1.05rem;
}
.hoeren-page .hoeren-audio-panel__duration {
    margin-inline-start: auto;
    font-weight: 500;
    font-size: .78rem;
    color: var(--hoe-text-muted);
    display: inline-flex; align-items: center; gap: .3rem;
}
.hoeren-page .hoeren-audio-panel audio {
    width: 100%;
    display: block;
    border-radius: var(--hoe-radius-sm);
}
.hoeren-page .hoeren-audio-panel--missing {
    background: var(--hoe-warning-soft);
    border-color: #fde68a;
    color: var(--hoe-warning);
    display: flex; align-items: center; gap: .55rem;
    font-weight: 600;
}
.hoeren-page .hoeren-audio-panel--missing .bi { font-size: 1.1rem; }

/* ── Statement row ────────────────────────────────────────── */
.hoeren-page .hoeren-stmt {
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-sm);
    padding: .85rem 1rem;
    margin-bottom: .65rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hoeren-page .hoeren-stmt--ok     { border-color: #bbf7d0; box-shadow: 0 0 0 1px #bbf7d0; }
.hoeren-page .hoeren-stmt--bad    { border-color: #fecaca; box-shadow: 0 0 0 1px #fecaca; }
.hoeren-page .hoeren-stmt--reveal { border-color: #bae6fd; box-shadow: 0 0 0 1px #bae6fd; }
.hoeren-page .hoeren-stmt__head {
    display: flex; align-items: flex-start; gap: .55rem;
    margin-bottom: .65rem;
}
.hoeren-page .hoeren-stmt__no {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.85rem;
    padding: 0 .45rem;
    border-radius: .45rem;
    background: var(--hoe-bg-tint);
    color: var(--hoe-text);
    font-weight: 700;
    font-size: .8rem;
}
.hoeren-page .hoeren-stmt__text {
    flex: 1 1 auto;
    color: var(--hoe-text);
    font-size: .96rem;
    line-height: 1.45;
    font-weight: 500;
}

/* ── Segmented answer control (richtig / falsch) ─────────── */
.hoeren-page .hoeren-answer-group {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .25rem;
}
.hoeren-page .hoeren-answer-group input[type="radio"] {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.hoeren-page .hoeren-answer-option {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem;
    min-height: 2.6rem;
    min-width: 7rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--hoe-border-strong);
    background: #fff;
    color: var(--hoe-text);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hoeren-page .hoeren-answer-option .bi { font-size: 1rem; opacity: .8; }
.hoeren-page .hoeren-answer-option:hover {
    background: var(--hoe-accent-soft);
    border-color: var(--hoe-accent);
    color: var(--hoe-accent);
}
.hoeren-page .hoeren-answer-group input[type="radio"]:focus-visible + .hoeren-answer-option {
    box-shadow: var(--hoe-focus-ring);
    border-color: var(--hoe-accent);
}
.hoeren-page .hoeren-answer-group input[type="radio"]:checked + .hoeren-answer-option {
    background: var(--hoe-accent);
    border-color: var(--hoe-accent);
    color: #fff;
    box-shadow: 0 3px 8px rgba(37,99,235,.22);
}
.hoeren-page .hoeren-answer-group input[type="radio"]:checked + .hoeren-answer-option .bi { opacity: 1; }
.hoeren-page .hoeren-answer-group input[type="radio"]:disabled + .hoeren-answer-option {
    opacity: .75; cursor: not-allowed;
}
.hoeren-page .hoeren-answer-group input[type="radio"]:disabled:checked + .hoeren-answer-option {
    /* Keep selected style readable in disabled review state */
    opacity: 1;
}

/* ── Correction / solution reveal ─────────────────────────── */
.hoeren-page .hoeren-reveal {
    margin-top: .9rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--hoe-border);
}
.hoeren-page .hoeren-reveal__chips {
    display: flex; flex-wrap: wrap; gap: .4rem;
    align-items: center;
    margin-bottom: .55rem;
}
.hoeren-page .hoeren-reveal-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1;
}
.hoeren-page .hoeren-reveal-chip--your    { background: var(--hoe-bg-tint);      color: var(--hoe-text); border-color: var(--hoe-border); }
.hoeren-page .hoeren-reveal-chip--correct { background: var(--hoe-success-soft); color: #15803d;         border-color: #bbf7d0; }
.hoeren-page .hoeren-reveal-chip--ok      { background: var(--hoe-success);      color: #fff; }
.hoeren-page .hoeren-reveal-chip--bad     { background: var(--hoe-danger);       color: #fff; }

.hoeren-page .hoeren-keywords {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin: .2rem 0 .65rem;
}
.hoeren-page .hoeren-keyword-chip {
    display: inline-flex; align-items: center;
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: var(--hoe-warning-soft);
    color: #7c3a00;
    border: 1px solid #fde68a;
    font-size: .78rem;
    font-weight: 600;
}
.hoeren-page .hoeren-reveal__label {
    display: flex; align-items: center; gap: .35rem;
    color: var(--hoe-text-muted);
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .3rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.hoeren-page .hoeren-explanations {
    display: flex; flex-direction: column; gap: .45rem;
}
.hoeren-page .hoeren-explanations__lang {
    display: flex; gap: .5rem; align-items: flex-start;
    background: var(--hoe-bg-soft);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-sm);
    padding: .55rem .7rem;
    font-size: .88rem;
    color: var(--hoe-text);
    line-height: 1.5;
}
.hoeren-page .hoeren-explanations__chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.1rem;
    padding: .15rem .4rem;
    border-radius: .3rem;
    background: #fff;
    border: 1px solid var(--hoe-border);
    font-size: .7rem;
    font-weight: 700;
    color: var(--hoe-text-muted);
    letter-spacing: .04em;
}
.hoeren-page .hoeren-explanations__lang--ar {
    /* Wrapper itself is RTL (dir="rtl" on the element + this rule),
       so the chip naturally sits on the visual right side. */
    text-align: right;
}
.hoeren-page .hoeren-explanations__body { flex: 1 1 auto; min-width: 0; }

/* ── Solution-mode banner inside variant ─────────────────── */
.hoeren-page .hoeren-solution-banner {
    display: flex; align-items: center; gap: .55rem;
    padding: .65rem .85rem;
    border-radius: var(--hoe-radius-sm);
    background: var(--hoe-info-soft);
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-weight: 600;
    margin-bottom: .85rem;
}
.hoeren-page .hoeren-solution-banner .bi { font-size: 1.1rem; }

/* ── Inline warning (unanswered) ─────────────────────────── */
.hoeren-page .hoeren-inline-warning {
    display: flex; align-items: center; gap: .55rem;
    padding: .65rem .85rem;
    border-radius: var(--hoe-radius-sm);
    background: var(--hoe-warning-soft);
    color: var(--hoe-warning);
    border: 1px solid #fde68a;
    font-weight: 600;
    margin-bottom: .85rem;
}

/* ── Score / solution summary in card head ───────────────── */
.hoeren-page .hoeren-score-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    background: var(--hoe-success-soft);
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ── Action row inside variant ───────────────────────────── */
.hoeren-page .hoeren-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: 1rem;
}
.hoeren-page .hoeren-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border-radius: var(--hoe-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hoeren-page .hoeren-btn:focus-visible { outline: none; box-shadow: var(--hoe-focus-ring); }
.hoeren-page .hoeren-btn--primary { background: var(--hoe-accent); color: #fff; }
.hoeren-page .hoeren-btn--primary:hover { background: var(--hoe-accent-dk); transform: translateY(-1px); }
.hoeren-page .hoeren-btn--solution { background: #fff; color: var(--hoe-info); border-color: #bae6fd; }
.hoeren-page .hoeren-btn--solution:hover { background: var(--hoe-info-soft); }
.hoeren-page .hoeren-btn--ghost { background: #fff; color: var(--hoe-text-muted); border-color: var(--hoe-border); }
.hoeren-page .hoeren-btn--ghost:hover { background: var(--hoe-bg-tint); color: var(--hoe-text); }

/* ── Bottom Back/Next nav ────────────────────────────────── */
.hoeren-page .hoeren-nav-block {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .75rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hoe-border);
}
.hoeren-page .hoeren-nav-block__slot { display: flex; }
.hoeren-page .hoeren-nav-block__slot--prev { justify-content: flex-start; }
.hoeren-page .hoeren-nav-block__slot--mid  { justify-content: center; }
.hoeren-page .hoeren-nav-block__slot--next { justify-content: flex-end; }
.hoeren-page .hoeren-nav-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border-radius: var(--hoe-radius-sm);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    border: 1px solid var(--hoe-accent);
    color: var(--hoe-accent);
    background: #fff;
    transition: background-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .15s ease;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hoeren-page .hoeren-nav-btn:hover {
    background: var(--hoe-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37,99,235,.18);
}
.hoeren-page .hoeren-nav-btn:focus-visible { outline: none; box-shadow: var(--hoe-focus-ring); }
.hoeren-page .hoeren-nav-btn--mid {
    background: var(--hoe-accent);
    color: #fff;
}
.hoeren-page .hoeren-nav-btn--mid:hover { background: var(--hoe-accent-dk); }
.hoeren-page .hoeren-nav-btn--disabled {
    border-color: var(--hoe-border);
    color: var(--hoe-text-muted);
    background: var(--hoe-bg-soft);
    cursor: not-allowed;
}
.hoeren-page .hoeren-nav-btn--disabled:hover {
    background: var(--hoe-bg-soft); color: var(--hoe-text-muted);
    transform: none; box-shadow: none;
}
.hoeren-page .hoeren-nav-btn__hint {
    font-weight: 500;
    color: var(--hoe-text-muted);
    font-size: .75rem;
    margin-inline-start: .25rem;
}

@media (max-width: 575.98px) {
    .hoeren-page .hoeren-nav-block {
        grid-template-columns: 1fr;
    }
    .hoeren-page .hoeren-nav-block__slot--prev,
    .hoeren-page .hoeren-nav-block__slot--mid,
    .hoeren-page .hoeren-nav-block__slot--next {
        justify-content: stretch;
    }
    .hoeren-page .hoeren-nav-btn { width: 100%; justify-content: center; }
    .hoeren-page .hoeren-answer-option { flex: 1 1 0; min-width: 0; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hoeren-page .hoeren-pill,
    .hoeren-page .hoeren-cta,
    .hoeren-page .hoeren-btn,
    .hoeren-page .hoeren-nav-btn,
    .hoeren-page .hoeren-theme-card,
    .hoeren-page .hoeren-answer-option {
        transition: none !important;
    }
    .hoeren-page .hoeren-theme-card--open:hover,
    .hoeren-page .hoeren-pill:hover,
    .hoeren-page .hoeren-cta:hover,
    .hoeren-page .hoeren-btn:hover,
    .hoeren-page .hoeren-nav-btn:hover {
        transform: none !important;
    }
}

/* ── RTL adjustments ─────────────────────────────────────── */
[dir="rtl"] .hoeren-page .hoeren-hero__back { margin-inline-start: 0; margin-inline-end: auto; }

/* ── Hören audio training controls (skip ±5s, speed) ─────── */
.hoeren-page .hoeren-audio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
}
.hoeren-page .hoeren-audio-seek-btn,
.hoeren-page .hoeren-audio-speed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 2rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--hoe-border);
    background: #fff;
    color: var(--hoe-text);
    font-weight: 600;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease;
}
.hoeren-page .hoeren-audio-seek-btn:hover,
.hoeren-page .hoeren-audio-speed-btn:hover {
    background: var(--hoe-accent-soft);
    border-color: var(--hoe-accent);
    color: var(--hoe-accent);
}
.hoeren-page .hoeren-audio-seek-btn:focus-visible,
.hoeren-page .hoeren-audio-speed-btn:focus-visible {
    outline: none;
    box-shadow: var(--hoe-focus-ring);
    border-color: var(--hoe-accent);
}
.hoeren-page .hoeren-audio-speed {
    display: inline-flex;
    gap: .25rem;
    margin-inline-start: auto;
    padding: .2rem;
    background: var(--hoe-bg-tint);
    border-radius: 999px;
}
.hoeren-page .hoeren-audio-speed-btn {
    border-color: transparent;
    background: transparent;
    min-width: 3rem;
}
.hoeren-page .hoeren-audio-speed-btn.is-active {
    background: var(--hoe-accent);
    border-color: var(--hoe-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37,99,235,.22);
}
.hoeren-page .hoeren-audio-panel audio:focus-visible {
    outline: 2px solid var(--hoe-accent);
    outline-offset: 2px;
    border-radius: var(--hoe-radius-sm);
}

/* ── Solution mode — visually distinct from Correction ───── */
.hoeren-page .hoeren-variant-card--solution-mode::before {
    background: var(--hoe-info);
}
.hoeren-page .hoeren-variant-card--solution-mode {
    background: linear-gradient(180deg, #f5fbff 0%, #ffffff 60%);
    border-color: #bae6fd;
}
.hoeren-page .hoeren-variant-card--solution-mode .hoeren-solution-banner {
    padding: .8rem 1rem;
    font-size: .95rem;
}
.hoeren-page .hoeren-solution-banner__label {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #bae6fd;
    color: var(--hoe-info);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hoeren-page .hoeren-solution-banner__sep {
    color: #7dd3fc;
    font-weight: 700;
}
.hoeren-page .hoeren-variant-card--solution-mode .hoeren-stmt {
    background: #fbfeff;
}
.hoeren-page .hoeren-variant-card--solution-mode .hoeren-reveal {
    background: var(--hoe-info-soft);
    border: 1px solid #bae6fd;
    border-radius: var(--hoe-radius-sm);
    padding: .75rem .85rem;
    margin-top: .9rem;
}
.hoeren-page .hoeren-variant-card--solution-mode .hoeren-reveal__label {
    color: #0369a1;
}

/* Smooth scroll for in-page Try-Again anchors. Scoped to Hören page only. */
.hoeren-page { scroll-behavior: smooth; }

@media (max-width: 575.98px) {
    .hoeren-page .hoeren-audio-actions { gap: .35rem; }
    .hoeren-page .hoeren-audio-seek-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
    .hoeren-page .hoeren-audio-speed { margin-inline-start: 0; width: 100%; justify-content: space-between; }
    .hoeren-page .hoeren-audio-speed-btn { flex: 1 1 0; min-width: 0; }
}

/* ── Audio panel — unified visual treatment ────────────── */
.hoeren-page .hoeren-audio-panel audio {
    width: 100%;
    display: block;
    margin-top: .15rem;
    border-radius: var(--hoe-radius-sm);
}
.hoeren-page .hoeren-audio-panel .hoeren-audio-actions {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--hoe-border);
}

/* ── Teil instruction info card ────────────────────────── */
.hoeren-page .hoeren-teil-info {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem .9rem;
    margin: .25rem 0 1rem;
    background: var(--hoe-bg-soft);
    border: 1px solid var(--hoe-border);
    border-left: 3px solid var(--hoe-accent);
    border-radius: var(--hoe-radius-sm);
}
[dir="rtl"] .hoeren-page .hoeren-teil-info {
    border-left: 1px solid var(--hoe-border);
    border-right: 3px solid var(--hoe-accent);
}
.hoeren-page .hoeren-teil-info__icon {
    color: var(--hoe-accent);
    font-size: 1.15rem;
    line-height: 1.2;
    margin-top: .1rem;
}
.hoeren-page .hoeren-teil-info__body { min-width: 0; }
.hoeren-page .hoeren-teil-info__label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hoe-text-muted);
    margin-bottom: .15rem;
}
.hoeren-page .hoeren-teil-info__text {
    margin: 0;
    color: var(--hoe-text);
    font-size: .9rem;
    line-height: 1.45;
}

/* ── Score encouragement line ──────────────────────────── */
.hoeren-page .hoeren-encourage {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .25rem 0 .75rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    background: var(--hoe-bg-tint);
    color: var(--hoe-text-muted);
    border: 1px solid var(--hoe-border);
}
.hoeren-page .hoeren-encourage--strong {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.hoeren-page .hoeren-encourage--medium {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.hoeren-page .hoeren-encourage--weak {
    background: #fff7ed;
    color: #b45309;
    border-color: #fed7aa;
}

/* ============================================================
   Premium UI/UX Upgrade — additive styles, scoped under .hoeren-page
   ============================================================ */

/* Per-Teil identity tokens */
.hoeren-page {
    --hoe-teil1: #2563eb;        /* cool blue */
    --hoe-teil1-soft: #eff4ff;
    --hoe-teil2: #7c3aed;        /* violet */
    --hoe-teil2-soft: #f3effe;
    --hoe-teil3: #0d9488;        /* teal */
    --hoe-teil3-soft: #e6fbf6;
}

/* Active Teil pill accent (subtle border + tint per teil) */
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil1.hoeren-pill--active { box-shadow: inset 0 -3px 0 var(--hoe-teil1); }
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil2.hoeren-pill--active { box-shadow: inset 0 -3px 0 var(--hoe-teil2); }
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil3.hoeren-pill--active { box-shadow: inset 0 -3px 0 var(--hoe-teil3); }
.hoeren-page .hoeren-pill > .bi { margin-inline-end: .35rem; opacity: .85; }

/* Per-Teil info card accent */
.hoeren-page .hoeren-teil-info--teil1 .hoeren-teil-info__icon { background: var(--hoe-teil1-soft); color: var(--hoe-teil1); }
.hoeren-page .hoeren-teil-info--teil2 .hoeren-teil-info__icon { background: var(--hoe-teil2-soft); color: var(--hoe-teil2); }
.hoeren-page .hoeren-teil-info--teil3 .hoeren-teil-info__icon { background: var(--hoe-teil3-soft); color: var(--hoe-teil3); }
.hoeren-page .hoeren-teil-info__chip {
    display: inline-block;
    font-size: .72rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--hoe-text-muted);
    margin-inline-start: .5rem;
    vertical-align: middle;
}
.hoeren-page .hoeren-teil-info--teil1 .hoeren-teil-info__chip { background: var(--hoe-teil1-soft); color: var(--hoe-teil1); }
.hoeren-page .hoeren-teil-info--teil2 .hoeren-teil-info__chip { background: var(--hoe-teil2-soft); color: var(--hoe-teil2); }
.hoeren-page .hoeren-teil-info--teil3 .hoeren-teil-info__chip { background: var(--hoe-teil3-soft); color: var(--hoe-teil3); }

/* Theme card teil chip */
.hoeren-page .hoeren-theme-card__teilchip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    background: #eef2f7; color: var(--hoe-text-muted);
}
.hoeren-page .hoeren-theme-card__teilchip--teil1 { background: var(--hoe-teil1-soft); color: var(--hoe-teil1); }
.hoeren-page .hoeren-theme-card__teilchip--teil2 { background: var(--hoe-teil2-soft); color: var(--hoe-teil2); }
.hoeren-page .hoeren-theme-card__teilchip--teil3 { background: var(--hoe-teil3-soft); color: var(--hoe-teil3); }

/* Meta state badges (variant count + duration on cards) */
.hoeren-page .hoeren-state-badge--meta {
    background: var(--hoe-bg-tint);
    color: var(--hoe-text-muted);
    border: 1px solid var(--hoe-border);
}

/* Theme card — clamp long titles, prevent overflow */
.hoeren-page .hoeren-theme-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.hoeren-page { overflow-x: hidden; }

/* Not-ready theme card: dashed placeholder template */
.hoeren-page .hoeren-theme-card--placeholder {
    background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 8px, #f3f5f9 8px, #f3f5f9 16px);
    border: 1.5px dashed var(--hoe-border-strong);
    box-shadow: none;
}
.hoeren-page .hoeren-theme-card--placeholder::before { display: none !important; }
.hoeren-page .hoeren-theme-card--placeholder .hoeren-theme-card__icon {
    background: #eef2f7; color: var(--hoe-text-muted); box-shadow: none;
}
.hoeren-page .hoeren-theme-card__placeholder-note {
    margin: 0; padding: .6rem .75rem;
    border-radius: var(--hoe-radius-sm);
    background: #ffffff;
    border: 1px dashed var(--hoe-border-strong);
    color: var(--hoe-text-muted);
    font-weight: 600; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .4rem;
}

/* Theme grid — avoid awkward 3-column at mid widths */
@media (min-width: 768px) and (max-width: 1100px) {
    .hoeren-page .hoeren-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Variant header — label + subtitle + meta ─────────── */
.hoeren-page .hoeren-variant-card__head {
    align-items: flex-start;
    gap: .75rem; flex-wrap: wrap;
}
.hoeren-page .hoeren-variant-card__label-wrap {
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.hoeren-page .hoeren-variant-card__sub {
    font-size: .78rem; color: var(--hoe-text-muted); font-weight: 500;
}
.hoeren-page .hoeren-variant-card__meta {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* Mini progress pill */
.hoeren-page .hoeren-progress-mini {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 999px;
    background: var(--hoe-bg-tint); color: var(--hoe-text-muted);
    border: 1px solid var(--hoe-border);
    font-size: .78rem; font-weight: 600;
}
.hoeren-page .hoeren-progress-mini--checked  { background: var(--hoe-success-soft); color: var(--hoe-success); border-color: #bbf7d0; }
.hoeren-page .hoeren-progress-mini--solution { background: var(--hoe-info-soft);    color: var(--hoe-info);    border-color: #bae6fd; }

/* Variant stepper */
.hoeren-page .hoeren-variant-stepper {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .5rem; padding: .65rem .8rem;
    background: #ffffff; border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius);
    margin-bottom: 1rem; box-shadow: var(--hoe-shadow-1);
}
.hoeren-page .hoeren-variant-stepper__item {
    display: inline-flex; align-items: center; gap: .45rem;
    text-decoration: none; color: var(--hoe-text-muted);
    padding: .3rem .55rem; border-radius: var(--hoe-radius-sm);
    font-size: .82rem; font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.hoeren-page .hoeren-variant-stepper__item:hover { background: var(--hoe-bg-tint); color: var(--hoe-text); }
.hoeren-page .hoeren-variant-stepper__item.is-active { background: var(--hoe-accent-soft); color: var(--hoe-accent); }
.hoeren-page .hoeren-variant-stepper__dot {
    width: 1.4rem; height: 1.4rem; border-radius: 999px;
    background: var(--hoe-bg-tint); color: var(--hoe-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
}
.hoeren-page .hoeren-variant-stepper__item.is-active .hoeren-variant-stepper__dot { background: var(--hoe-accent); color: #fff; }
.hoeren-page .hoeren-variant-stepper__sep {
    width: 22px; height: 2px; background: var(--hoe-border);
    display: inline-block; border-radius: 2px;
}

/* Not-ready inline block (inside variant card) */
.hoeren-page .hoeren-notready-block {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem; border-radius: var(--hoe-radius-sm);
    background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 8px, #f3f5f9 8px, #f3f5f9 16px);
    border: 1.5px dashed var(--hoe-border-strong);
    color: var(--hoe-text-muted);
}
.hoeren-page .hoeren-notready-block__icon {
    width: 2.4rem; height: 2.4rem; border-radius: .6rem;
    background: #ffffff; color: var(--hoe-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0; border: 1px solid var(--hoe-border);
}
.hoeren-page .hoeren-notready-block__body { display: flex; flex-direction: column; gap: .1rem; }
.hoeren-page .hoeren-notready-block__body strong { color: var(--hoe-text); font-size: .92rem; }
.hoeren-page .hoeren-notready-block__body span { font-size: .82rem; }

/* Audio missing — legacy class, retained for backward compat */
.hoeren-page .hoeren-audio-panel--missing {
    display: flex; align-items: center; gap: .75rem;
    background: repeating-linear-gradient(135deg, #fafbfd, #fafbfd 8px, #f3f5f9 8px, #f3f5f9 16px);
    border: 1.5px dashed var(--hoe-border-strong);
}

/* No-audio panel — premium "statements practice" card.
   Different visual language from --missing: solid info tint, not a
   placeholder pattern, so students don't read it as broken/incomplete. */
.hoeren-page .hoeren-audio-panel--noaudio {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem;
    border-radius: var(--hoe-radius-sm);
    background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fb 100%);
    border: 1px solid #bdd7f3;
    box-shadow: 0 1px 0 rgba(15, 35, 75, 0.02);
}
.hoeren-page .hoeren-noaudio-panel__icon {
    width: 2.4rem; height: 2.4rem; border-radius: .6rem;
    background: #ffffff; color: #1d4ed8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0; border: 1px solid #bdd7f3;
}
.hoeren-page .hoeren-noaudio-panel__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hoeren-page .hoeren-noaudio-panel__body strong { color: #0f2a5b; font-size: .95rem; }
.hoeren-page .hoeren-noaudio-panel__body span { font-size: .83rem; color: #2b4d86; }

/* Landing card — "Statements only" pill (info-toned, not warning). */
.hoeren-page .hoeren-state-badge--noaudio {
    background: #eaf2fd;
    color: #1d4ed8;
    border: 1px solid #bdd7f3;
}
.hoeren-page .hoeren-state-badge--noaudio .bi { color: #1d4ed8; }

/* Open-no-audio card icon: keep premium feel, info-tinted accent. */
.hoeren-page .hoeren-theme-card--open_no_audio .hoeren-theme-card__icon {
    background: #eaf2fd; color: #1d4ed8;
}

/* ── Custom audio transport ───────────────────────────── */
.hoeren-page .hoeren-audio-panel.is-enhanced .hoeren-audio-native { display: none; }
.hoeren-page .hoeren-audio-transport {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem; margin-top: .6rem;
    border-radius: var(--hoe-radius-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--hoe-border);
    flex-wrap: wrap;
}
.hoeren-page .hoeren-audio-play {
    width: 3rem; height: 3rem; flex-shrink: 0;
    border-radius: 999px; border: none;
    background: var(--hoe-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; cursor: pointer;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.hoeren-page .hoeren-audio-play:hover  { background: var(--hoe-accent-dk); transform: translateY(-1px); }
.hoeren-page .hoeren-audio-play:active { transform: translateY(0); }
.hoeren-page .hoeren-audio-play:focus-visible { outline: none; box-shadow: var(--hoe-focus-ring), 0 6px 16px rgba(37, 99, 235, .25); }
.hoeren-page .hoeren-audio-track {
    flex: 1 1 220px; min-width: 0;
    display: flex; flex-direction: column; gap: .35rem;
}
.hoeren-page .hoeren-audio-times {
    display: flex; align-items: center; gap: .35rem;
    font-variant-numeric: tabular-nums;
    font-size: .8rem; color: var(--hoe-text-muted);
}
.hoeren-page .hoeren-audio-times__sep { opacity: .55; }
.hoeren-page .hoeren-audio-seek {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: var(--hoe-border);
    border-radius: 999px; outline: none;
    cursor: pointer;
}
.hoeren-page .hoeren-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: var(--hoe-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .4);
    cursor: pointer;
    transition: transform .15s ease;
}
.hoeren-page .hoeren-audio-seek::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 999px;
    background: var(--hoe-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .4);
    cursor: pointer;
}
.hoeren-page .hoeren-audio-seek:focus-visible { box-shadow: var(--hoe-focus-ring); }

@media (prefers-reduced-motion: reduce) {
    .hoeren-page .hoeren-audio-play,
    .hoeren-page .hoeren-audio-seek::-webkit-slider-thumb { transition: none; }
}

/* ── Segmented richtig/falsch answer controls ─────────── */
.hoeren-page .hoeren-answer-group--segmented {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; min-height: 52px;
    padding: .65rem 1rem;
    border-radius: var(--hoe-radius-sm);
    border: 1.5px solid var(--hoe-border-strong);
    background: #ffffff;
    color: var(--hoe-text);
    font-weight: 600; font-size: .95rem;
    cursor: pointer; user-select: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option:hover { background: var(--hoe-bg-tint); }
.hoeren-page .hoeren-answer-group--segmented input[type="radio"]:focus-visible + .hoeren-answer-option {
    outline: none; box-shadow: var(--hoe-focus-ring);
}
.hoeren-page .hoeren-answer-group--segmented input[type="radio"]:checked + .hoeren-answer-option {
    background: var(--hoe-accent-soft);
    border-color: var(--hoe-accent);
    color: var(--hoe-accent-dk);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
}
.hoeren-page .hoeren-answer-group--segmented input[type="radio"]:disabled + .hoeren-answer-option { cursor: default; opacity: .85; }

/* Post-Prüfen explicit chosen states on the segmented option */
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option--chosen-correct {
    background: var(--hoe-success-soft) !important;
    border-color: var(--hoe-success) !important;
    color: #166534 !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .15) !important;
}
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option--chosen-wrong {
    background: var(--hoe-danger-soft) !important;
    border-color: var(--hoe-danger) !important;
    color: #991b1b !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .15) !important;
}
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option--chosen-neutral {
    background: var(--hoe-info-soft) !important;
    border-color: var(--hoe-info) !important;
    color: #075985 !important;
}

@media (prefers-reduced-motion: reduce) {
    .hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option { transition: none; }
}

/* ── Bottom navigation hierarchy ──────────────────────── */
.hoeren-page .hoeren-nav-btn--primary {
    background: var(--hoe-accent); color: #fff !important;
    border-color: var(--hoe-accent);
}
.hoeren-page .hoeren-nav-btn--primary:hover { background: var(--hoe-accent-dk); border-color: var(--hoe-accent-dk); }
.hoeren-page .hoeren-nav-btn--ghost {
    background: transparent; color: var(--hoe-text-muted) !important;
    border: 1px solid var(--hoe-border);
}
.hoeren-page .hoeren-nav-btn--ghost:hover { background: var(--hoe-bg-tint); color: var(--hoe-text) !important; }
.hoeren-page .hoeren-nav-block__slot--mid { display: flex; justify-content: center; }

@media (max-width: 575.98px) {
    .hoeren-page .hoeren-nav-block { grid-template-columns: 1fr !important; gap: .5rem; }
    .hoeren-page .hoeren-nav-block__slot { width: 100%; }
    .hoeren-page .hoeren-nav-btn { width: 100%; min-height: 44px; justify-content: center; }
    .hoeren-page .hoeren-audio-transport { padding: .65rem; }
    .hoeren-page .hoeren-audio-track { flex-basis: 100%; }
}

/* ── Statement text comfortable typography ───────────── */
.hoeren-page .hoeren-stmt__text { max-width: 70ch; line-height: 1.55; word-break: break-word; }

/* ── RTL directional icon flips (within Hören scope) ──── */
[dir="rtl"] .hoeren-page .hoeren-nav-btn .bi-arrow-left,
[dir="rtl"] .hoeren-page .hoeren-nav-btn .bi-arrow-right,
[dir="rtl"] .hoeren-page .hoeren-hero__back .bi-arrow-left {
    transform: scaleX(-1);
}
/* Replace Bootstrap me-1 within Hören scope with a logical equivalent */
.hoeren-page .me-1 { margin-inline-end: .25rem !important; margin-right: 0 !important; }

/* ============================================================
   PREMIUM UPGRADE PASS (final polish)
   All rules scoped under .hoeren-page. Pure visuals.
   ============================================================ */

.hoeren-page {
    --hoe-shadow-card:        0 1px 2px rgba(15,23,42,.05), 0 6px 20px -10px rgba(15,23,42,.12);
    --hoe-shadow-hover:       0 6px 14px -4px rgba(37,99,235,.18), 0 18px 40px -22px rgba(15,23,42,.25);
    --hoe-radius-lg:          1.1rem;
    --hoe-premium-gold:       #b08900;
    --hoe-premium-gold-soft:  #fff8e1;
}

/* ── Hero polish ────────────────────────────────────────── */
.hoeren-page .hoeren-hero {
    box-shadow: var(--hoe-shadow-card);
    padding: 1.4rem 1.4rem;
}
.hoeren-page .hoeren-hero__title { font-size: 1.55rem; letter-spacing: -.01em; }
@media (max-width: 575.98px) {
    .hoeren-page .hoeren-hero { padding: 1.1rem; }
    .hoeren-page .hoeren-hero__title { font-size: 1.25rem; }
    .hoeren-page .hoeren-hero__back { width: 100% !important; justify-content: center; }
}

/* ── Pill polish (active ring + focus) ─────────────────── */
.hoeren-page .hoeren-pill { transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .12s ease; }
.hoeren-page .hoeren-pill:hover { transform: translateY(-1px); }
.hoeren-page .hoeren-pill:focus-visible { outline: 2px solid var(--hoe-accent); outline-offset: 2px; box-shadow: none; }
.hoeren-page .hoeren-pill--active { box-shadow: 0 4px 14px -4px rgba(37,99,235,.35); }
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil1.hoeren-pill--active { background: color-mix(in srgb, var(--hoe-teil1) 8%, #fff); border-color: var(--hoe-teil1); color: var(--hoe-teil1); }
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil2.hoeren-pill--active { background: color-mix(in srgb, var(--hoe-teil2) 8%, #fff); border-color: var(--hoe-teil2); color: var(--hoe-teil2); }
.hoeren-page .hoeren-pill.hoeren-pill--teil-teil3.hoeren-pill--active { background: color-mix(in srgb, var(--hoe-teil3) 8%, #fff); border-color: var(--hoe-teil3); color: var(--hoe-teil3); }

/* ── Theme card polish ─────────────────────────────────── */
.hoeren-page .hoeren-theme-card { box-shadow: var(--hoe-shadow-card); border-radius: var(--hoe-radius-lg); display: flex; flex-direction: column; }
.hoeren-page .hoeren-theme-card__head { align-items: flex-start; }
.hoeren-page .hoeren-theme-card__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3; min-height: 2.6em;
}
.hoeren-page .hoeren-theme-card--open:hover { box-shadow: var(--hoe-shadow-hover); transform: translateY(-2px); }
.hoeren-page .hoeren-theme-card__cta { margin-top: auto; padding-top: .25rem; }

/* Premium "locked" identity (gold instead of warning yellow) */
.hoeren-page .hoeren-theme-card--locked::before { background: var(--hoe-premium-gold); }
.hoeren-page .hoeren-theme-card--locked .hoeren-theme-card__icon { background: var(--hoe-premium-gold-soft); color: var(--hoe-premium-gold); }
.hoeren-page .hoeren-state-badge--locked {
    background: var(--hoe-premium-gold-soft); color: var(--hoe-premium-gold);
    border: 1px solid color-mix(in srgb, var(--hoe-premium-gold) 30%, transparent);
}

/* ── Variant card unified spacing + accent strip ───────── */
.hoeren-page .hoeren-variant-card { box-shadow: var(--hoe-shadow-card); }
.hoeren-page .hoeren-variant-card > * + * { margin-top: 1rem; }
.hoeren-page .hoeren-variant-card__head { gap: .9rem; }
.hoeren-page .hoeren-progress-mini {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: 999px;
    background: var(--hoe-bg-tint); color: var(--hoe-text-muted);
    font-size: .8rem; font-weight: 600; border: 1px solid var(--hoe-border);
}
.hoeren-page .hoeren-progress-mini--checked { background: var(--hoe-success-soft); color: #166534; border-color: #bbf7d0; }
.hoeren-page .hoeren-progress-mini--solution { background: var(--hoe-info-soft); color: #075985; border-color: #bae6fd; }

/* ── Encouragement softer banner ───────────────────────── */
.hoeren-page .hoeren-encourage {
    border-radius: .7rem; padding: .55rem .8rem; font-size: .9rem;
    box-shadow: none;
}

/* ── Solution banner restyle (calm info-blue) ──────────── */
.hoeren-page .hoeren-solution-banner {
    background: var(--hoe-info-soft);
    color: #075985;
    border: 1px solid #bae6fd;
    border-radius: .7rem;
    padding: .65rem .85rem;
}

/* ── Audio panel: premium custom transport ─────────────── */
.hoeren-page .hoeren-audio-panel.is-enhanced .hoeren-audio-native { display: none !important; }
.hoeren-page .hoeren-audio-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--hoe-shadow-card);
}
.hoeren-page .hoeren-audio-panel__head {
    display: flex; align-items: center; gap: .55rem;
    color: var(--hoe-accent-dk); font-weight: 600; font-size: .92rem;
    margin-bottom: .75rem;
}
.hoeren-page .hoeren-audio-panel__duration { margin-inline-start: auto; color: var(--hoe-text-muted); font-weight: 500; font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; }

.hoeren-page .hoeren-audio-transport {
    display: flex; align-items: center; gap: .85rem;
    padding: .25rem 0 .25rem 0; border: none; background: transparent;
}
.hoeren-page .hoeren-audio-play {
    width: 52px; height: 52px; border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--hoe-accent) 0%, #4f8cff 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(37,99,235,.45);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.hoeren-page .hoeren-audio-play:hover { transform: scale(1.04); filter: brightness(1.05); }
.hoeren-page .hoeren-audio-play:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37,99,235,.30), 0 6px 16px -4px rgba(37,99,235,.45); }
.hoeren-page .hoeren-audio-play[aria-pressed="true"] { background: linear-gradient(135deg, var(--hoe-accent-dk) 0%, var(--hoe-accent) 100%); }

.hoeren-page .hoeren-audio-track { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.hoeren-page .hoeren-audio-times {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--hoe-text-muted); font-size: .78rem; font-variant-numeric: tabular-nums;
}
.hoeren-page .hoeren-audio-times__sep { display: none; }
.hoeren-page .hoeren-audio-seek {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--hoe-accent) 0%, var(--hoe-accent) 0%, #e2e8f0 0%);
    outline: none; cursor: pointer;
}
.hoeren-page .hoeren-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--hoe-accent);
    box-shadow: 0 2px 6px rgba(15,23,42,.18);
    cursor: pointer;
}
.hoeren-page .hoeren-audio-seek::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--hoe-accent);
    box-shadow: 0 2px 6px rgba(15,23,42,.18); cursor: pointer;
}
.hoeren-page .hoeren-audio-seek:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,.20); }

.hoeren-page .hoeren-audio-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin-top: .8rem; padding-top: .75rem;
    border-top: 1px dashed var(--hoe-border);
}
.hoeren-page .hoeren-audio-seek-btn {
    border: 1px solid var(--hoe-border); background: #fff;
    color: var(--hoe-text); border-radius: 999px;
    padding: .35rem .7rem; font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.hoeren-page .hoeren-audio-seek-btn:hover { background: var(--hoe-accent-soft); border-color: var(--hoe-accent); color: var(--hoe-accent-dk); }
.hoeren-page .hoeren-audio-speed { margin-inline-start: auto; display: inline-flex; gap: .2rem; padding: .15rem; background: var(--hoe-bg-tint); border-radius: 999px; border: 1px solid var(--hoe-border); }
.hoeren-page .hoeren-audio-speed-btn {
    border: none; background: transparent; color: var(--hoe-text-muted);
    padding: .25rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.hoeren-page .hoeren-audio-speed-btn:hover { color: var(--hoe-text); }
.hoeren-page .hoeren-audio-speed-btn.is-active { background: #fff; color: var(--hoe-accent-dk); box-shadow: 0 1px 3px rgba(15,23,42,.10); }

@media (max-width: 575.98px) {
    .hoeren-page .hoeren-audio-transport { gap: .65rem; }
    .hoeren-page .hoeren-audio-play { width: 46px; height: 46px; font-size: 1.2rem; }
    .hoeren-page .hoeren-audio-speed { margin-inline-start: 0; width: 100%; justify-content: space-between; }
}

/* ── Statement: bigger number + comfortable text ───────── */
.hoeren-page .hoeren-stmt__no {
    width: 32px; height: 32px; line-height: 32px;
    border-radius: 50%; background: var(--hoe-accent-soft);
    color: var(--hoe-accent-dk); font-weight: 700; font-size: .9rem;
    text-align: center; flex-shrink: 0;
}
.hoeren-page .hoeren-stmt { padding: 1rem 1.1rem; }
.hoeren-page .hoeren-stmt__head { gap: .8rem; align-items: flex-start; }
.hoeren-page .hoeren-stmt__text { font-size: 1rem; }

/* Segmented answer larger tap target */
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option {
    min-height: 52px; font-size: 1rem;
}
.hoeren-page .hoeren-answer-group--segmented .hoeren-answer-option .bi { font-size: 1.05rem; }

/* ── Reveal: elevated review sub-card ──────────────────── */
.hoeren-page .hoeren-reveal {
    background: #ffffff; border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius); padding: .9rem 1rem; margin-top: .85rem;
    box-shadow: var(--hoe-shadow-card);
}
.hoeren-page .hoeren-reveal__chips { gap: .4rem; }
.hoeren-page .hoeren-reveal__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hoe-text-muted); margin-top: .85rem; display: inline-flex; align-items: center; gap: .35rem; }

/* ── Variant stepper polish ────────────────────────────── */
.hoeren-page .hoeren-variant-stepper { padding: .45rem .55rem; box-shadow: var(--hoe-shadow-card); border-radius: 999px; }
.hoeren-page .hoeren-variant-stepper__item.is-active .hoeren-variant-stepper__dot { box-shadow: 0 0 0 4px rgba(37,99,235,.18); }

/* ── RTL extras ────────────────────────────────────────── */
[dir="rtl"] .hoeren-page .hoeren-stmt__head .hoeren-stmt__no { /* numbers stay LTR readable */ direction: ltr; }
[dir="rtl"] .hoeren-page .hoeren-audio-actions .bi-arrow-counterclockwise,
[dir="rtl"] .hoeren-page .hoeren-audio-actions .bi-arrow-clockwise {
    /* keep their natural meaning — do not flip */
}
[dir="rtl"] .hoeren-page .hoeren-cta .bi-arrow-left,
[dir="rtl"] .hoeren-page .hoeren-cta .bi-arrow-right { transform: scaleX(-1); }

/* ── Tablet grid breathing room ────────────────────────── */
@media (min-width: 768px) and (max-width: 1100px) {
    .hoeren-page .hoeren-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Hören Premium Refinement Pass — appended block
   All rules scoped under .hoeren-page (no global leakage).
   ============================================================ */

/* ── Hero tagline + Training flow strip ───────────────────── */
.hoeren-page .hoeren-hero__tagline {
    margin: .25rem 0 .5rem;
    color: var(--hoe-text-muted);
    font-size: .9rem;
    line-height: 1.5;
}
.hoeren-page .hoeren-flow {
    list-style: none;
    margin: 1rem 0 0;
    padding: .65rem .85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .65rem;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-sm);
    backdrop-filter: blur(2px);
}
.hoeren-page .hoeren-flow__step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: var(--hoe-bg-soft);
    border: 1px solid var(--hoe-border);
    color: var(--hoe-text);
    font-size: .85rem;
    line-height: 1.2;
}
.hoeren-page .hoeren-flow__step.is-active {
    background: var(--hoe-accent-soft);
    border-color: #c7d6ff;
    color: var(--hoe-accent-dk);
    font-weight: 600;
}
.hoeren-page .hoeren-flow__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--hoe-accent-soft);
    color: var(--hoe-accent);
    font-size: .85rem;
}
.hoeren-page .hoeren-flow__step.is-active .hoeren-flow__dot {
    background: var(--hoe-accent);
    color: #fff;
}
.hoeren-page .hoeren-flow__label { font-weight: 500; }
.hoeren-page .hoeren-flow__helper {
    display: none;
    color: var(--hoe-text-muted);
    font-size: .78rem;
    margin-inline-start: .25rem;
}
.hoeren-page .hoeren-flow--solve .hoeren-flow__helper { display: inline; }
.hoeren-page .hoeren-flow__arrow {
    color: var(--hoe-text-muted);
    font-size: .85rem;
    line-height: 1;
}
[dir="rtl"] .hoeren-page .hoeren-flow__arrow,
[dir="rtl"] .hoeren-page .hoeren-flow__arrow .bi { transform: scaleX(-1); }

@media (max-width: 560px) {
    .hoeren-page .hoeren-flow { gap: .4rem; }
    .hoeren-page .hoeren-flow--solve .hoeren-flow__helper { display: none; }
    .hoeren-page .hoeren-flow__arrow { display: none; }
}
@media (max-width: 360px) {
    .hoeren-page .hoeren-hero .hoeren-flow { display: none; }
}

/* ── Teil identity — focus chips + tip row ───────────────── */
.hoeren-page .hoeren-teil-info__focus {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    margin: .55rem 0 .35rem;
}
.hoeren-page .hoeren-teil-info__focus-chip {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .78rem;
    color: var(--hoe-text-muted);
    background: var(--hoe-bg-tint);
    border: 1px solid var(--hoe-border);
    border-radius: 999px;
    padding: .15rem .55rem .15rem .35rem;
}
.hoeren-page .hoeren-teil-info__focus-chip .bi { font-size: 1rem; line-height: 0; color: var(--hoe-accent); }
.hoeren-page .hoeren-teil-info__tip {
    margin: .35rem 0 0;
    color: var(--hoe-text-muted);
    font-size: .82rem;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.45;
}
.hoeren-page .hoeren-teil-info__tip .bi {
    color: #b45309;
    font-size: .95rem;
    margin-top: 1px;
}

/* ── Theme card focus line + premium pill + not-ready helper ─ */
.hoeren-page .hoeren-theme-card__focus {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .35rem 0 0;
    color: var(--hoe-text-muted);
    font-size: .78rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hoeren-page .hoeren-theme-card__focus .bi { color: var(--hoe-accent); font-size: .85rem; }
.hoeren-page .hoeren-state-badge--premium {
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    color: #92400e;
    border-color: #fcd34d;
    font-weight: 600;
}
.hoeren-page .hoeren-state-badge--premium .bi { color: #d97706; }
.hoeren-page .hoeren-theme-card__placeholder-helper {
    margin: .35rem 0 0;
    color: var(--hoe-text-muted);
    font-size: .78rem;
    line-height: 1.4;
    text-align: center;
}
@media (max-width: 420px) {
    .hoeren-page .hoeren-theme-card__badges > :nth-child(n+4) { display: none; }
}

/* ── Variant stepper sublabel + done state ───────────────── */
.hoeren-page .hoeren-variant-stepper__textwrap {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}
.hoeren-page .hoeren-variant-stepper__sublabel {
    font-size: .72rem;
    color: var(--hoe-text-muted);
    font-weight: 400;
}
.hoeren-page .hoeren-variant-stepper__item.is-done .hoeren-variant-stepper__dot {
    background: var(--hoe-success);
    color: #fff;
    border-color: var(--hoe-success);
}
.hoeren-page .hoeren-variant-stepper__item.is-done .hoeren-variant-stepper__label {
    color: var(--hoe-success);
}
.hoeren-page .hoeren-variant-stepper__item.is-active {
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
@media (max-width: 560px) {
    .hoeren-page .hoeren-variant-stepper {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .hoeren-page .hoeren-variant-stepper__item { scroll-snap-align: start; flex: 0 0 auto; }
    .hoeren-page .hoeren-variant-stepper__sep { display: none; }
}

/* ── Audio polish ─────────────────────────────────────────── */
.hoeren-page .hoeren-audio-panel.is-playing .hoeren-audio-play {
    box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.hoeren-page .hoeren-audio-times span[data-time-current],
.hoeren-page .hoeren-audio-times span[data-time-total] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    min-width: 3.2ch;
    display: inline-block;
    text-align: center;
}
.hoeren-page .hoeren-audio-times { direction: ltr; }
.hoeren-page .hoeren-audio-seek::-webkit-slider-thumb { transition: transform .15s ease; }
.hoeren-page .hoeren-audio-seek:hover::-webkit-slider-thumb,
.hoeren-page .hoeren-audio-seek:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.hoeren-page .hoeren-audio-seek:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
    border-radius: 999px;
}
.hoeren-page .hoeren-audio-hint {
    margin: .5rem 0 .25rem;
    color: var(--hoe-text-muted);
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.hoeren-page .hoeren-audio-hint .bi { color: var(--hoe-accent); }
@media (max-width: 360px) { .hoeren-page .hoeren-audio-hint { display: none; } }
@media (max-width: 480px) {
    .hoeren-page .hoeren-audio-actions { flex-wrap: wrap; }
    .hoeren-page .hoeren-audio-speed { width: 100%; justify-content: center; }
}

/* ── Statements section divider ───────────────────────────── */
.hoeren-page .hoeren-section-divider {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin: 1rem 0 .65rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--hoe-border);
    flex-wrap: wrap;
}
.hoeren-page .hoeren-section-divider__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hoe-text);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.hoeren-page .hoeren-section-divider__title .bi { color: var(--hoe-accent); }
.hoeren-page .hoeren-section-divider__helper {
    margin: .15rem 0 0;
    color: var(--hoe-text-muted);
    font-size: .8rem;
}
.hoeren-page .hoeren-section-divider .hoeren-progress-mini { margin-inline-start: auto; }

/* ── Reveal microcopy hints + study-mode banner ───────────── */
.hoeren-page .hoeren-reveal__hint {
    margin: .5rem 0;
    color: var(--hoe-text);
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.45;
}
.hoeren-page .hoeren-reveal__hint .bi { color: var(--hoe-accent); }
.hoeren-page .hoeren-reveal__hint--muted { color: var(--hoe-text-muted); font-size: .78rem; margin: .25rem 0 .35rem; }

.hoeren-page .hoeren-solution-banner--study {
    background: var(--hoe-info-soft);
    border-color: #bae6fd;
    color: #0c4a6e;
    align-items: flex-start;
    gap: .65rem;
}
.hoeren-page .hoeren-solution-banner--study .bi { color: var(--hoe-info); font-size: 1.25rem; }
.hoeren-page .hoeren-solution-banner__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.hoeren-page .hoeren-solution-banner__hint {
    color: #0369a1;
    font-size: .82rem;
}

/* Solution-mode card edge accent (does not override basic/modified strip color, just thickens) */
.hoeren-page .hoeren-variant-card--solution-mode::before { background: var(--hoe-info); }

/* ── Long Arabic explanation safety ──────────────────────── */
.hoeren-page .hoeren-explanations__body {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Reveal entrance (reduced-motion aware) ──────────────── */
@media (prefers-reduced-motion: no-preference) {
    .hoeren-page .hoeren-reveal {
        animation: hoeren-reveal-in .22s ease-out both;
    }
    @keyframes hoeren-reveal-in {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Bottom nav: vertical stack on small screens ─────────── */
@media (max-width: 600px) {
    .hoeren-page .hoeren-nav-block {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    .hoeren-page .hoeren-nav-block__slot { width: 100%; }
    .hoeren-page .hoeren-nav-block__slot--next { order: 1; }
    .hoeren-page .hoeren-nav-block__slot--mid  { order: 2; }
    .hoeren-page .hoeren-nav-block__slot--prev { order: 3; }
    .hoeren-page .hoeren-nav-btn { width: 100%; justify-content: center; }
}

/* ── RTL arrow mirroring for in-content arrows ───────────── */
[dir="rtl"] .hoeren-page .hoeren-btn .bi-arrow-right,
[dir="rtl"] .hoeren-page .hoeren-btn .bi-arrow-left,
[dir="rtl"] .hoeren-page .hoeren-nav-btn .bi-arrow-right,
[dir="rtl"] .hoeren-page .hoeren-nav-btn .bi-arrow-left,
[dir="rtl"] .hoeren-page .hoeren-cta .bi-arrow-right,
[dir="rtl"] .hoeren-page .hoeren-cta .bi-arrow-left {
    transform: scaleX(-1);
}

/* ── Hero padding tightening on narrow mobile ────────────── */
@media (max-width: 480px) {
    .hoeren-page .hoeren-hero { padding: 1rem; }
}

/* ============================================================
   Hören — Premium Progress UI (landing summary, card badges,
   stepper score, post-Prüfen banner). Scoped to .hoeren-page.
   ============================================================ */
.hoeren-page .hoeren-progress-summary {
    background: linear-gradient(135deg, hsl(var(--card, 0 0% 100%)), hsl(var(--muted, 210 20% 98%)));
    border: 1px solid var(--hoe-border, rgba(0,0,0,.08));
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1rem;
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.12);
    display: flex; flex-direction: column; gap: .85rem;
}
.hoeren-page .hoeren-progress-summary__head {
    display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.hoeren-page .hoeren-progress-summary__title {
    display:inline-flex; align-items:center; gap:.5rem;
    font-weight:700; font-size:1.02rem; color:var(--hoe-text, #1f2937);
}
.hoeren-page .hoeren-progress-summary__title i { color: var(--hoe-accent, #4f46e5); }
.hoeren-page .hoeren-progress-summary__chips { display:inline-flex; gap:.4rem; flex-wrap:wrap; }
.hoeren-page .hoeren-progress-summary__chip {
    display:inline-block; padding:.18rem .55rem; border-radius:999px;
    background: var(--hoe-accent-soft, rgba(79,70,229,.1)); color: var(--hoe-accent, #4f46e5);
    font-size:.78rem; font-weight:600;
}
.hoeren-page .hoeren-progress-summary__chip--muted {
    background: rgba(0,0,0,.06); color: var(--hoe-text-muted, #6b7280);
}
.hoeren-page .hoeren-progress-summary__main {
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.hoeren-page .hoeren-progress-summary__metric { display:flex; flex-direction:column; min-width:7rem; }
.hoeren-page .hoeren-progress-summary__metric-value {
    font-size:1.6rem; font-weight:800; color: var(--hoe-text, #1f2937); line-height:1.1;
    font-variant-numeric: tabular-nums;
}
.hoeren-page .hoeren-progress-summary__metric-label {
    font-size:.78rem; color: var(--hoe-text-muted, #6b7280); margin-top:.15rem;
}
.hoeren-page .hoeren-progress-summary__bar {
    position:relative; flex:1 1 14rem; min-width:10rem; height: 14px;
    background: rgba(0,0,0,.07); border-radius:999px; overflow:hidden;
}
.hoeren-page .hoeren-progress-summary__bar-fill {
    position:absolute; inset-block:0; inset-inline-start:0;
    background: linear-gradient(90deg, var(--hoe-accent, #4f46e5), var(--hoe-accent-2, #06b6d4));
    border-radius:999px; transition: width .4s ease;
}
[dir="rtl"] .hoeren-page .hoeren-progress-summary__bar-fill {
    background: linear-gradient(270deg, var(--hoe-accent, #4f46e5), var(--hoe-accent-2, #06b6d4));
}
.hoeren-page .hoeren-progress-summary__bar-pct {
    position:absolute; inset-inline-end:.5rem; top:50%; transform:translateY(-50%);
    font-size:.72rem; font-weight:700; color:#fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    font-variant-numeric: tabular-nums;
}
.hoeren-page .hoeren-progress-summary__stats {
    display:flex; align-items:center; gap:.5rem .85rem; flex-wrap:wrap;
    color: var(--hoe-text, #1f2937); font-size:.85rem;
}
.hoeren-page .hoeren-progress-summary__stat {
    display:inline-flex; align-items:center; gap:.35rem;
}
.hoeren-page .hoeren-progress-summary__stat--muted { color: var(--hoe-text-muted, #6b7280); }
.hoeren-page .hoeren-progress-summary__stat i { color: var(--hoe-accent, #4f46e5); }
.hoeren-page .hoeren-progress-summary__cta {
    margin-inline-start:auto;
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .85rem; border-radius:10px;
    background: var(--hoe-accent, #4f46e5); color:#fff; font-weight:600;
    text-decoration:none; transition: transform .12s ease, box-shadow .12s ease;
}
.hoeren-page .hoeren-progress-summary__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(79,70,229,.5); color:#fff; }
.hoeren-page .hoeren-progress-summary--empty .hoeren-progress-summary__empty {
    display:flex; align-items:center; gap:.85rem;
    background: var(--hoe-accent-soft, rgba(79,70,229,.07)); padding:.85rem 1rem; border-radius:10px;
}
.hoeren-page .hoeren-progress-summary__empty i { font-size:1.6rem; color: var(--hoe-accent, #4f46e5); }
.hoeren-page .hoeren-progress-summary__empty strong { display:block; font-size:.95rem; color: var(--hoe-text, #1f2937); }
.hoeren-page .hoeren-progress-summary__empty p { margin:.15rem 0 0; font-size:.82rem; color: var(--hoe-text-muted, #6b7280); }
@media (max-width: 640px) {
    .hoeren-page .hoeren-progress-summary__main { flex-direction:column; align-items:stretch; }
    .hoeren-page .hoeren-progress-summary__cta { margin-inline-start:0; justify-content:center; }
}

/* ── Theme card progress badges ──────────────────────────── */
.hoeren-page .hoeren-theme-card__progress {
    display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem;
    margin-top:.25rem; padding:.5rem .65rem;
    background: rgba(0,0,0,.025); border-radius:10px;
    font-size:.78rem;
}
.hoeren-page .hoeren-progress-pill {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.15rem .55rem; border-radius:999px; font-weight:600; font-size:.74rem;
    background: rgba(0,0,0,.06); color: var(--hoe-text, #1f2937);
}
.hoeren-page .hoeren-progress-pill--new        { background: rgba(79,70,229,.1);  color: var(--hoe-accent, #4f46e5); }
.hoeren-page .hoeren-progress-pill--in_progress{ background: rgba(245,158,11,.14); color: #b45309; }
.hoeren-page .hoeren-progress-pill--completed  { background: rgba(16,185,129,.14); color: #047857; }
.hoeren-page .hoeren-progress-stat {
    display:inline-flex; align-items:center; gap:.25rem;
    color: var(--hoe-text, #1f2937); font-variant-numeric: tabular-nums;
}
.hoeren-page .hoeren-progress-stat--muted { color: var(--hoe-text-muted, #6b7280); }
.hoeren-page .hoeren-progress-stat i { color: var(--hoe-accent, #4f46e5); font-size:.85em; }
.hoeren-page .hoeren-cta--secondary { margin-top:.4rem; }

/* ── Variant stepper score badge ─────────────────────────── */
.hoeren-page .hoeren-variant-stepper__score {
    display:inline-flex; align-items:center; gap:.2rem;
    margin-inline-start:.4rem;
    padding:.1rem .45rem; border-radius:999px;
    background: rgba(16,185,129,.15); color:#047857;
    font-size:.72rem; font-weight:700; font-variant-numeric: tabular-nums;
}
.hoeren-page .hoeren-variant-stepper__score i { font-size:.8em; }

/* ── Per-variant prior-progress chip line ────────────────── */
.hoeren-page .hoeren-variant-card__prior {
    display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem;
    margin: .25rem 0 .65rem; padding:.4rem .65rem;
    background: rgba(0,0,0,.025); border-radius:8px;
    font-size:.8rem;
}

/* ── Post-Prüfen "progress saved" banner ─────────────────── */
.hoeren-page .hoeren-progress-saved {
    display:flex; align-items:center; gap:.65rem;
    margin: .65rem 0;
    padding: .65rem .85rem; border-radius:10px;
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(6,182,212,.08));
    border: 1px solid rgba(16,185,129,.25);
    color:#065f46;
}
.hoeren-page .hoeren-progress-saved i.bi-cloud-check-fill { font-size:1.25rem; color:#059669; }
.hoeren-page .hoeren-progress-saved__body { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem; flex:1 1 auto; }
.hoeren-page .hoeren-progress-saved__body strong { font-size:.92rem; color:#065f46; }
.hoeren-page .hoeren-progress-saved__chip {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.12rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700;
    background: rgba(255,255,255,.7); color:#047857;
}
.hoeren-page .hoeren-progress-saved__chip--best { background: rgba(245,158,11,.18); color:#b45309; }
.hoeren-page .hoeren-progress-saved__chip--complete { background: rgba(16,185,129,.2); color:#047857; }
@media (prefers-reduced-motion: no-preference) {
    .hoeren-page .hoeren-progress-saved { animation: hoeren-fade-in .25s ease both; }
}
@keyframes hoeren-fade-in { from { opacity:0; transform: translateY(3px); } to { opacity:1; transform:none; } }

/* Hören Teil 2 — visual divider between statements 5 and 6 (10-slot mode). */
.hoeren-stmt-divider{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 .75rem;color:var(--hoe-muted,#64748b);}
.hoeren-stmt-divider__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,#cbd5e1,transparent);}
.hoeren-stmt-divider__label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .6rem;border-radius:999px;background:rgba(100,116,139,.08);}

/* ============================================================
   Hören True/False answer table (Task 16) — UI/layout only.
   Self-contained component: works inside Lernen (.hoeren-page,
   where --hoe-* tokens exist) AND inside Prüfung
   (.exam-render--hoeren, where they do not). Local --tf-* tokens
   fall back off --hoe-* when present, otherwise use explicit
   values. Dark-mode token overrides live in sprafo-theme.css.
   No answer logic, input names or values are affected here.
   ============================================================ */
.hoeren-tf {
    --tf-col:            5.5rem;
    --tf-surface:        #ffffff;
    --tf-surface-alt:    var(--hoe-bg-soft, #f8fafc);
    --tf-text:           var(--hoe-text, #1f2937);
    --tf-muted:          var(--hoe-text-muted, #64748b);
    --tf-border:         var(--hoe-border, #e6e8ee);
    --tf-border-strong:  var(--hoe-border-strong, #d6dae3);
    --tf-accent:         var(--hoe-accent, #2563eb);
    --tf-accent-soft:    var(--hoe-accent-soft, #eff4ff);
    --tf-success:        var(--hoe-success, #16a34a);
    --tf-success-soft:   var(--hoe-success-soft, #dcfce7);
    --tf-danger:         var(--hoe-danger, #dc2626);
    --tf-danger-soft:    var(--hoe-danger-soft, #fee2e2);
    --tf-info:           var(--hoe-info, #0284c7);
    --tf-info-soft:      var(--hoe-info-soft, #e0f2fe);
    --tf-ok-row:         #f0fdf4;
    --tf-bad-row:        #fef2f2;
    --tf-info-row:       #f0f9ff;
    --tf-radius:         16px;

    display: block;
    width: 100%;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius);
    background: var(--tf-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -18px rgba(15, 23, 42, .28);
}

/* Shared 3-column grid so header + every row align perfectly. */
.hoeren-tf__head,
.hoeren-tf__row {
    display: grid;
    grid-template-columns: var(--tf-col) var(--tf-col) minmax(0, 1fr);
    align-items: stretch;
}

/* ── Header row (Richtig | Falsch | Aussage) ─────────────── */
.hoeren-tf__head {
    background: var(--tf-surface-alt);
    border-bottom: 1px solid var(--tf-border-strong);
}
.hoeren-tf__ch {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .7rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--tf-muted);
}
.hoeren-tf__ch--stmt {
    justify-content: flex-start;
    text-align: start;
    padding-inline-start: 1rem;
}
.hoeren-tf__ch + .hoeren-tf__ch { border-inline-start: 1px solid var(--tf-border); }

/* ── Statement rows ──────────────────────────────────────── */
.hoeren-tf__row {
    border-top: 1px solid var(--tf-border);
    transition: background-color .12s ease;
}
.hoeren-tf__row:hover { background: var(--tf-surface-alt); }

/* ── Richtig / Falsch option cells (custom radios) ───────── */
.hoeren-tf__opt {
    position: relative;
    display: flex;
    padding: .45rem;
    border-inline-end: 1px solid var(--tf-border);
}
.hoeren-tf__opt input[type="radio"] {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.hoeren-tf__radio {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease;
}
.hoeren-tf__dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--tf-border-strong);
    background: var(--tf-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .82rem;
    transition: border-color .12s ease, background-color .12s ease,
                color .12s ease, box-shadow .12s ease;
}
.hoeren-tf__radio:hover .hoeren-tf__dot { border-color: var(--tf-accent); }
.hoeren-tf__opt input[type="radio"]:focus-visible + .hoeren-tf__radio .hoeren-tf__dot {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px var(--tf-accent-soft);
}
.hoeren-tf__opt input[type="radio"]:checked + .hoeren-tf__radio { background: var(--tf-accent-soft); }
.hoeren-tf__opt input[type="radio"]:checked + .hoeren-tf__radio .hoeren-tf__dot {
    border-color: var(--tf-accent);
    background: var(--tf-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .28);
}
.hoeren-tf__opt input[type="radio"]:disabled + .hoeren-tf__radio { cursor: default; }

/* Post-Prüfen / solution modifiers on the picked option
   (!important mirrors the existing segmented-control convention). */
.hoeren-tf__radio--chosen-correct { background: var(--tf-success-soft) !important; }
.hoeren-tf__radio--chosen-correct .hoeren-tf__dot {
    border-color: var(--tf-success) !important;
    background: var(--tf-success) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, .3) !important;
}
.hoeren-tf__radio--chosen-wrong { background: var(--tf-danger-soft) !important; }
.hoeren-tf__radio--chosen-wrong .hoeren-tf__dot {
    border-color: var(--tf-danger) !important;
    background: var(--tf-danger) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .3) !important;
}
.hoeren-tf__radio--chosen-neutral { background: var(--tf-info-soft) !important; }
.hoeren-tf__radio--chosen-neutral .hoeren-tf__dot {
    border-color: var(--tf-info) !important;
    background: var(--tf-info) !important;
    color: #fff !important;
}

/* ── Statement (Aussage) cell ────────────────────────────── */
.hoeren-tf__stmt {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    min-width: 0;
}
.hoeren-tf__no {
    flex: 0 0 auto;
    width: 1.7rem; height: 1.7rem;
    border-radius: 8px;
    background: var(--tf-surface-alt);
    border: 1px solid var(--tf-border);
    color: var(--tf-muted);
    font-weight: 700; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    direction: ltr;
}
.hoeren-tf__text {
    min-width: 0;
    color: var(--tf-text);
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* ── Row result states (after Prüfen / Show solution) ────── */
.hoeren-tf__row:hover.hoeren-tf__row--ok,
.hoeren-tf__row--ok     { background: var(--tf-ok-row);   box-shadow: inset 3px 0 0 var(--tf-success); }
.hoeren-tf__row:hover.hoeren-tf__row--bad,
.hoeren-tf__row--bad    { background: var(--tf-bad-row);  box-shadow: inset 3px 0 0 var(--tf-danger); }
.hoeren-tf__row:hover.hoeren-tf__row--reveal,
.hoeren-tf__row--reveal { background: var(--tf-info-row); box-shadow: inset 3px 0 0 var(--tf-info); }

/* ── Reveal block (keywords / explanations) — full width ─── */
.hoeren-tf__reveal {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--tf-border);
    background: var(--tf-surface-alt);
    padding: .85rem 1rem 1rem;
}
.hoeren-tf__reveal .hoeren-reveal {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Full-width dividers / statement 5→6 separator inside the table. */
.hoeren-tf > .hoeren-stmt-divider { margin: .35rem 1rem; }

/* ── Audio wrapper for the Prüfung render (dark-aware) ───── */
.hoeren-tf-audio {
    background: var(--hoe-bg-soft, #f8fafc);
    border: 1px solid var(--hoe-border, #e6e8ee);
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}
.hoeren-tf-audio audio { width: 100%; display: block; }

/* ── Responsive: keep 3 columns, tighten so nothing overflows ── */
@media (max-width: 575.98px) {
    .hoeren-tf { --tf-col: 3.4rem; }
    .hoeren-tf__ch { font-size: .62rem; letter-spacing: .03em; padding: .55rem .3rem; }
    .hoeren-tf__ch--stmt { padding-inline-start: .75rem; }
    .hoeren-tf__opt { padding: .35rem; }
    .hoeren-tf__radio { min-height: 42px; }
    .hoeren-tf__dot { width: 22px; height: 22px; font-size: .72rem; }
    .hoeren-tf__stmt { padding: .7rem .75rem; gap: .55rem; }
    .hoeren-tf__no { width: 1.5rem; height: 1.5rem; font-size: .8rem; }
    .hoeren-tf__text { font-size: .95rem; }
    .hoeren-tf__reveal { padding: .7rem .75rem .8rem; }
}

/* ── RTL: mirror the result accent bar ───────────────────── */
[dir="rtl"] .hoeren-tf__row--ok     { box-shadow: inset -3px 0 0 var(--tf-success); }
[dir="rtl"] .hoeren-tf__row--bad    { box-shadow: inset -3px 0 0 var(--tf-danger); }
[dir="rtl"] .hoeren-tf__row--reveal { box-shadow: inset -3px 0 0 var(--tf-info); }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hoeren-tf__row,
    .hoeren-tf__radio,
    .hoeren-tf__dot { transition: none; }
}

/* ============================================================
   EXAM HÖREN AUDIO PLAYER
   Professional transport scoped to .exam-render--hoeren.
   Matches the .hoeren-page audio panel visual system without
   pulling all hoeren.css rules onto unrelated exam elements.
   Dark-mode token overrides live in sprafo-theme.css.
   ============================================================ */

/* ── Design tokens (same values as .hoeren-page) ───────────── */
.exam-render--hoeren {
    --hoe-radius:        .9rem;
    --hoe-radius-sm:     .55rem;
    --hoe-radius-lg:     1.1rem;
    --hoe-border:        #e6e8ee;
    --hoe-border-strong: #d6dae3;
    --hoe-text:          #1f2937;
    --hoe-text-muted:    #64748b;
    --hoe-bg-soft:       #f8fafc;
    --hoe-bg-tint:       #f1f5f9;
    --hoe-shadow-card:   0 1px 2px rgba(15,23,42,.05), 0 6px 20px -10px rgba(15,23,42,.12);
    --hoe-accent:        #2563eb;
    --hoe-accent-dk:     #1d4ed8;
    --hoe-accent-soft:   #eff4ff;
    --hoe-focus-ring:    0 0 0 3px rgba(37, 99, 235, .25);
    --exam-hoe-track:    #e2e8f0;
}

/* ── Audio panel card ────────────────────────────────────── */
.exam-render--hoeren .hoeren-audio-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--hoe-border);
    border-radius: var(--hoe-radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--hoe-shadow-card);
    margin-bottom: 1.25rem;
}
.exam-render--hoeren .hoeren-audio-panel.is-enhanced .hoeren-audio-native { display: none !important; }
.exam-render--hoeren .hoeren-audio-panel__head {
    display: flex; align-items: center; gap: .55rem;
    color: var(--hoe-accent-dk); font-weight: 600; font-size: .92rem;
    margin-bottom: .75rem;
}
.exam-render--hoeren .hoeren-audio-panel__duration {
    margin-inline-start: auto; color: var(--hoe-text-muted);
    font-weight: 500; font-size: .82rem;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* ── Custom transport ────────────────────────────────────── */
.exam-render--hoeren .hoeren-audio-transport {
    display: flex; align-items: center; gap: .85rem;
    padding: .25rem 0; border: none; background: transparent;
    flex-wrap: wrap;
}
.exam-render--hoeren .hoeren-audio-play {
    width: 52px; height: 52px; border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--hoe-accent) 0%, #4f8cff 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(37,99,235,.45);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.exam-render--hoeren .hoeren-audio-play:hover  { transform: scale(1.04); filter: brightness(1.05); }
.exam-render--hoeren .hoeren-audio-play:active { transform: translateY(0) scale(1); }
.exam-render--hoeren .hoeren-audio-play:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37,99,235,.30), 0 6px 16px -4px rgba(37,99,235,.45);
}
.exam-render--hoeren .hoeren-audio-play[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--hoe-accent-dk) 0%, var(--hoe-accent) 100%);
}
.exam-render--hoeren .hoeren-audio-track {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem;
}
.exam-render--hoeren .hoeren-audio-times {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--hoe-text-muted); font-size: .78rem; font-variant-numeric: tabular-nums;
}
.exam-render--hoeren .hoeren-audio-times__sep { display: none; }
.exam-render--hoeren .hoeren-audio-seek {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--hoe-accent) 0%, var(--hoe-accent) 0%, var(--exam-hoe-track) 0%);
    outline: none; cursor: pointer;
}
.exam-render--hoeren .hoeren-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--hoe-accent);
    box-shadow: 0 2px 6px rgba(15,23,42,.18);
    cursor: pointer; transition: transform .15s ease;
}
.exam-render--hoeren .hoeren-audio-seek:hover::-webkit-slider-thumb,
.exam-render--hoeren .hoeren-audio-seek:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.exam-render--hoeren .hoeren-audio-seek::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--hoe-accent);
    box-shadow: 0 2px 6px rgba(15,23,42,.18); cursor: pointer;
}
.exam-render--hoeren .hoeren-audio-seek:focus-visible {
    outline: none; border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(37,99,235,.20);
}

/* ── Action bar (replay, ±5s, speed) ─────────────────────── */
.exam-render--hoeren .hoeren-audio-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin-top: .8rem; padding-top: .75rem;
    border-top: 1px dashed var(--hoe-border);
}
.exam-render--hoeren .hoeren-audio-seek-btn {
    border: 1px solid var(--hoe-border); background: #fff;
    color: var(--hoe-text); border-radius: 999px;
    padding: .35rem .7rem; font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.exam-render--hoeren .hoeren-audio-seek-btn:hover {
    background: var(--hoe-accent-soft); border-color: var(--hoe-accent); color: var(--hoe-accent-dk);
}
.exam-render--hoeren .hoeren-audio-seek-btn:focus-visible {
    outline: none; box-shadow: var(--hoe-focus-ring);
}
.exam-render--hoeren .hoeren-audio-speed {
    margin-inline-start: auto; display: inline-flex; gap: .2rem;
    padding: .15rem; background: var(--hoe-bg-tint);
    border-radius: 999px; border: 1px solid var(--hoe-border);
}
.exam-render--hoeren .hoeren-audio-speed-btn {
    border: none; background: transparent; color: var(--hoe-text-muted);
    padding: .25rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.exam-render--hoeren .hoeren-audio-speed-btn:hover { color: var(--hoe-text); }
.exam-render--hoeren .hoeren-audio-speed-btn.is-active {
    background: #fff; color: var(--hoe-accent-dk);
    box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.exam-render--hoeren .hoeren-audio-speed-btn:focus-visible {
    outline: none; box-shadow: var(--hoe-focus-ring);
}

/* ── Hint line ───────────────────────────────────────────── */
.exam-render--hoeren .hoeren-audio-hint {
    margin: .5rem 0 .25rem;
    color: var(--hoe-text-muted); font-size: .78rem;
    display: flex; align-items: center; gap: .35rem;
}
.exam-render--hoeren .hoeren-audio-hint .bi { color: var(--hoe-accent); }

/* ── No-audio notice ─────────────────────────────────────── */
.exam-render--hoeren .hoeren-audio-panel--noaudio {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem; border-radius: var(--hoe-radius-sm);
    background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fb 100%);
    border: 1px solid #bdd7f3;
    box-shadow: 0 1px 0 rgba(15, 35, 75, .02);
    margin-bottom: 1.25rem;
}
.exam-render--hoeren .hoeren-noaudio-panel__icon {
    width: 2.4rem; height: 2.4rem; border-radius: .6rem;
    background: #ffffff; color: #1d4ed8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0; border: 1px solid #bdd7f3;
}
.exam-render--hoeren .hoeren-noaudio-panel__body {
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.exam-render--hoeren .hoeren-noaudio-panel__body strong {
    color: #0f2a5b; font-size: .95rem;
}
.exam-render--hoeren .hoeren-noaudio-panel__body span {
    font-size: .83rem; color: #2b4d86;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .exam-render--hoeren .hoeren-audio-transport { gap: .65rem; }
    .exam-render--hoeren .hoeren-audio-play { width: 46px; height: 46px; font-size: 1.2rem; }
    .exam-render--hoeren .hoeren-audio-speed {
        margin-inline-start: 0; width: 100%; justify-content: space-between;
    }
    .exam-render--hoeren .hoeren-audio-actions { gap: .35rem; }
    .exam-render--hoeren .hoeren-audio-seek-btn {
        flex: 1 1 auto; min-width: 0; justify-content: center;
    }
}
@media (max-width: 360px) { .exam-render--hoeren .hoeren-audio-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .exam-render--hoeren .hoeren-audio-play,
    .exam-render--hoeren .hoeren-audio-seek-btn,
    .exam-render--hoeren .hoeren-audio-seek::-webkit-slider-thumb { transition: none; }
}