/* ============================================================================
   Quiz Academy – Komponenten (auf design-tokens.css aufbauend)
   Premium, minimalistisch, Mobile-First, WCAG 2.2 AA.
   ========================================================================== */

.qa-app{
	font-family:var(--qa-font-sans);
	color:var(--qa-ink-600);
	line-height:var(--qa-leading-normal);
	font-size:var(--qa-text-base);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	max-width:var(--qa-container-max);
	margin:var(--qa-space-8) auto;
	padding:0 var(--qa-space-4);
}
.qa-app *{box-sizing:border-box}
.qa-app svg{vertical-align:-0.125em}
.qa-app :focus-visible{outline:2px solid var(--qa-accent-ink);outline-offset:2px;box-shadow:var(--qa-ring);border-radius:var(--qa-radius-sm)} /* deutlich sichtbar, auch im Kontrastmodus (outline bleibt dort erhalten) */

.qa-app h1,.qa-app h2,.qa-app h3,.qa-app h4{
	color:var(--qa-ink-900);
	line-height:var(--qa-leading-tight);
	letter-spacing:var(--qa-tracking-tight);
	font-weight:var(--qa-weight-semibold);
	margin:0;
}

/* ---- Eyebrow / Titel ---- */
.qa-eyebrow{
	display:inline-block;
	font-size:var(--qa-text-2xs);
	font-weight:var(--qa-weight-semibold);
	letter-spacing:var(--qa-tracking-over);
	text-transform:uppercase;
	color:var(--qa-accent-ink);
	margin-bottom:var(--qa-space-2);
}
.qa-h1{font-size:var(--qa-text-h1);margin-bottom:var(--qa-space-2)}
.qa-lede{color:var(--qa-ink-500);max-width:60ch;margin:0 0 var(--qa-space-6);font-size:var(--qa-text-lg)}

/* ============================ Kopfzeile + Dark-Mode-Schalter ============================ */
.qa-app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--qa-space-3);margin-bottom:var(--qa-space-2)}
.qa-theme-toggle{
	appearance:none;cursor:pointer;flex:none;
	display:inline-grid;place-items:center;width:40px;height:40px;
	border-radius:var(--qa-radius-pill);border:1px solid var(--qa-line);
	background:var(--qa-surface);color:var(--qa-ink-500);
	transition:transform var(--qa-dur-fast) var(--qa-ease),
		box-shadow var(--qa-dur-base) var(--qa-ease),
		border-color var(--qa-dur-base) var(--qa-ease),
		color var(--qa-dur-base) var(--qa-ease);
	position:relative;overflow:hidden;
}
.qa-theme-toggle svg{width:20px;height:20px;display:block}
.qa-theme-toggle:hover{border-color:var(--qa-accent-border);color:var(--qa-accent-ink);transform:translateY(-1px);box-shadow:var(--qa-shadow-sm)}
.qa-theme-toggle:active{transform:translateY(0) scale(.95)}

/* ============================ Buttons ============================ */
.qa-btn{
	appearance:none;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;gap:var(--qa-space-2);
	min-height:44px;                 /* WCAG 2.2 Zielgröße */
	padding:0 var(--qa-space-5);
	border:1px solid var(--qa-line-strong);
	background:var(--qa-surface);
	color:var(--qa-ink-700);
	font:inherit;font-weight:var(--qa-weight-semibold);font-size:var(--qa-text-sm);
	border-radius:var(--qa-radius-sm);
	transition:transform var(--qa-dur-fast) var(--qa-ease),
		box-shadow var(--qa-dur-base) var(--qa-ease),
		background var(--qa-dur-base) var(--qa-ease),
		border-color var(--qa-dur-base) var(--qa-ease);
	position:relative;overflow:hidden;
}
.qa-btn:hover{border-color:var(--qa-accent-border);box-shadow:var(--qa-shadow-sm);transform:translateY(-1px)}
.qa-btn:active{transform:translateY(0) scale(.985)}
.qa-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.qa-btn-primary{
	background:var(--qa-grad-accent);
	border-color:transparent;color:var(--qa-accent-contrast);
	box-shadow:var(--qa-shadow-accent);
}
.qa-btn-primary:hover{filter:brightness(1.04);box-shadow:var(--qa-shadow-accent);transform:translateY(-1px)}
.qa-btn-ghost{background:transparent;border-color:transparent;color:var(--qa-ink-500)}
.qa-btn-ghost:hover{background:var(--qa-surface-2);border-color:transparent;box-shadow:none}
.qa-btn-block{width:100%}

/* Ripple */
.qa-ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
	background:currentColor;opacity:.18;animation:qa-ripple var(--qa-dur-slower) var(--qa-ease)}
@keyframes qa-ripple{to{transform:scale(2.4);opacity:0}}

/* ============================ Cards ============================ */
.qa-card{
	background:var(--qa-surface);
	border:1px solid var(--qa-line);
	border-radius:var(--qa-radius-lg);
	padding:var(--qa-space-6);
	box-shadow:var(--qa-shadow-sm);
}
.qa-card-hover{transition:transform var(--qa-dur-base) var(--qa-ease),box-shadow var(--qa-dur-base) var(--qa-ease),border-color var(--qa-dur-base) var(--qa-ease);cursor:pointer}
.qa-card-hover:hover{transform:translateY(-3px);box-shadow:var(--qa-shadow-md);border-color:var(--qa-accent-border)}
.qa-card-title{font-size:var(--qa-text-h4);margin:0 0 var(--qa-space-1)}
.qa-card-meta{color:var(--qa-ink-500);font-size:var(--qa-text-sm);margin:0 0 var(--qa-space-5)}
.qa-grid{display:grid;gap:var(--qa-space-4)}
@media(min-width:640px){.qa-grid-2{grid-template-columns:repeat(2,1fr)}}

/* ============================ Chips & Badges ============================ */
.qa-chip{
	display:inline-flex;align-items:center;gap:var(--qa-space-2);
	min-height:36px;padding:0 var(--qa-space-4);
	border-radius:var(--qa-radius-pill);
	background:var(--qa-surface-2);border:1px solid var(--qa-line);
	color:var(--qa-ink-600);font-size:var(--qa-text-sm);font-weight:var(--qa-weight-medium);
	cursor:pointer;transition:all var(--qa-dur-base) var(--qa-ease);white-space:nowrap;
}
.qa-chip:hover{border-color:var(--qa-accent-border);color:var(--qa-ink-900)}
.qa-chip[aria-pressed="true"],.qa-chip.active{
	background:var(--qa-accent-weak);border-color:var(--qa-accent-border);color:var(--qa-accent-ink);
}
.qa-badge{
	display:inline-flex;align-items:center;gap:6px;
	padding:3px 10px;border-radius:var(--qa-radius-pill);
	font-size:var(--qa-text-2xs);font-weight:var(--qa-weight-semibold);
	background:var(--qa-accent-weak);color:var(--qa-accent-ink);
	letter-spacing:var(--qa-tracking-wide);
}
.qa-badge-success{background:var(--qa-success-bg);color:var(--qa-success-ink)}
.qa-badge-warning{background:var(--qa-warning-bg);color:var(--qa-warning-ink)}
.qa-badge-error{background:var(--qa-error-bg);color:var(--qa-error-ink)}

/* ============================ Progress ============================ */
.qa-progress{height:8px;border-radius:var(--qa-radius-pill);background:var(--qa-surface-3);overflow:hidden}
.qa-progress > i{
	display:block;height:100%;border-radius:inherit;
	background:var(--qa-grad-accent);
	width:0;transition:width var(--qa-dur-slow) var(--qa-ease);
}
.qa-progress-meta{
	display:flex;justify-content:space-between;align-items:center;
	font-size:var(--qa-text-xs);color:var(--qa-ink-500);
	font-variant-numeric:tabular-nums;margin-bottom:var(--qa-space-2);
}
/* Segmentierte Schrittanzeige (Frage x von y) */
.qa-steps{display:flex;gap:6px}
.qa-steps > span{flex:1;height:6px;border-radius:var(--qa-radius-pill);background:var(--qa-surface-3);transition:background var(--qa-dur-base) var(--qa-ease)}
.qa-steps > span.done{background:var(--qa-accent)}
.qa-steps > span.current{background:var(--qa-accent-border)}

/* ============================ Tabs ============================ */
.qa-tabs{
	display:flex;gap:var(--qa-space-1);
	padding:var(--qa-space-1);
	background:var(--qa-surface-2);border:1px solid var(--qa-line);
	border-radius:var(--qa-radius-md);
	margin-bottom:var(--qa-space-6);overflow-x:auto;scrollbar-width:none;
}
.qa-tabs::-webkit-scrollbar{display:none}
.qa-tab{
	appearance:none;cursor:pointer;border:none;background:transparent;
	flex:1;min-width:max-content;min-height:40px;padding:0 var(--qa-space-4);
	border-radius:var(--qa-radius-sm);
	font:inherit;font-size:var(--qa-text-sm);font-weight:var(--qa-weight-medium);
	color:var(--qa-ink-500);white-space:nowrap;
	transition:color var(--qa-dur-base) var(--qa-ease),background var(--qa-dur-base) var(--qa-ease);
}
.qa-tab:hover{color:var(--qa-ink-900)}
.qa-tab.active{background:var(--qa-surface);color:var(--qa-accent-ink);box-shadow:var(--qa-shadow-xs);font-weight:var(--qa-weight-semibold)}
.qa-panel{display:none;animation:qa-fade var(--qa-dur-slow) var(--qa-ease)}
.qa-panel.active{display:block}
@keyframes qa-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================ Suche, Filter & Sortierung ============================ */
.qa-toolbar{display:flex;gap:var(--qa-space-3);flex-wrap:wrap;margin-bottom:var(--qa-space-4)}
.qa-search{position:relative;flex:1;min-width:180px}
.qa-search-icon{position:absolute;left:var(--qa-space-3);top:50%;transform:translateY(-50%);color:var(--qa-ink-400);display:grid;pointer-events:none}
.qa-search-icon svg{width:18px;height:18px;display:block}
.qa-search-input{
	width:100%;min-height:40px;
	padding:0 var(--qa-space-3) 0 calc(var(--qa-space-3)*2 + 18px);
	border-radius:var(--qa-radius-sm);border:1px solid var(--qa-line-strong);
	background:var(--qa-surface);color:var(--qa-ink-700);
	font:inherit;font-size:var(--qa-text-sm);appearance:none;-webkit-appearance:none;
	transition:border-color var(--qa-dur-base) var(--qa-ease),box-shadow var(--qa-dur-base) var(--qa-ease);
}
.qa-search-input::placeholder{color:var(--qa-ink-500)}
.qa-search-input:focus-visible,.qa-search-input:focus{outline:none;border-color:var(--qa-accent);box-shadow:var(--qa-ring)}
.qa-search-input::-webkit-search-cancel-button{cursor:pointer}
.qa-select{
	appearance:none;-webkit-appearance:none;cursor:pointer;
	min-height:40px;padding:0 2.25rem 0 var(--qa-space-4);
	border-radius:var(--qa-radius-sm);border:1px solid var(--qa-line-strong);
	background-color:var(--qa-surface);color:var(--qa-ink-700);
	font:inherit;font-size:var(--qa-text-sm);font-weight:var(--qa-weight-medium);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a0ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
	transition:border-color var(--qa-dur-base) var(--qa-ease),box-shadow var(--qa-dur-base) var(--qa-ease);
}
.qa-select:hover{border-color:var(--qa-accent-border)}
.qa-select:focus-visible{outline:none;box-shadow:var(--qa-ring);border-color:var(--qa-accent)}
.qa-grid-item{min-width:0}
.qa-no-results{text-align:center;color:var(--qa-ink-500);font-size:var(--qa-text-sm);padding:var(--qa-space-6) 0}

/* ============================ QUIZ ============================ */
.qa-stage{
	background:var(--qa-surface);border:1px solid var(--qa-line);
	border-radius:var(--qa-radius-xl);padding:var(--qa-space-6);
	box-shadow:var(--qa-shadow-md);
}
@media(min-width:640px){.qa-stage{padding:var(--qa-space-8)}}
.qa-q-top{
	display:flex;justify-content:space-between;align-items:center;
	font-size:var(--qa-text-sm);color:var(--qa-ink-500);
	font-variant-numeric:tabular-nums;margin-bottom:var(--qa-space-3);
}
.qa-q-top b{color:var(--qa-ink-900);font-weight:var(--qa-weight-semibold)}
.qa-q-text{
	font-size:var(--qa-text-h3);line-height:var(--qa-leading-snug);
	color:var(--qa-ink-900);font-weight:var(--qa-weight-semibold);
	margin:var(--qa-space-6) 0;letter-spacing:var(--qa-tracking-tight);
}
.qa-opts{display:flex;flex-direction:column;gap:var(--qa-space-3)}
.qa-opt{
	display:flex;align-items:center;gap:var(--qa-space-3);
	width:100%;text-align:left;min-height:56px;
	padding:var(--qa-space-4);
	background:var(--qa-surface);border:1.5px solid var(--qa-line);
	border-radius:var(--qa-radius-md);
	color:var(--qa-ink-700);font:inherit;font-size:var(--qa-text-base);
	font-weight:var(--qa-weight-medium);cursor:pointer;position:relative;overflow:hidden;
	transition:border-color var(--qa-dur-base) var(--qa-ease),
		background var(--qa-dur-base) var(--qa-ease),
		transform var(--qa-dur-fast) var(--qa-ease),
		box-shadow var(--qa-dur-base) var(--qa-ease);
}
.qa-opt:hover:not(:disabled){border-color:var(--qa-accent-border);background:var(--qa-accent-weak);transform:translateY(-1px);box-shadow:var(--qa-shadow-sm)}
.qa-opt:active:not(:disabled){transform:scale(.99)}
.qa-opt:disabled{cursor:default}
.qa-key{
	flex:none;display:grid;place-items:center;width:28px;height:28px;
	border-radius:9px;background:var(--qa-surface-2);border:1px solid var(--qa-line);
	font-size:var(--qa-text-xs);font-weight:var(--qa-weight-bold);color:var(--qa-ink-500);
	transition:all var(--qa-dur-base) var(--qa-ease);
}
.qa-opt-mark{margin-left:auto;flex:none;opacity:0;transform:scale(.6);transition:all var(--qa-dur-slow) var(--qa-ease-spring);font-weight:var(--qa-weight-bold)}
.qa-opt.correct{border-color:var(--qa-success);background:var(--qa-success-bg)}
.qa-opt.correct .qa-key{background:var(--qa-success);color:#fff;border-color:var(--qa-success)}
.qa-opt.correct .qa-opt-mark{opacity:1;transform:scale(1);color:var(--qa-success)}
.qa-opt.wrong{border-color:var(--qa-error);background:var(--qa-error-bg)}
.qa-opt.wrong .qa-key{background:var(--qa-error);color:#fff;border-color:var(--qa-error)}
.qa-opt.wrong .qa-opt-mark{opacity:1;transform:scale(1);color:var(--qa-error)}

.qa-after{margin-top:var(--qa-space-5);animation:qa-slide-up var(--qa-dur-slow) var(--qa-ease)}
@keyframes qa-slide-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qa-explain{
	border-radius:var(--qa-radius-md);padding:var(--qa-space-4) var(--qa-space-5);
	margin-bottom:var(--qa-space-5);font-size:var(--qa-text-sm);
	background:var(--qa-surface-2);border:1px solid var(--qa-line);
	border-left:3px solid var(--qa-accent);
}
.qa-explain.ok{border-left-color:var(--qa-success);background:var(--qa-success-bg)}
.qa-explain.no{border-left-color:var(--qa-error);background:var(--qa-error-bg)}
.qa-lbl{display:flex;align-items:center;gap:6px;font-weight:var(--qa-weight-bold);color:var(--qa-ink-900);margin-bottom:var(--qa-space-1)}

/* Start / Ergebnis */
.qa-start{text-align:center;background:var(--qa-grad-hero);border:1px solid var(--qa-line)}
.qa-result{text-align:center;padding:var(--qa-space-10) var(--qa-space-6)}
.qa-ring{
	--_p:0;
	width:132px;height:132px;margin:0 auto var(--qa-space-5);border-radius:50%;
	display:grid;place-items:center;position:relative;
	background:conic-gradient(var(--qa-accent) calc(var(--_p)*1%),var(--qa-surface-3) 0);
	transition:background var(--qa-dur-slower) var(--qa-ease);
}
.qa-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--qa-surface)}
.qa-ring.pass{--qa-accent:var(--qa-success)}
.qa-ring.fail{--qa-accent:var(--qa-error)}
.qa-ring span{position:relative;font-size:var(--qa-text-h1);font-weight:var(--qa-weight-bold);color:var(--qa-ink-900);font-variant-numeric:tabular-nums}
.qa-verdict{font-size:var(--qa-text-h4);font-weight:var(--qa-weight-semibold);color:var(--qa-ink-900);margin:0 0 var(--qa-space-1)}
.qa-sub{color:var(--qa-ink-500);margin:0 0 var(--qa-space-6)}
.qa-actions{display:flex;gap:var(--qa-space-3);justify-content:center;flex-wrap:wrap}

/* ============================ KARTEIKARTEN ============================ */
.qa-deck-stage{text-align:center}
.qa-deck-head{display:flex;align-items:center;justify-content:space-between;gap:var(--qa-space-3);margin-bottom:var(--qa-space-4)}
.qa-deck-count{font-size:var(--qa-text-sm);color:var(--qa-ink-500);font-variant-numeric:tabular-nums}
.qa-streak{display:inline-flex;align-items:center;gap:6px;font-size:var(--qa-text-sm);font-weight:var(--qa-weight-semibold);color:var(--qa-warning-ink);background:var(--qa-warning-bg);padding:4px 12px;border-radius:var(--qa-radius-pill)}

.qa-flashcard{perspective:1600px;height:280px;margin-bottom:var(--qa-space-5);cursor:pointer;touch-action:pan-y}
.qa-fc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
	transition:transform var(--qa-dur-slower) var(--qa-ease-inout);will-change:transform}
.qa-flashcard.flipped .qa-fc-inner{transform:rotateY(180deg)}
.qa-flashcard.swipe-left .qa-fc-inner{transform:translateX(-120%) rotate(-8deg);opacity:0;transition:all var(--qa-dur-slow) var(--qa-ease)}
.qa-flashcard.swipe-right .qa-fc-inner{transform:translateX(120%) rotate(8deg);opacity:0;transition:all var(--qa-dur-slow) var(--qa-ease)}
.qa-fc-face{
	position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qa-space-3);
	padding:var(--qa-space-8);text-align:center;
	background:var(--qa-surface);border:1px solid var(--qa-line);
	border-radius:var(--qa-radius-xl);box-shadow:var(--qa-shadow-md);
}
.qa-fc-front{background:var(--qa-grad-hero)}
.qa-fc-back{transform:rotateY(180deg)}
.qa-fc-label{font-size:var(--qa-text-2xs);font-weight:var(--qa-weight-semibold);letter-spacing:var(--qa-tracking-over);text-transform:uppercase;color:var(--qa-accent-ink)}
.qa-fc-term{font-size:var(--qa-text-h2);font-weight:var(--qa-weight-bold);color:var(--qa-ink-900);line-height:var(--qa-leading-tight)}
.qa-fc-def{font-size:var(--qa-text-lg);color:var(--qa-ink-700);line-height:var(--qa-leading-snug)}
.qa-fc-hint{position:absolute;bottom:var(--qa-space-4);font-size:var(--qa-text-2xs);color:var(--qa-ink-500)}

/* Schwierigkeits-Buttons (Spaced Repetition) */
.qa-difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--qa-space-3)}
.qa-diff{
	appearance:none;cursor:pointer;min-height:52px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	border-radius:var(--qa-radius-md);border:1.5px solid var(--qa-line);
	background:var(--qa-surface);font:inherit;font-weight:var(--qa-weight-semibold);font-size:var(--qa-text-sm);
	color:var(--qa-ink-700);transition:all var(--qa-dur-base) var(--qa-ease);
}
.qa-diff small{font-weight:var(--qa-weight-normal);font-size:var(--qa-text-2xs);color:var(--qa-ink-500)}
.qa-diff:hover{transform:translateY(-2px);box-shadow:var(--qa-shadow-sm)}
.qa-diff-easy:hover,.qa-diff-easy:focus-visible{border-color:var(--qa-success);color:var(--qa-success-ink)}
.qa-diff-med:hover,.qa-diff-med:focus-visible{border-color:var(--qa-warning);color:var(--qa-warning-ink)}
.qa-diff-hard:hover,.qa-diff-hard:focus-visible{border-color:var(--qa-error);color:var(--qa-error-ink)}
.qa-swipe-hint{margin-top:var(--qa-space-3);font-size:var(--qa-text-2xs);color:var(--qa-ink-500);text-align:center}
@media(min-width:640px){.qa-swipe-hint{display:none}}

/* Statistik-Metriken */
.qa-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--qa-space-3);margin-top:var(--qa-space-6)}
.qa-metric{background:var(--qa-surface-2);border-radius:var(--qa-radius-md);padding:var(--qa-space-4);text-align:center}
.qa-metric-n{display:block;font-size:var(--qa-text-h3);font-weight:var(--qa-weight-bold);color:var(--qa-ink-900);font-variant-numeric:tabular-nums}
.qa-metric-l{display:block;font-size:var(--qa-text-2xs);color:var(--qa-ink-500);text-transform:uppercase;letter-spacing:var(--qa-tracking-wide);margin-top:2px}

/* ============================ LEKTIONEN ============================ */
.qa-read-progress{position:sticky;top:0;z-index:var(--qa-z-sticky);height:3px;background:transparent;margin-bottom:var(--qa-space-4)}
.qa-read-progress > i{display:block;height:100%;width:0;background:var(--qa-grad-accent);border-radius:var(--qa-radius-pill);transition:width 80ms linear}
/* Kapitelübersicht: kompaktes Dropdown statt umbrechender Pill-Reihe */
.qa-lesson-nav{
	position:sticky;top:6px;z-index:var(--qa-z-sticky);
	padding:var(--qa-space-2) var(--qa-space-3);margin-bottom:var(--qa-space-6);
	background:var(--qa-glass-bg);-webkit-backdrop-filter:blur(var(--qa-glass-blur)) saturate(1.4);
	backdrop-filter:blur(var(--qa-glass-blur)) saturate(1.4);
	border:1px solid var(--qa-glass-border);border-radius:var(--qa-radius-lg);box-shadow:var(--qa-shadow-sm);
}
.qa-lesson-nav{transition:opacity var(--qa-dur-fast,.2s) ease,visibility 0s}
.qa-lesson-nav.qa-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--qa-dur-fast,.2s) ease,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.qa-lesson-nav,.qa-lesson-nav.qa-away{transition:none}}
.qa-lesson-select{
	width:100%;border-color:transparent;background-color:transparent;
	color:var(--qa-ink-700);font-weight:var(--qa-weight-semibold);
}
.qa-lesson-select:hover{border-color:var(--qa-accent-border)}

.qa-lesson-body{display:none;animation:qa-fade var(--qa-dur-slow) var(--qa-ease)}
.qa-lesson-body.active{display:block}
.qa-lesson-hero{width:100%;border-radius:var(--qa-radius-lg);margin-bottom:var(--qa-space-6);box-shadow:var(--qa-shadow-sm);object-fit:cover;max-height:320px}
.qa-lesson-body h3{font-size:var(--qa-text-h2);margin:0 0 var(--qa-space-4)}
.qa-lesson-body h2{font-size:var(--qa-text-h3);margin:var(--qa-space-8) 0 var(--qa-space-3)}
.qa-lesson-body h4{font-size:var(--qa-text-h4);color:var(--qa-accent-ink);margin:var(--qa-space-6) 0 var(--qa-space-2)}
.qa-lesson-body p{margin:0 0 var(--qa-space-4);color:var(--qa-ink-600)}
.qa-lesson-body ul,.qa-lesson-body ol{margin:0 0 var(--qa-space-4);padding-left:var(--qa-space-6)}
.qa-lesson-body li{margin:var(--qa-space-1) 0}
.qa-lesson-body a{color:var(--qa-accent-ink);text-underline-offset:2px}
.qa-lesson-body code{font-family:var(--qa-font-mono);font-size:.9em;background:var(--qa-surface-3);padding:2px 6px;border-radius:8px;color:var(--qa-accent-ink)}
.qa-lesson-body pre{
	background:#0d1117;color:#e6edf3;border-radius:var(--qa-radius-md);
	padding:var(--qa-space-4) var(--qa-space-5);overflow-x:auto;font-family:var(--qa-font-mono);
	font-size:var(--qa-text-sm);line-height:1.7;margin:0 0 var(--qa-space-4);border:1px solid #1b2230;
}
.qa-lesson-body pre code{background:none;padding:0;color:inherit}

/* Callout-Boxen (.qa-callout / .qa-tip / .qa-note / .qa-warn, auch <blockquote>) */
.qa-callout,.qa-lesson-body blockquote{
	display:flex;gap:var(--qa-space-3);
	background:var(--qa-accent-weak);border:1px solid var(--qa-accent-border);
	border-radius:var(--qa-radius-md);padding:var(--qa-space-4) var(--qa-space-5);
	margin:0 0 var(--qa-space-4);color:var(--qa-ink-700);font-size:var(--qa-text-sm);
}
/* Icon als eingebettetes SVG (kein externer Request) statt Zeichen-Fallback:
   die farbige Kreisfläche kommt aus background-color, das weiße Glyph aus
   background-image – so bleibt die Akzent-/Semantikfarbe pro Variante frei. */
.qa-callout::before,.qa-lesson-body blockquote::before{
	content:"";flex:none;width:24px;height:24px;border-radius:50%;
	background-color:var(--qa-accent);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='7' x2='12.01' y2='7'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}
.qa-tip{background:var(--qa-success-bg);border-color:color-mix(in srgb,var(--qa-success) 30%,transparent)}
.qa-tip::before{
	background-color:var(--qa-success);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.qa-note{background:var(--qa-accent-weak);border-color:var(--qa-accent-border)}
.qa-warn{background:var(--qa-warning-bg);border-color:color-mix(in srgb,var(--qa-warning) 30%,transparent)}
.qa-warn::before{
	background-color:var(--qa-warning);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ============================ Toasts ============================ */
.qa-toasts.qa-app{margin:0;padding:0;max-width:none} /* trägt qa-app nur für die Design-Tokens */
.qa-toasts{position:fixed;left:50%;bottom:var(--qa-space-6);transform:translateX(-50%);
	display:flex;flex-direction:column;gap:var(--qa-space-2);z-index:var(--qa-z-toast);pointer-events:none;width:min(92vw,420px)}
.qa-toast{
	display:flex;align-items:center;gap:var(--qa-space-3);
	background:var(--qa-glass-bg);-webkit-backdrop-filter:blur(var(--qa-glass-blur)) saturate(1.4);
	backdrop-filter:blur(var(--qa-glass-blur)) saturate(1.4);
	border:1px solid var(--qa-glass-border);border-radius:var(--qa-radius-md);
	padding:var(--qa-space-3) var(--qa-space-4);box-shadow:var(--qa-shadow-lg);
	color:var(--qa-ink-900);font-size:var(--qa-text-sm);font-weight:var(--qa-weight-medium);
	animation:qa-toast-in var(--qa-dur-slow) var(--qa-ease-spring);
}
@keyframes qa-toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ============================ Skeleton / Empty / State ============================ */
.qa-skeleton{background:linear-gradient(90deg,var(--qa-surface-3) 25%,var(--qa-surface-2) 50%,var(--qa-surface-3) 75%);
	background-size:200% 100%;border-radius:var(--qa-radius-sm);animation:qa-shimmer 1.4s infinite}
@keyframes qa-shimmer{to{background-position:-200% 0}}
.qa-empty,.qa-state{text-align:center;padding:var(--qa-space-12) var(--qa-space-6);color:var(--qa-ink-500)}
.qa-state-icon{width:64px;height:64px;margin:0 auto var(--qa-space-4);border-radius:var(--qa-radius-lg);
	display:grid;place-items:center;font-size:28px;background:var(--qa-accent-weak);color:var(--qa-accent-ink)}
.qa-state-title{font-size:var(--qa-text-h4);color:var(--qa-ink-900);margin:0 0 var(--qa-space-1)}

/* ============================ FAB ============================ */
.qa-fab{
	position:sticky;bottom:var(--qa-space-6);margin-left:auto;
	display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--qa-radius-lg);
	background:var(--qa-grad-accent);color:#fff;border:none;cursor:pointer;
	box-shadow:var(--qa-shadow-lg);z-index:var(--qa-z-fab);
	transition:transform var(--qa-dur-base) var(--qa-ease-spring)}
.qa-fab:hover{transform:scale(1.06)}
.qa-fab:active{transform:scale(.96)}

/* Konfetti-Canvas */
.qa-confetti{position:fixed;inset:0;pointer-events:none;z-index:var(--qa-z-toast)}

/* Innerhalb des Academy-Grids: einzelne Apps ohne doppelten Außenabstand */
.qa-grid .qa-app{margin:0;max-width:none;padding:0}

/* ---- Barrierefreiheit ---- */
.qa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.qa-flashcard[role=button]{cursor:pointer}
@media (forced-colors:active){.qa-app :focus-visible{outline:2px solid Highlight}.qa-opt.correct,.qa-opt.wrong{border:2px solid ButtonText}}

/* Zugang für Mitglieder: Hinweis statt Inhalt */
.qa-gate{display:flex;gap:var(--qa-space-3,.75rem);align-items:flex-start;padding:var(--qa-space-4,1rem) var(--qa-space-5,1.25rem);border:1px solid var(--qa-line,#d7dae5);border-left:4px solid var(--qa-accent,#4a4fd6);border-radius:var(--qa-radius-md,.75rem);background:var(--qa-surface-2,transparent);color:var(--qa-ink-700,inherit)}
.qa-gate svg{flex:none;margin-top:.15rem;color:var(--qa-accent,#4a4fd6)}
.qa-gate p{margin:.2rem 0 0}
.qa-gate-note{margin:var(--qa-space-3,.75rem) 0;font-size:.9rem;color:var(--qa-ink-500,#6b7280)}