/* Grundlagencheck and Krypto Selbstcheck (r337 composition, FINAL v18 tokens).
   Staged r337 elements keep their form: progress bars, answer letters, feedback cards, the traffic-light score ring,
   area bars, step indicator and chips. Historic fixed colours are mapped to semantic tokens. */
@layer components {
 .learning-check { padding-block: var(--s6); }
 .learning-check [hidden] { display: none; }
 /* r24 saved results (decision 29.09.2026): full store, server refusal and not-found hints (central status card). */
 .learning-check .saved-results-slot { margin-bottom: var(--s4); }
 .learning-check .saved-results-notice__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
 .learning-check .hidden { display: none; }
 .learning-dialog-icon { margin: 0 0 var(--s2); font-size: 1.6rem; line-height: 1; }

 /* ── Grundlagencheck ─────────────────────────────── */
 .learning-check--grundlagencheck .learning-check__tool { width: min(760px, 100%); margin-inline: auto; }
 .learning-check--grundlagencheck .summary { margin-top: var(--s3); }
 .learning-check--grundlagencheck :is(.panel, .result-panel) { margin-top: var(--s3); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
 .learning-check--grundlagencheck .result-panel { display: none; }
 .learning-check--grundlagencheck .panel-bar { height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hover), var(--gold)); }
 .learning-check--grundlagencheck .panel-inner { padding: var(--s4); }
 .learning-check--grundlagencheck .progress-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); color: var(--text-muted); font-size: .84rem; font-weight: 700; }
 .learning-check--grundlagencheck .progressbar { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); }
 .learning-check--grundlagencheck .progressfill { width: 0; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold-deep), var(--gold-hover), var(--gold)); transition: width .35s var(--ease-standard); }
 .learning-check--grundlagencheck .question-block { padding-top: var(--s3); }
 .learning-check--grundlagencheck .block-label { margin: 0 0 var(--s2); color: var(--accent-text); font-size: .72rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
 .learning-check--grundlagencheck .question-title { margin: 0 0 var(--s4); font-size: 1rem; line-height: 1.24; letter-spacing: -.015em; font-weight: 700; }
 .learning-check--grundlagencheck .answers { display: grid; gap: var(--s3); }
 .learning-check--grundlagencheck .answer { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; min-height: var(--touch-target); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
 .learning-check--grundlagencheck .answer:hover { border-color: var(--gold-border); }
 .learning-check--grundlagencheck .answer.is-selected { border-color: var(--info-border); background: var(--info-soft); }
 .learning-check--grundlagencheck .answer.is-locked { cursor: default; }
 .learning-check--grundlagencheck .answer.is-correct { border-color: var(--success-border); background: var(--success-soft); }
 .learning-check--grundlagencheck .answer.is-wrong { border-color: var(--danger-border); background: var(--danger-soft); }
 .learning-check--grundlagencheck .answer-letter { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent-text); font-size: .88rem; font-weight: 700; }
 .learning-check--grundlagencheck .answer-text { margin: 1px 0 0; font-size: .92rem; line-height: 1.46; }
 .learning-check--grundlagencheck .feedback-panel { display: none; margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); animation: lc-feedback-in calc(var(--motion-base) + var(--motion-fast)) var(--ease-standard); }
 /* r43 (Prüfliste A2): the answer feedback is felt: the right answer glows once, the feedback slides in. */
 .learning-check--grundlagencheck .answer.is-correct { animation: lc-answer-right calc(var(--motion-base) * 3) var(--ease-standard); }
 @keyframes lc-answer-right { 0% { box-shadow: 0 0 0 0 var(--success-border); } 100% { box-shadow: 0 0 0 var(--s2) transparent; } }
 @keyframes lc-feedback-in { from { opacity: 0; transform: translateY(var(--s2)); } to { opacity: 1; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .learning-check--grundlagencheck :is(.feedback-panel, .answer.is-correct) { animation: none; } }
 .learning-check--grundlagencheck .feedback-status { margin: 0 0 var(--s3); font-size: 1rem; font-weight: 700; }
 .learning-check--grundlagencheck .feedback-status.good { color: var(--success); }
 .learning-check--grundlagencheck .feedback-status.bad { color: var(--danger); }
 .learning-check--grundlagencheck .feedback-correct { margin: 0 0 var(--s3); font-size: .88rem; }
 .learning-check--grundlagencheck .feedback-card { padding: var(--s3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--surface); }
 .learning-check--grundlagencheck .feedback-card + .feedback-card { margin-top: var(--s3); }
 .learning-check--grundlagencheck .feedback-card h3 { margin: 0 0 var(--s2); color: var(--accent-text); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
 .learning-check--grundlagencheck .feedback-card p { margin: 0; font-size: .88rem; line-height: 1.58; }
 .learning-check--grundlagencheck .feedback-card.risk { border-color: var(--gold-border); border-left: 3px solid var(--gold); background: var(--gold-soft); }
 .learning-check--grundlagencheck .actions { display: flex; gap: var(--s3); margin-top: var(--s4); }
 .learning-check--grundlagencheck .result-head { display: flex; flex-direction: column; gap: var(--s3); }
 .learning-check--grundlagencheck .score-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
 .learning-check--grundlagencheck :is(.pill-result, .summary-pill) { border-color: var(--gold-border); background: var(--gold-soft); color: var(--accent-text); letter-spacing: .02em; text-transform: none; }
 .learning-check--grundlagencheck .result-title { margin: 0; font-size: 1.18rem; line-height: 1.28; letter-spacing: -.014em; font-weight: 700; }
 .learning-check--grundlagencheck .result-title-accent { color: var(--accent-text); }
 .learning-check--grundlagencheck .result-stack--calm { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s5); }
 .learning-check--grundlagencheck .result-section h3 { margin: 0 0 var(--s2); color: var(--accent-text); font-size: .77rem; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
 .learning-check--grundlagencheck .result-section p { margin: 0; max-width: 66ch; font-size: .96rem; line-height: 1.72; }
 .learning-check--grundlagencheck .result-section--risk { padding: var(--s3) var(--s4); border-left: 2px solid var(--danger-border); border-radius: var(--radius-control); background: var(--danger-soft); }
 .learning-check--grundlagencheck .result-section--risk h3 { color: var(--danger); }
 .learning-check--grundlagencheck .result-section--secondary { padding-top: var(--s4); border-top: 1px solid var(--border-soft); }
 .learning-check--grundlagencheck .result-section--secondary p { color: var(--text-muted); max-width: 64ch; }
 .learning-check--grundlagencheck .result-guidance { max-width: 360px; margin: var(--s6) auto 0; padding-top: var(--s5); border-top: 1px solid var(--border-soft); text-align: center; }
 .learning-check--grundlagencheck .result-guidance-label { margin: 0 0 var(--s3); color: var(--text-muted); font-size: .84rem; font-weight: 600; }
 .learning-check--grundlagencheck .result-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s2); }
 .learning-check--grundlagencheck .result-actions .result-primary { min-width: min(100%, 286px); }
 .learning-check--grundlagencheck .result-secondary-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--s2); }
 .learning-check--grundlagencheck .result-text-link { min-height: 36px; color: var(--text-muted); font-size: .83rem; font-weight: 500; }

 /* ── Krypto Selbstcheck ──────────────────────────── */
 .learning-check--selbstcheck .r4x-container { width: min(960px, 100%); margin-inline: auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-elevated); }
 .learning-check--selbstcheck .r4x-view-tabs { display: flex; align-items: center; overflow-x: auto; padding: 0 var(--s5); border-bottom: 2px solid var(--border-soft); background: var(--surface-muted); }
 .learning-check--selbstcheck .r4x-view-pill { position: relative; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5) var(--s3) 0; color: var(--text-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; pointer-events: none; user-select: none; }
 .learning-check--selbstcheck .r4x-view-pill + .r4x-view-pill::before { content: ''; display: block; flex-shrink: 0; width: 24px; height: 1px; margin-right: var(--s5); background: var(--border); }
 .learning-check--selbstcheck .step-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-size: .72rem; font-weight: 800; transition: all var(--motion-fast) var(--ease-standard); }
 .learning-check--selbstcheck .r4x-view-pill.active { color: var(--text); pointer-events: auto; }
 .learning-check--selbstcheck .r4x-view-pill.active .step-num { border-color: var(--gold); background: var(--gold); color: var(--button-text); }
 .learning-check--selbstcheck .r4x-view-pill.done { color: var(--text-muted); pointer-events: auto; cursor: pointer; }
 .learning-check--selbstcheck .r4x-view-pill.done .step-num { border-color: var(--success); background: var(--success); color: var(--surface); }
 /* r44 (r35 V06): on phones the three steps fit without scrolling; inactive steps show their number, the label stays for
    screen readers (UX approval 30.09.2026). Before, "Ergebnis" sat off-screen and step 3 pushed "Einstellungen" out. */
 @media (max-width: 480px) {
  .learning-check--selbstcheck .r4x-view-tabs { overflow-x: visible; padding-inline: var(--s4); }
  .learning-check--selbstcheck .r4x-view-pill { padding-right: var(--s3); }
  .learning-check--selbstcheck .r4x-view-pill + .r4x-view-pill::before { width: var(--s4); margin-right: var(--s3); }
  .learning-check--selbstcheck .r4x-view-pill:not(.active) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 }
 .learning-check--selbstcheck .r4x-main { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5) var(--s4) var(--s6); }
 .learning-check--selbstcheck .r4x-tool-title-row { display: flex; align-items: center; gap: var(--s4); }

 .learning-check--selbstcheck .benefit-section { overflow: hidden; border: 1.5px solid var(--gold-border); border-radius: var(--radius-card); background: var(--gold-soft); }
 .learning-check--selbstcheck .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: var(--touch-target); padding: var(--s3) var(--s4); border: 0; background: none; color: var(--text); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
 .learning-check--selbstcheck .accordion-header::before { content: '✦'; flex-shrink: 0; color: var(--gold); font-size: .75rem; }
 .learning-check--selbstcheck .accordion-header span:first-child { flex: 1; text-align: left; }
 .learning-check--selbstcheck .accordion-icon { flex-shrink: 0; color: var(--accent-text); font-size: .8rem; font-weight: 800; }
 .learning-check--selbstcheck .accordion-body { padding: 0 var(--s4) var(--s4); font-size: .84rem; line-height: 1.6; }
 .learning-check--selbstcheck .accordion-body.collapsed { display: none; }
 .learning-check--selbstcheck .benefit-intro { margin: 0 0 var(--s3); }
 .learning-check--selbstcheck .benefit-list { margin: 0 0 var(--s3); padding-left: 18px; }
 .learning-check--selbstcheck .benefit-list li { margin-bottom: 6px; }
 .learning-check--selbstcheck .benefit-hint { padding: var(--s2) var(--s3); border-left: 3px solid var(--gold); border-radius: var(--radius-control); background: var(--surface); }

 .learning-check--selbstcheck .card-accent::before { position: static; display: block; width: auto; height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hover)); }
 .learning-check--selbstcheck .card-header { padding: var(--s4) var(--s4) var(--s3); border-bottom: 2px solid var(--border-soft); background: var(--surface-muted); }
 .learning-check--selbstcheck .card-title { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
 .learning-check--selbstcheck .card-title-icon { display: inline-block; margin-right: 7px; vertical-align: -2px; color: var(--gold); }
 .learning-check--selbstcheck .card-subtitle { margin-top: var(--s1); color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
 .learning-check--selbstcheck .card-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); }
 .learning-check--selbstcheck .field-group { display: flex; flex-direction: column; gap: 6px; }
 .learning-check--selbstcheck .field-group label { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; }
 /* UI-019: the 44 px touch target of the info symbol in the label must not reach into the field below. */
 .learning-check--selbstcheck .field-group:has(> label .info-popover) { gap: var(--s3); }


 .learning-check--selbstcheck .segment-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
 .learning-check--selbstcheck .segment-chips .chip { position: relative; justify-content: flex-start; gap: 7px; min-width: 0; padding: var(--s2) var(--s4); color: var(--text); font-size: .8rem; font-weight: 600; line-height: 1.28; cursor: pointer; user-select: none; }
 .learning-check--selbstcheck .segment-chips .chip-all { grid-column: 1 / -1; }
 .learning-check--selbstcheck .segment-chips .chip input { display: none; }
 .learning-check--selbstcheck .segment-chips .chip.active { border-color: var(--brand-border); background: var(--brand-page); color: var(--gold-hover); }
 .learning-check--selbstcheck .chip-check { flex-shrink: 0; width: 14px; margin-left: auto; color: transparent; font-size: .72rem; font-weight: 900; text-align: right; }
 /* Paket AH (UI-037): the check mark tells the chosen state (the checkbox itself is hidden), so it is text: it takes the
    gold text of the dark active chip instead of the dark gold of light surfaces (3.73:1 there). */
 .learning-check--selbstcheck .chip.active .chip-check { color: inherit; }
 .learning-check--selbstcheck .segment-chips .icon { flex: 0 0 auto; font-size: .9rem; }
 .learning-check--selbstcheck .segment-chips .label { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
 .learning-check--selbstcheck .helper-text { color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
 .learning-check--selbstcheck .helper-small { font-size: .72rem; }
 .learning-check--selbstcheck .selfcheck-divider { height: 1px; margin: var(--s1) 0; background: var(--border-soft); }
 .learning-check--selbstcheck .btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
 .learning-check--selbstcheck .btn-row--spaced { margin-top: var(--s3); }
 .learning-check--selbstcheck [data-selfcheck-start-wide] { width: 100%; }

 .learning-check--selbstcheck .quiz-view { display: none; }
 .learning-check--selbstcheck .quiz-view.active { display: flex; flex-direction: column; gap: var(--s4); }
 .learning-check--selbstcheck .progress-bar { width: 100%; height: 6px; margin-bottom: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-muted); }
 .learning-check--selbstcheck .progress-bar-fill { width: 0; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold-deep), var(--gold-hover)); box-shadow: 0 0 8px var(--gold-border); transition: width .35s var(--ease-standard); }
 .learning-check--selbstcheck .quiz-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); color: var(--text-muted); font-size: .8rem; font-weight: 600; }
 .learning-check--selbstcheck #quizProgressText { color: var(--text); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
 .learning-check--selbstcheck .quiz-status-label { padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-muted); font-size: .75rem; font-weight: 500; }
 .learning-check--selbstcheck .quiz-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--learning-shell-offset, 88px) + 18px); }
 .learning-check--selbstcheck .quiz-context { position: relative; padding: var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--brand-border); background: var(--brand-page); color: var(--brand-text); line-height: 1.65; }
 .learning-check--selbstcheck .quiz-context-label { display: inline-flex; margin-bottom: var(--s2); color: var(--gold-hover); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
 .learning-check--selbstcheck .quiz-context-body { max-width: 72ch; font-size: .98rem; font-weight: 500; }
 .learning-check--selbstcheck .quiz-question { position: relative; padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--border-soft); background: var(--surface); }
 .learning-check--selbstcheck .quiz-question::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, var(--gold-deep), var(--gold-hover)); }
 .learning-check--selbstcheck .quiz-question-label { margin-bottom: var(--s2); padding-left: 14px; color: var(--accent-text); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
 .learning-check--selbstcheck .quiz-question-text { padding-left: 14px; font-size: 1.15rem; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
 .learning-check--selbstcheck .answer-list { display: flex; flex-direction: column; padding: var(--s3) var(--s4) var(--s4); }
 .learning-check--selbstcheck .answer-option { position: relative; display: flex; align-items: flex-start; gap: var(--s3); width: 100%; min-height: var(--touch-target); padding: var(--s3) var(--s4); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; font-size: .9rem; line-height: 1.5; text-align: left; cursor: pointer; }
 .learning-check--selbstcheck .answer-option + .answer-option { border-top: 1px solid var(--border-soft); }
 .learning-check--selbstcheck .answer-option:hover { background: var(--surface-muted); }
 .learning-check--selbstcheck .answer-option.selected { background: var(--gold-soft); }
 .learning-check--selbstcheck .answer-label { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: .72rem; font-weight: 800; }
 .learning-check--selbstcheck .answer-option.selected .answer-label { border-color: var(--gold); background: var(--gold); color: var(--button-text); }
 .learning-check--selbstcheck .answer-text { flex: 1; padding-top: 2px; }
 .learning-check--selbstcheck .quiz-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--border-soft); background: var(--surface-muted); color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
 .learning-check--selbstcheck .quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

 .learning-check--selbstcheck .result-view { display: none; flex-direction: column; gap: var(--s4); }
 .learning-check--selbstcheck .result-view.active { display: flex; }
 .learning-check--selbstcheck .result-summary-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s5); }
 .learning-check--selbstcheck .result-score-block { position: relative; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; width: 120px; height: 120px; border: 3px solid transparent; border-radius: var(--radius-pill); }
 .learning-check--selbstcheck .result-score-block.ampel-green { border-color: var(--success); background: var(--success-soft); box-shadow: 0 0 0 6px var(--success-soft); }
 .learning-check--selbstcheck .result-score-block.ampel-yellow { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--warning) 10%, transparent); }
 .learning-check--selbstcheck .result-score-block.ampel-red { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 6px var(--danger-soft); }
 .learning-check--selbstcheck .result-main-value { font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
 .learning-check--selbstcheck :is(.result-score-block, .dimension-score).ampel-green :is(.result-main-value), .learning-check--selbstcheck .dimension-score.ampel-green { color: var(--success); }
 .learning-check--selbstcheck :is(.result-score-block).ampel-yellow .result-main-value, .learning-check--selbstcheck .dimension-score.ampel-yellow { color: var(--warning); }
 .learning-check--selbstcheck :is(.result-score-block).ampel-red .result-main-value, .learning-check--selbstcheck .dimension-score.ampel-red { color: var(--danger); }
 .learning-check--selbstcheck .result-score-label { margin-top: 2px; color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
 .learning-check--selbstcheck .ampel-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-pill); }
 .learning-check--selbstcheck .ampel-dot.ampel-green { background: var(--success); }
 .learning-check--selbstcheck .ampel-dot.ampel-yellow { background: var(--warning); }
 .learning-check--selbstcheck .ampel-dot.ampel-red { background: var(--danger); }
 .learning-check--selbstcheck .result-subtext { margin-top: var(--s1); font-size: .84rem; line-height: 1.5; }
 .learning-check--selbstcheck .result-meta { margin-top: var(--s1); color: var(--text-muted); font-size: .78rem; }
 .learning-check--selbstcheck .result-section-title { margin-bottom: var(--s2); color: var(--text-muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
 .learning-check--selbstcheck .result-section-title--spaced { margin-top: var(--s4); }
 .learning-check--selbstcheck #overallInterpretation { padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); font-size: .86rem; line-height: 1.6; }
 .learning-check--selbstcheck .dimension-grid { display: flex; flex-direction: column; gap: var(--s3); }
 .learning-check--selbstcheck .dimension-card { padding: var(--s4); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--surface-muted); }
 .learning-check--selbstcheck .dimension-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
 .learning-check--selbstcheck .dimension-name { font-size: .88rem; font-weight: 700; }
 .learning-check--selbstcheck .dimension-score { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
 .learning-check--selbstcheck .dimension-bar-track { width: 100%; height: 5px; margin-bottom: var(--s2); overflow: hidden; border-radius: var(--radius-pill); background: var(--border); }
 .learning-check--selbstcheck .dimension-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width .6s var(--ease-standard); }
 .learning-check--selbstcheck .dimension-bar-fill.ampel-green { background: var(--success); }
 .learning-check--selbstcheck .dimension-bar-fill.ampel-yellow { background: var(--warning); }
 .learning-check--selbstcheck .dimension-bar-fill.ampel-red { background: var(--danger); }
 .learning-check--selbstcheck .dimension-meta { margin-bottom: var(--s1); color: var(--text-muted); font-size: .75rem; }
 .learning-check--selbstcheck .dimension-interpretation { padding: var(--s2) var(--s3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--surface); font-size: .8rem; line-height: 1.5; }
 .learning-check--selbstcheck .disclaimer { padding-top: 6px; border-top: 1px dashed var(--border); color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
 .learning-check--selbstcheck .result-disclaimer-bottom { margin-top: var(--s2); }
 .learning-check--selbstcheck .result-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
 .learning-check--selbstcheck :is(.last-results-list, #lastResultsSummary) { display: flex; flex-direction: column; gap: var(--s2); }
 .learning-check--selbstcheck .last-result-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--surface-muted); color: inherit; font: inherit; text-align: left; }
 /* r24: delete beside each stored result (Kauf Check history pattern). */
 .learning-check--selbstcheck .last-result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
 .learning-check--selbstcheck .last-result-button { cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
 .learning-check--selbstcheck .last-result-button:hover { border-color: var(--gold-border); background: var(--gold-soft); transform: translateY(-1px); }
 .learning-check--selbstcheck .last-result-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
 .learning-check--selbstcheck .last-result-button.is-current { border-color: var(--gold-border); box-shadow: inset 3px 0 0 var(--gold); }
 .learning-check--selbstcheck .last-result-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
 .learning-check--selbstcheck .last-result-date { font-size: .82rem; font-weight: 600; }
 .learning-check--selbstcheck .last-result-score { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; }
 .learning-check--selbstcheck .last-result-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--text-muted); font-size: .75rem; }
 .learning-check--selbstcheck .last-result-open { color: var(--accent-text); font-weight: 650; white-space: nowrap; }
 .learning-check--selbstcheck .last-results-hint { font-size: .72rem; }
}

@layer layout {
 /* The r337 markup uses the class names card and r4x-grid, which the central layout layer also styles (mobile card
    padding, three-column grid). The r337 card has its own header/body padding and a one/two-column grid. */
 .learning-check--selbstcheck section .card { overflow: hidden; padding: 0; }
 .learning-check--selbstcheck .r4x-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
 @media (min-width: 720px) { .learning-check--selbstcheck .r4x-grid { grid-template-columns: 1.1fr .9fr; } }
 @media (min-width: 760px) {
  .learning-check--grundlagencheck .panel-inner { padding: var(--s5) var(--s6) var(--s6); }
  .learning-check--grundlagencheck .question-title { font-size: 1.22rem; }
  .learning-check--grundlagencheck .answer { padding: var(--s3) var(--s4); }
  .learning-check--grundlagencheck .actions .btn { min-width: 164px; }
  .learning-check--grundlagencheck .result-title { font-size: 1.26rem; }
 }
 @media (min-width: 768px) { .learning-check--selbstcheck .r4x-main { padding: var(--s6) var(--s7) var(--s7); } .learning-check--selbstcheck .r4x-view-tabs { padding-inline: var(--s7); } }
 /* r36 B01: the r337 action bar was position: sticky inside the overflow-hidden panel, so it stuck to the panel and lay
    over the fifth answer in every scroll position. The bar now follows the last answer (UX release 30.09.2026). */
 @media (max-width: 759px) {
  .learning-check--grundlagencheck .actions .btn { flex: 1 1 auto; }
 }
 @media (max-width: 768px) {
  .learning-check--selbstcheck .quiz-context { padding: var(--s4) var(--s4) var(--s4); }
  .learning-check--selbstcheck .quiz-context-body { font-size: .94rem; }
  .learning-check--selbstcheck .quiz-question { padding: var(--s4) var(--s4) var(--s3); }
  .learning-check--selbstcheck :is(.quiz-question-label, .quiz-question-text) { padding-left: 12px; }
  .learning-check--selbstcheck .quiz-question-text { font-size: 1.06rem; }
 }
 @media (max-width: 640px) {
  .learning-check--selbstcheck .quiz-next { display: none; }
  .learning-check--selbstcheck .quiz-footer { flex-direction: row; justify-content: space-between; }
 }
 @media (min-width: 641px) { .learning-check--selbstcheck .quiz-back { display: none; } }
 @media (max-width: 600px) { .learning-check--selbstcheck .result-summary-card { grid-template-columns: minmax(0, 1fr); } }
 @media (max-width: 520px) {
  .learning-check--selbstcheck .segment-chips .chip:not(.chip-all) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 5px; min-height: 72px; padding: var(--s3) var(--s2) var(--s2); text-align: center; }
  .learning-check--selbstcheck .segment-chips .chip:not(.chip-all) .label { width: 100%; font-size: .75rem; font-weight: 700; line-height: 1.24; text-align: center; overflow-wrap: break-word; hyphens: auto; }
  .learning-check--selbstcheck .segment-chips .chip:not(.chip-all) .chip-check { position: absolute; top: var(--s2); right: 10px; width: auto; margin-left: 0; line-height: 1; }
  .learning-check--selbstcheck .last-result-meta { flex-direction: column; align-items: flex-start; gap: 3px; }
 }
 @media (max-width: 340px) { .learning-check--selbstcheck .segment-chips { grid-template-columns: minmax(0, 1fr); } .learning-check--selbstcheck .segment-chips .chip:not(.chip-all) { min-height: 58px; } }
}