/*!
 * TSB Quiz – Frontend-Styles
 * Alle Regeln sind auf .tsbq / .tsbq-* begrenzt (keine globalen Styles).
 * Designs: .tsbq-design-theme (Default) · .tsbq-design-tsb · .tsbq-design-kahoot
 */

/* ==================================================================== *
 * 1. Tokens
 * ==================================================================== */
.tsbq {
	--tsbq-primary: var(--e-global-color-primary, var(--wp--preset--color--primary, #003C73));
	--tsbq-accent: var(--e-global-color-accent, var(--wp--preset--color--secondary, #E2001A));

	--tsbq-text: #22303F;
	--tsbq-muted: #5A6878;
	--tsbq-heading: var(--tsbq-text);
	--tsbq-line: rgba(34, 48, 63, .12);

	--tsbq-stage-bg: #F4F7FA;
	--tsbq-stage-fg: var(--tsbq-text);
	--tsbq-stage-muted: var(--tsbq-muted);
	--tsbq-stage-radius: 24px;
	--tsbq-stage-pad: clamp(12px, 3.2vw, 32px);

	--tsbq-card-bg: #FFFFFF;
	--tsbq-card-fg: var(--tsbq-text);
	--tsbq-card-border: rgba(34, 48, 63, .06);
	--tsbq-card-shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 12px 32px -8px rgba(16, 32, 56, .16);
	--tsbq-card-pad: clamp(14px, 2.6vw, 24px);
	--tsbq-radius: 20px;
	--tsbq-tile-radius: 14px;

	--tsbq-media-bg: #F4F7FA;
	--tsbq-pill-bg: #FFFFFF;
	--tsbq-pill-fg: var(--tsbq-text);
	--tsbq-pill-shadow: 0 6px 18px -6px rgba(16, 32, 56, .25), 0 0 0 1px rgba(34, 48, 63, .06);

	--tsbq-a1: #C8414B;
	--tsbq-a2: #2F62A8;
	--tsbq-a3: #E3B23C;
	--tsbq-a4: #3A8A5D;
	--tsbq-a-fg: #FFFFFF;
	--tsbq-a3-fg: #2B2410;

	--tsbq-ok: #1F9D57;
	--tsbq-ok-fg: #FFFFFF;
	--tsbq-bad: #D23744;
	--tsbq-bad-fg: #FFFFFF;
	--tsbq-timeup: #B4561C;
	--tsbq-warn: #D23744;

	--tsbq-btn-bg: var(--tsbq-primary);
	--tsbq-btn-fg: #FFFFFF;
	--tsbq-btn-hover: color-mix(in srgb, var(--tsbq-btn-bg) 86%, #000);
	--tsbq-ghost-fg: var(--tsbq-primary);
	--tsbq-ghost-border: color-mix(in srgb, var(--tsbq-primary) 30%, transparent);

	--tsbq-progress-track: rgba(34, 48, 63, .1);
	--tsbq-progress-fill: var(--tsbq-accent);
	--tsbq-ring: var(--tsbq-primary);
	--tsbq-eyebrow: var(--tsbq-accent);
	--tsbq-chip-bg: rgba(34, 48, 63, .06);
	--tsbq-chip-fg: var(--tsbq-text);
	--tsbq-row-bg: #F4F7FA;
	--tsbq-me-bg: color-mix(in srgb, var(--tsbq-primary) 10%, #fff);
	--tsbq-me-border: var(--tsbq-primary);
	--tsbq-focus: var(--tsbq-accent);

	--tsbq-gold: linear-gradient(145deg, #FFE08A 0%, #F2B600 55%, #C88F00 100%);
	--tsbq-silver: linear-gradient(145deg, #F4F6F8 0%, #BCC5CF 55%, #8E99A6 100%);
	--tsbq-bronze: linear-gradient(145deg, #F6C9A0 0%, #CD7F32 55%, #9B5A1E 100%);

	--tsbq-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Design: Theme (Default) ---------- */
.tsbq.tsbq-design-theme {
	--tsbq-stage-bg: linear-gradient(160deg, color-mix(in srgb, var(--tsbq-primary) 10%, #fff) 0%, color-mix(in srgb, var(--tsbq-primary) 3%, #fff) 70%);
	--tsbq-media-bg: color-mix(in srgb, var(--tsbq-primary) 4%, #F7F9FB);
	--tsbq-me-bg: color-mix(in srgb, var(--tsbq-primary) 9%, #fff);
}

/* ---------- Design: TSB Flensburg ---------- */
.tsbq.tsbq-design-tsb {
	--tsbq-primary: #003C73;
	--tsbq-accent: #E2001A;
	--tsbq-heading: #003C73;
	--tsbq-stage-bg:
		radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(70% 60% at 0% 100%, rgba(226, 0, 26, .16) 0%, rgba(226, 0, 26, 0) 60%),
		linear-gradient(160deg, #0A4C8A 0%, #003C73 48%, #002A52 100%);
	--tsbq-stage-fg: #FFFFFF;
	--tsbq-stage-muted: rgba(255, 255, 255, .72);
	--tsbq-card-shadow: 0 2px 4px rgba(0, 20, 45, .2), 0 24px 48px -16px rgba(0, 12, 30, .55);
	--tsbq-media-bg: #F4F7FA;
	--tsbq-pill-bg: #FFFFFF;
	--tsbq-pill-fg: #003C73;
	--tsbq-a1: #E2001A;
	--tsbq-a2: #003C73;
	--tsbq-a3: #F2B600;
	--tsbq-a4: #0E8A4F;
	--tsbq-a3-fg: #10243B;
	--tsbq-ok: #0E9550;
	--tsbq-bad: #E2001A;
	--tsbq-timeup: #C0461A;
	--tsbq-warn: #E2001A;
	--tsbq-btn-bg: #E2001A;
	--tsbq-btn-hover: #C10016;
	--tsbq-ghost-fg: #003C73;
	--tsbq-ghost-border: rgba(0, 60, 115, .28);
	--tsbq-progress-track: rgba(255, 255, 255, .18);
	--tsbq-progress-fill: #E2001A;
	--tsbq-ring: #003C73;
	--tsbq-eyebrow: #E2001A;
	--tsbq-chip-bg: #F4F7FA;
	--tsbq-chip-fg: #003C73;
	--tsbq-me-bg: #EAF1F8;
	--tsbq-me-border: #E2001A;
	--tsbq-focus: #E2001A;
}

/* ---------- Design: Kahoot ---------- */
.tsbq.tsbq-design-kahoot {
	--tsbq-primary: #46178F;
	--tsbq-accent: #FF3355;
	--tsbq-heading: #FFFFFF;
	--tsbq-stage-bg:
		linear-gradient(115deg, rgba(255, 255, 255, 0) 0 38%, rgba(255, 255, 255, .06) 38% 62%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(65deg, rgba(0, 0, 0, 0) 0 55%, rgba(0, 0, 0, .1) 55% 75%, rgba(0, 0, 0, 0) 75%),
		linear-gradient(160deg, #5A22B5 0%, #46178F 55%, #36106F 100%);
	--tsbq-stage-fg: #FFFFFF;
	--tsbq-stage-muted: rgba(255, 255, 255, .78);
	--tsbq-card-bg: rgba(255, 255, 255, .12);
	--tsbq-card-fg: #FFFFFF;
	--tsbq-card-border: rgba(255, 255, 255, .18);
	--tsbq-card-shadow: 0 24px 48px -18px rgba(20, 0, 50, .6);
	--tsbq-muted: rgba(255, 255, 255, .8);
	--tsbq-media-bg: #FFFFFF;
	--tsbq-pill-bg: #FFFFFF;
	--tsbq-pill-fg: #1A1A1A;
	--tsbq-a1: #E21B3C;
	--tsbq-a2: #1368CE;
	--tsbq-a3: #D89E00;
	--tsbq-a4: #26890C;
	--tsbq-a3-fg: #FFFFFF;
	--tsbq-ok: #66BF39;
	--tsbq-bad: #FF3355;
	--tsbq-timeup: #FF3355;
	--tsbq-warn: #FF3355;
	--tsbq-btn-bg: #FFFFFF;
	--tsbq-btn-fg: #46178F;
	--tsbq-btn-hover: #EFE7FB;
	--tsbq-ghost-fg: #FFFFFF;
	--tsbq-ghost-border: rgba(255, 255, 255, .5);
	--tsbq-progress-track: rgba(255, 255, 255, .2);
	--tsbq-progress-fill: #FFFFFF;
	--tsbq-ring: #46178F;
	--tsbq-eyebrow: #FFD166;
	--tsbq-chip-bg: rgba(255, 255, 255, .14);
	--tsbq-chip-fg: #FFFFFF;
	--tsbq-row-bg: rgba(255, 255, 255, .1);
	--tsbq-me-bg: rgba(255, 255, 255, .24);
	--tsbq-me-border: #FFD166;
	--tsbq-focus: #FFD166;
	--tsbq-line: rgba(255, 255, 255, .2);
}

/* ==================================================================== *
 * 2. Basis & Resets (robust gegen Theme-CSS)
 * ==================================================================== */
.tsbq {
	display: block;
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	color: var(--tsbq-text);
	text-align: left;
	min-width: 0;
	align-self: stretch;
	-webkit-tap-highlight-color: transparent;
}

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

.tsbq h2,
.tsbq h3,
.tsbq p,
.tsbq ul,
.tsbq ol,
.tsbq li,
.tsbq form,
.tsbq label {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	font-style: normal;
}

.tsbq h2,
.tsbq h3 {
	line-height: 1.2;
	color: inherit;
}

.tsbq ul,
.tsbq ol {
	list-style: none;
}

.tsbq li::before,
.tsbq li::marker {
	content: none;
}

.tsbq svg {
	display: block;
	max-width: none;
}

.tsbq img {
	max-width: 100%;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.tsbq .tsbq-btn.tsbq-btn,
.tsbq .tsbq-tile.tsbq-tile {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: inherit;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	outline: none;
	min-width: 0;
	width: auto;
	height: auto;
	box-shadow: none;
	border: 0;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.tsbq .tsbq-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.tsbq [hidden] {
	display: none !important;
}

.tsbq-noscript {
	padding: 1em;
	border: 1px dashed currentColor;
	border-radius: 12px;
}

/* ==================================================================== *
 * 3. Bühne & Karte
 * ==================================================================== */
.tsbq .tsbq-stage {
	position: relative;
	background: var(--tsbq-stage-bg);
	color: var(--tsbq-stage-fg);
	border-radius: var(--tsbq-stage-radius);
	padding: var(--tsbq-stage-pad);
	overflow: hidden;
	isolation: isolate;
}

.tsbq.tsbq-design-tsb .tsbq-stage::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #E2001A 0 72px, rgba(255, 255, 255, .16) 72px);
	z-index: -1;
}

.tsbq.tsbq-design-kahoot .tsbq-stage::before {
	content: "";
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	right: -14%;
	top: -22%;
	border-radius: 28%;
	background: rgba(255, 255, 255, .05);
	transform: rotate(24deg);
	z-index: -1;
}

/* Breiten-Stütze: liefert eine große max-content-Breite, aber eine winzige min-content-Breite
   (umbrechbare Zeichenkette, unsichtbar). So füllt das Quiz auch in Shrink-to-fit-Eltern
   (Elementor-Container mit align-items:center) die verfügbare Breite – ohne Überlauf. */
.tsbq .tsbq-inner::after,
.tsbq .tsbq-portal-body::after {
	content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font: 16px/0 monospace;
	white-space: normal;
	word-break: normal;
}

/* Platzhalter, solange JS (noch) nicht gelaufen ist – nie leer/weiß. */
.tsbq[data-tsbq]:not(.tsbq-ready),
.tsbq-portal[data-tsbq-portal]:not(.tsbq-ready) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 24px;
	background: #F4F7FA;
	color: #22303F;
	border-radius: 18px;
}

.tsbq[data-tsbq]:not(.tsbq-ready)::before,
.tsbq-portal[data-tsbq-portal]:not(.tsbq-ready)::before {
	content: "Quiz wird geladen …";
	font-weight: 600;
	opacity: .75;
}

.tsbq .tsbq-boot-error {
	padding: 20px;
	border-radius: 14px;
	background: #FDECEE;
	color: #8A1020;
	font-weight: 600;
}

.tsbq .tsbq-inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

.tsbq .tsbq-card {
	position: relative;
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	border: 1px solid var(--tsbq-card-border);
	border-radius: var(--tsbq-radius);
	box-shadow: var(--tsbq-card-shadow);
	padding: var(--tsbq-card-pad);
	overflow: hidden;
}


.tsbq .tsbq-enter {
	animation: tsbq-enter .45s var(--tsbq-ease) both;
}

@keyframes tsbq-enter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==================================================================== *
 * 4. Buttons
 * ==================================================================== */
.tsbq .tsbq-btn.tsbq-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .75em 1.45em;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	background: var(--tsbq-btn-bg);
	color: var(--tsbq-btn-fg);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tsbq-btn-bg) 70%, transparent);
	overflow: hidden;
	transition: background-color .18s ease, transform .18s var(--tsbq-ease), box-shadow .18s ease;
}

.tsbq .tsbq-btn.tsbq-btn:hover,
.tsbq .tsbq-btn.tsbq-btn:focus {
	background: var(--tsbq-btn-hover);
	color: var(--tsbq-btn-fg);
	text-decoration: none;
}

.tsbq .tsbq-btn.tsbq-btn:hover {
	transform: translateY(-1px);
}

.tsbq .tsbq-btn.tsbq-btn:active {
	transform: translateY(1px);
}

.tsbq .tsbq-btn.tsbq-btn:focus-visible,
.tsbq .tsbq-tile.tsbq-tile:focus-visible,
.tsbq .tsbq-input.tsbq-input:focus-visible {
	outline: 3px solid var(--tsbq-focus);
	outline-offset: 3px;
}

.tsbq .tsbq-btn .tsbq-icon {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

.tsbq .tsbq-btn.tsbq-btn-ghost.tsbq-btn-ghost {
	background: transparent;
	color: var(--tsbq-ghost-fg);
	box-shadow: inset 0 0 0 2px var(--tsbq-ghost-border);
}

.tsbq .tsbq-btn.tsbq-btn-ghost.tsbq-btn-ghost:hover,
.tsbq .tsbq-btn.tsbq-btn-ghost.tsbq-btn-ghost:focus {
	background: color-mix(in srgb, var(--tsbq-ghost-fg) 8%, transparent);
	color: var(--tsbq-ghost-fg);
	box-shadow: inset 0 0 0 2px var(--tsbq-ghost-fg);
}

.tsbq .tsbq-btn.tsbq-btn-lg {
	min-height: 56px;
	padding: .9em 2em;
	font-size: 18px;
}

.tsbq .tsbq-btn.tsbq-btn-sm {
	min-height: 40px;
	padding: .5em 1.1em;
	font-size: 14px;
}

.tsbq .tsbq-btn.is-loading {
	pointer-events: none;
	opacity: .85;
}

.tsbq .tsbq-btn.is-loading::after {
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: tsbq-spin .7s linear infinite;
}

.tsbq .tsbq-btn.is-loading .tsbq-icon {
	display: none;
}

@keyframes tsbq-spin {
	to {
		transform: rotate(360deg);
	}
}

.tsbq .tsbq-btn.tsbq-btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.tsbq .tsbq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.tsbq .tsbq-actions-center {
	justify-content: center;
}

/* ==================================================================== *
 * 5. Start-Screen
 * ==================================================================== */
.tsbq .tsbq-card-start {
	text-align: center;
	padding: clamp(24px, 5vw, 48px) clamp(18px, 5vw, 48px);
}

.tsbq .tsbq-start-shapes {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.tsbq .tsbq-start-shape {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	color: var(--tsbq-a-fg);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
	animation: tsbq-pop .5s var(--tsbq-ease) both;
}

.tsbq .tsbq-start-shape:nth-child(2) { animation-delay: .06s; }
.tsbq .tsbq-start-shape:nth-child(3) { animation-delay: .12s; }
.tsbq .tsbq-start-shape:nth-child(4) { animation-delay: .18s; }

.tsbq .tsbq-start-shape .tsbq-shape {
	width: 18px;
	height: 18px;
}

@keyframes tsbq-pop {
	from {
		opacity: 0;
		transform: translateY(8px) scale(.7);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tsbq .tsbq-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tsbq-eyebrow);
	margin-bottom: 8px;
}

.tsbq .tsbq-title {
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	color: var(--tsbq-heading);
	outline: none;
	text-wrap: balance;
}

.tsbq.tsbq-design-tsb .tsbq-card-start .tsbq-title::after,
.tsbq.tsbq-design-tsb .tsbq-result-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 16px auto 0;
	background: #E2001A;
	border-radius: 2px;
}

.tsbq .tsbq-intro {
	max-width: 58ch;
	margin: 16px auto 0;
	color: var(--tsbq-muted);
	font-size: 17px;
}

.tsbq .tsbq-intro p + p {
	margin-top: .7em;
}

.tsbq .tsbq-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.tsbq .tsbq-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px 7px 11px;
	border-radius: 999px;
	background: var(--tsbq-chip-bg);
	color: var(--tsbq-chip-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.tsbq .tsbq-chip .tsbq-icon {
	width: 17px;
	height: 17px;
	opacity: .85;
}

.tsbq .tsbq-start-btn {
	margin-top: 6px;
}

/* Name auf dem Start-Screen (optional) */
.tsbq .tsbq-start-name {
	max-width: 360px;
	margin: 22px auto 0;
	text-align: left;
}

.tsbq .tsbq-start-name .tsbq-label {
	font-size: 14px;
}

.tsbq .tsbq-input.tsbq-start-name-input {
	display: block;
	width: 100%;
	/* >= 16px verhindert Auto-Zoom in iOS Safari */
	font-size: max(16px, 1em);
}

.tsbq.tsbq-design-theme .tsbq-input.tsbq-start-name-input {
	border-radius: 8px;
}

.tsbq.tsbq-design-kahoot .tsbq-start-name .tsbq-label {
	color: inherit;
}

.tsbq .tsbq-start-name + .tsbq-actions {
	margin-top: 16px;
}

.tsbq .tsbq-start-status:not(:empty) {
	margin-top: 18px;
	text-align: left;
}

.tsbq .tsbq-kbd-hint {
	margin-top: 16px;
	font-size: 13px;
	color: var(--tsbq-muted);
	opacity: .85;
}

@media (hover: none), (pointer: coarse) {
	.tsbq .tsbq-kbd-hint {
		display: none;
	}
}

.tsbq .tsbq-empty {
	margin-top: 18px;
	color: var(--tsbq-muted);
}

/* ==================================================================== *
 * 6. Kopfzeile: Fortschritt & Punkte
 * ==================================================================== */
.tsbq .tsbq-topbar {
	margin: 0 2px 14px;
	color: var(--tsbq-stage-fg);
}

.tsbq .tsbq-topbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.tsbq .tsbq-progress-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsbq-stage-muted);
	font-variant-numeric: tabular-nums;
}

.tsbq .tsbq-progress {
	height: 6px;
	border-radius: 99px;
	background: var(--tsbq-progress-track);
	overflow: hidden;
}

.tsbq .tsbq-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--tsbq-progress-fill);
	transition: width .6s var(--tsbq-ease);
}

.tsbq .tsbq-score {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	box-shadow: 0 2px 8px -2px rgba(16, 32, 56, .18);
	font-weight: 800;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tsbq.tsbq-design-theme .tsbq-score {
	box-shadow: 0 0 0 1px var(--tsbq-line), 0 2px 8px -2px rgba(16, 32, 56, .12);
}

.tsbq.tsbq-design-tsb .tsbq-score {
	color: #003C73;
}

.tsbq.tsbq-design-kahoot .tsbq-score {
	background: #FFFFFF;
	color: #2A0F5C;
}

.tsbq .tsbq-score-unit {
	font-size: 12px;
	font-weight: 600;
	opacity: .65;
}

.tsbq .tsbq-score-delta {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	margin-top: -.6em;
	font-size: 14px;
	font-weight: 800;
	color: var(--tsbq-ok);
	opacity: 0;
	pointer-events: none;
}

.tsbq.tsbq-design-tsb .tsbq-score-delta,
.tsbq.tsbq-design-kahoot .tsbq-score-delta {
	color: #FFFFFF;
}

.tsbq .tsbq-score.is-bump {
	animation: tsbq-bump .5s var(--tsbq-ease);
}

.tsbq .tsbq-score.is-bump .tsbq-score-delta {
	animation: tsbq-float 1.4s var(--tsbq-ease) both;
}

@keyframes tsbq-bump {
	40% {
		transform: scale(1.1);
	}
}

@keyframes tsbq-float {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}
	20% {
		opacity: 1;
		transform: translateY(2px);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* ==================================================================== *
 * 7. Frage-Karte
 * ==================================================================== */
.tsbq .tsbq-card-question {
	padding-top: calc(var(--tsbq-card-pad) + 2px);
}

/* Zeitbalken oben in der Karte */
.tsbq .tsbq-timebar {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: color-mix(in srgb, var(--tsbq-ring) 12%, transparent);
}

.tsbq .tsbq-timebar-fill {
	display: block;
	height: 100%;
	background: var(--tsbq-ring);
	transform-origin: left center;
	will-change: transform;
}

.tsbq.tsbq-design-kahoot .tsbq-timebar-fill {
	background: #FFFFFF;
}

.tsbq .tsbq-card.is-warn .tsbq-timebar-fill {
	background: var(--tsbq-warn);
}

/* Bild-Bühne */
.tsbq .tsbq-hero-wrap {
	position: relative;
	z-index: 1;
}

.tsbq .tsbq-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: min(44vh, 380px);
	border-radius: calc(var(--tsbq-radius) - 8px);
	background: var(--tsbq-media-bg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsbq .tsbq-hero-blur {
	display: none;
}

/* Bild nie über seine natürliche Größe skalieren (Breite = natürliche Breite per JS),
   zentriert in der 16:9-Bühne; keine Transforms/Filter → gestochen scharf. */
.tsbq .tsbq-hero .tsbq-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	image-rendering: auto;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	transition: opacity .3s ease;
}

.tsbq .tsbq-hero .tsbq-img.is-loaded {
	opacity: 1;
}

.tsbq .tsbq-hero.tsbq-hero-broken .tsbq-img {
	display: none;
}

/* Ohne Bild: kompaktere, dezente Fläche */
.tsbq .tsbq-hero.tsbq-hero-empty {
	aspect-ratio: auto;
	max-height: none;
	min-height: clamp(150px, calc(var(--tsbq-cw, 640px) * 0.26), 210px);
	background:
		radial-gradient(circle at 12% 120%, color-mix(in srgb, var(--tsbq-a1) 22%, transparent) 0 22%, transparent 23%),
		radial-gradient(circle at 92% -30%, color-mix(in srgb, var(--tsbq-a2) 18%, transparent) 0 30%, transparent 31%),
		var(--tsbq-media-bg);
}

.tsbq.tsbq-design-kahoot .tsbq-hero.tsbq-hero-empty {
	background:
		radial-gradient(circle at 12% 120%, rgba(255, 255, 255, .14) 0 22%, transparent 23%),
		radial-gradient(circle at 92% -30%, rgba(255, 255, 255, .1) 0 30%, transparent 31%),
		rgba(255, 255, 255, .08);
}

.tsbq .tsbq-hero-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsbq .tsbq-hero-num {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--tsbq-primary);
	color: #FFFFFF;
	font-size: 22px;
	font-weight: 800;
	transform: rotate(-6deg);
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tsbq-primary) 80%, transparent);
}

.tsbq.tsbq-design-kahoot .tsbq-hero-num {
	background: #FFFFFF;
	color: #46178F;
}

/* Countdown-Ring */
.tsbq .tsbq-timer {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 6px 16px -6px rgba(16, 32, 56, .35);
	display: grid;
	place-items: center;
	color: var(--tsbq-ring);
	transition: transform .2s ease, color .2s ease;
}

.tsbq .tsbq-timer svg {
	position: absolute;
	inset: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	transform: rotate(-90deg);
}

.tsbq .tsbq-timer-track {
	fill: none;
	stroke: currentColor;
	stroke-opacity: .13;
	stroke-width: 4;
}

.tsbq .tsbq-timer-ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 4;
	stroke-linecap: round;
}

.tsbq .tsbq-timer-num {
	position: relative;
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.tsbq .tsbq-timer.is-warn {
	color: var(--tsbq-warn);
	animation: tsbq-pulse 1s ease-in-out infinite;
}

.tsbq .tsbq-card.is-answered .tsbq-timer {
	animation: none;
	opacity: .55;
}

@keyframes tsbq-pulse {
	50% {
		transform: scale(1.08);
	}
}

/* Richtig/Falsch-Banner (schräg über das Bild) */
.tsbq .tsbq-banner {
	position: absolute;
	z-index: 5;
	left: calc(-1 * var(--tsbq-card-pad) - 16px);
	right: calc(-1 * var(--tsbq-card-pad) - 16px);
	bottom: 9%;
	display: none;
	justify-content: center;
	padding: 10px 16px;
	color: #FFFFFF;
	font-size: clamp(19px, calc(var(--tsbq-cw, 640px) * 0.034), 26px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
	transform: rotate(-3deg);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
	pointer-events: none;
}

.tsbq .tsbq-hero-empty + .tsbq-banner {
	bottom: -10px;
}

.tsbq .tsbq-banner.is-shown {
	display: flex;
	animation: tsbq-banner .5s var(--tsbq-ease) both;
}

.tsbq .tsbq-banner-ok {
	background: var(--tsbq-ok);
}

.tsbq .tsbq-banner-bad {
	background: var(--tsbq-bad);
}

.tsbq .tsbq-banner-timeup {
	background: var(--tsbq-timeup);
}

.tsbq .tsbq-banner-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.tsbq .tsbq-banner-icon {
	display: grid;
	place-items: center;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
}

.tsbq .tsbq-banner-icon .tsbq-icon {
	width: .85em;
	height: .85em;
}

@keyframes tsbq-banner {
	0% {
		opacity: 0;
		transform: translateX(-40%) rotate(-3deg);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(0) rotate(-3deg);
	}
}

/* Fragetext-Pille */
.tsbq .tsbq-question {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	margin: 16px 0 18px;
	padding: 0 6px;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.tsbq .tsbq-question > span {
	display: inline-block;
	max-width: 100%;
	padding: 12px 22px;
	border-radius: 14px;
	background: var(--tsbq-pill-bg);
	color: var(--tsbq-pill-fg);
	box-shadow: var(--tsbq-pill-shadow);
	font-size: clamp(18px, calc(var(--tsbq-cw, 640px) * 0.03), 24px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.tsbq.tsbq-design-tsb .tsbq-question > span {
	box-shadow: inset 0 -3px 0 #E2001A, 0 10px 24px -10px rgba(0, 30, 70, .35), 0 0 0 1px rgba(0, 60, 115, .08);
}

/* Ohne Bild: Frage steht groß in der kompakten Bühne */
.tsbq .tsbq-no-image .tsbq-hero-wrap {
	margin-bottom: 18px;
}

.tsbq .tsbq-no-image .tsbq-question {
	margin: 0;
	padding: 34px 76px;
	width: 100%;
}

.tsbq .tsbq-no-image .tsbq-question > span {
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	font-size: clamp(21px, calc(var(--tsbq-cw, 640px) * 0.038), 30px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--tsbq-heading);
}

.tsbq.tsbq-design-tsb .tsbq-no-image .tsbq-question > span {
	box-shadow: none;
}

/* ==================================================================== *
 * 8. Antwort-Kacheln
 * ==================================================================== */
.tsbq .tsbq-answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.tsbq .tsbq-tile.tsbq-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 14px 18px 16px 16px;
	border-radius: var(--tsbq-tile-radius);
	background: var(--tsbq-tile-bg, var(--tsbq-a1));
	color: var(--tsbq-tile-fg, var(--tsbq-a-fg));
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 6px 14px -8px rgba(0, 0, 0, .35);
	transition: transform .16s var(--tsbq-ease), filter .2s ease, opacity .3s ease, background-color .3s ease, box-shadow .16s ease;
}

.tsbq .tsbq-tile.tsbq-a1 { --tsbq-tile-bg: var(--tsbq-a1); }
.tsbq .tsbq-tile.tsbq-a2 { --tsbq-tile-bg: var(--tsbq-a2); }
.tsbq .tsbq-tile.tsbq-a3 { --tsbq-tile-bg: var(--tsbq-a3); --tsbq-tile-fg: var(--tsbq-a3-fg); }
.tsbq .tsbq-tile.tsbq-a4 { --tsbq-tile-bg: var(--tsbq-a4); }
.tsbq .tsbq-start-shape.tsbq-a1 { background: var(--tsbq-a1); }
.tsbq .tsbq-start-shape.tsbq-a2 { background: var(--tsbq-a2); }
.tsbq .tsbq-start-shape.tsbq-a3 { background: var(--tsbq-a3); color: var(--tsbq-a3-fg); }
.tsbq .tsbq-start-shape.tsbq-a4 { background: var(--tsbq-a4); }

.tsbq.tsbq-design-kahoot .tsbq-tile.tsbq-a3 .tsbq-tile-text {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.tsbq .tsbq-tile.tsbq-tile:hover,
.tsbq .tsbq-tile.tsbq-tile:focus {
	background: var(--tsbq-tile-bg, var(--tsbq-a1));
	color: var(--tsbq-tile-fg, var(--tsbq-a-fg));
}

.tsbq .tsbq-answers:not(.is-locked) .tsbq-tile.tsbq-tile:hover {
	transform: translateY(-2px);
	filter: brightness(1.06) saturate(1.04);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 12px 22px -10px rgba(0, 0, 0, .45);
}

.tsbq .tsbq-answers:not(.is-locked) .tsbq-tile.tsbq-tile:active {
	transform: translateY(2px);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 2px 6px -4px rgba(0, 0, 0, .35);
}

.tsbq .tsbq-answers.is-locked .tsbq-tile.tsbq-tile {
	cursor: default;
}

.tsbq .tsbq-tile-shape {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .16);
}

.tsbq .tsbq-tile.tsbq-a3 .tsbq-tile-shape {
	background: rgba(255, 255, 255, .28);
}

.tsbq .tsbq-tile-shape .tsbq-shape {
	width: 20px;
	height: 20px;
	fill: currentColor;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}

.tsbq .tsbq-tile-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.tsbq .tsbq-tile-key {
	flex: none;
	display: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(0, 0, 0, .14);
	opacity: .75;
}

@media (hover: hover) and (pointer: fine) {
	.tsbq .tsbq-tile-key {
		display: grid;
	}
}

.tsbq .tsbq-tile-mark {
	flex: none;
	display: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FFFFFF;
}

.tsbq .tsbq-tile-mark .tsbq-icon {
	width: 18px;
	height: 18px;
}

/* Während des Prüfens */
.tsbq .tsbq-tile.is-selected {
	transform: scale(.98);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 3px var(--tsbq-tile-bg);
}

.tsbq .tsbq-answers.is-locked:not(.is-revealed):not(.is-quiet) .tsbq-tile:not(.is-selected) {
	opacity: .6;
}

/* Auflösung */
.tsbq .tsbq-answers.is-revealed .tsbq-tile-key {
	display: none;
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-correct,
.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-wrong {
	transform: none;
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-correct .tsbq-tile-mark,
.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-wrong .tsbq-tile-mark {
	display: grid;
	animation: tsbq-pop .35s var(--tsbq-ease) both;
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.tsbq-tile.is-correct {
	--tsbq-tile-bg: var(--tsbq-ok);
	--tsbq-tile-fg: var(--tsbq-ok-fg);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), 0 0 0 3px color-mix(in srgb, var(--tsbq-ok) 35%, transparent), 0 10px 22px -10px rgba(0, 0, 0, .45);
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-correct .tsbq-tile-mark {
	color: var(--tsbq-ok);
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.tsbq-tile.is-wrong {
	--tsbq-tile-bg: var(--tsbq-bad);
	--tsbq-tile-fg: var(--tsbq-bad-fg);
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-wrong .tsbq-tile-mark {
	color: var(--tsbq-bad);
}

.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-dim {
	opacity: .32;
	filter: saturate(.25);
	box-shadow: none;
}

.tsbq.tsbq-design-kahoot .tsbq-answers.is-revealed .tsbq-tile.is-dim {
	opacity: .4;
	filter: saturate(.2) brightness(.9);
}

.tsbq .tsbq-answers.is-quiet .tsbq-tile:not(.is-selected) {
	opacity: .35;
}

/* ==================================================================== *
 * 9. Fußzeile der Frage: Punkte, Weiter, Fehler
 * ==================================================================== */
.tsbq .tsbq-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.tsbq .tsbq-footer:empty {
	display: none;
}

.tsbq .tsbq-points {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;
	animation: tsbq-pop .45s var(--tsbq-ease) both;
}

.tsbq .tsbq-points-num {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: var(--tsbq-ok);
}

.tsbq .tsbq-points-zero .tsbq-points-num {
	color: var(--tsbq-muted);
}

.tsbq .tsbq-points-unit {
	font-size: 14px;
	font-weight: 600;
	color: var(--tsbq-muted);
}

.tsbq.tsbq-design-kahoot .tsbq-points-num {
	color: #FFFFFF;
}

.tsbq .tsbq-next {
	margin-left: auto;
	padding-right: 1.15em;
}

.tsbq .tsbq-next .tsbq-icon {
	transition: transform .2s var(--tsbq-ease);
}

.tsbq .tsbq-next:hover .tsbq-icon {
	transform: translateX(3px);
}

.tsbq .tsbq-next-auto {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: currentColor;
	opacity: .45;
	transform-origin: left center;
	animation-name: tsbq-auto;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

@keyframes tsbq-auto {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.tsbq .tsbq-checking {
	font-size: 14px;
	color: var(--tsbq-muted);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.tsbq .tsbq-checking::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: tsbq-spin .7s linear infinite;
}

.tsbq .tsbq-card-loading {
	display: grid;
	place-items: center;
	min-height: 180px;
}

.tsbq .tsbq-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--tsbq-bad) 9%, #fff);
	color: #6E1A22;
	border-left: 4px solid var(--tsbq-bad);
	font-size: 15px;
	text-align: left;
}

.tsbq .tsbq-error > .tsbq-icon {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--tsbq-bad);
}

.tsbq .tsbq-error-text {
	flex: 1 1 220px;
}

.tsbq .tsbq-error .tsbq-btn.tsbq-btn-ghost.tsbq-btn-ghost {
	--tsbq-ghost-fg: #6E1A22;
	--tsbq-ghost-border: rgba(110, 26, 34, .35);
}

/* ==================================================================== *
 * 10. Ergebnis
 * ==================================================================== */
.tsbq .tsbq-card-result {
	text-align: center;
	padding: clamp(22px, 5vw, 44px) clamp(16px, 5vw, 44px);
}

.tsbq .tsbq-result-hero {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.tsbq .tsbq-result-dial {
	position: relative;
	width: 188px;
	height: 188px;
}

.tsbq .tsbq-result-svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.tsbq .tsbq-result-track {
	fill: none;
	stroke: var(--tsbq-chip-bg);
	stroke-width: 9;
}

.tsbq .tsbq-result-ring {
	fill: none;
	stroke: var(--tsbq-ok);
	stroke-width: 9;
	stroke-linecap: round;
}

.tsbq.tsbq-design-tsb .tsbq-result-ring {
	stroke: #E2001A;
}

.tsbq.tsbq-design-kahoot .tsbq-result-track {
	stroke: rgba(255, 255, 255, .16);
}

.tsbq .tsbq-result-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tsbq .tsbq-result-score {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--tsbq-heading);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.tsbq .tsbq-result-unit {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-result-meta {
	margin-top: 18px;
}

.tsbq .tsbq-chip-strong {
	background: color-mix(in srgb, var(--tsbq-ok) 14%, transparent);
	color: color-mix(in srgb, var(--tsbq-ok) 75%, #000);
}

.tsbq.tsbq-design-kahoot .tsbq-chip-strong {
	background: rgba(102, 191, 57, .25);
	color: #FFFFFF;
}

.tsbq .tsbq-result-area:not(:empty) {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--tsbq-line);
	text-align: left;
}

/* Namensformular */
.tsbq .tsbq-form {
	max-width: 520px;
	margin: 0 auto;
}

.tsbq .tsbq-label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tsbq-card-fg);
}

.tsbq .tsbq-optional {
	font-weight: 500;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-form-row {
	display: flex;
	gap: 10px;
}

.tsbq .tsbq-input.tsbq-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 2px solid var(--tsbq-line);
	border-radius: 14px;
	background: #FFFFFF;
	color: #22303F;
	font-family: inherit;
	font-size: 17px;
	line-height: normal;
	box-shadow: none;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tsbq .tsbq-input.tsbq-input:focus {
	border-color: var(--tsbq-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsbq-primary) 16%, transparent);
}

.tsbq.tsbq-design-kahoot .tsbq-input.tsbq-input {
	border-color: transparent;
}

.tsbq.tsbq-design-kahoot .tsbq-input.tsbq-input:focus {
	border-color: #FFD166;
	box-shadow: 0 0 0 4px rgba(255, 209, 102, .3);
}

.tsbq .tsbq-input[aria-invalid="true"] {
	border-color: var(--tsbq-bad);
}

.tsbq .tsbq-submit {
	flex: none;
	min-height: 52px;
}

.tsbq .tsbq-field-error:not(:empty) {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tsbq-bad);
}

.tsbq.tsbq-design-kahoot .tsbq-field-error:not(:empty) {
	color: #FFD1DA;
}

/* Bestenliste (im Spiel) */
.tsbq .tsbq-board-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-bottom: 12px;
}

.tsbq .tsbq-board-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 800;
	color: var(--tsbq-heading);
	outline: none;
}

.tsbq .tsbq-board-title .tsbq-icon {
	width: 22px;
	height: 22px;
	color: var(--tsbq-eyebrow);
}

.tsbq .tsbq-board-myrank {
	font-size: 14px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--tsbq-me-bg);
	color: var(--tsbq-card-fg);
}

.tsbq .tsbq-board-cols,
.tsbq .tsbq-board-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 64px 84px;
	align-items: center;
	gap: 10px;
}

.tsbq .tsbq-board-cols {
	padding: 0 14px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-board-cols span:nth-child(3),
.tsbq .tsbq-board-cols span:nth-child(4),
.tsbq .tsbq-board-correct,
.tsbq .tsbq-board-score {
	text-align: right;
}

.tsbq .tsbq-board {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tsbq .tsbq-board-row {
	min-height: 52px;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--tsbq-row-bg);
	font-variant-numeric: tabular-nums;
	animation: tsbq-enter .4s var(--tsbq-ease) both;
}

.tsbq .tsbq-board-row:nth-child(2) { animation-delay: .04s; }
.tsbq .tsbq-board-row:nth-child(3) { animation-delay: .08s; }
.tsbq .tsbq-board-row:nth-child(4) { animation-delay: .12s; }
.tsbq .tsbq-board-row:nth-child(5) { animation-delay: .16s; }
.tsbq .tsbq-board-row:nth-child(n+6) { animation-delay: .2s; }

.tsbq .tsbq-board-rank > span {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	box-shadow: 0 0 0 1px var(--tsbq-line);
}

.tsbq.tsbq-design-kahoot .tsbq-board-rank > span {
	background: rgba(255, 255, 255, .16);
}

.tsbq .tsbq-board-row.tsbq-rank-1 .tsbq-board-rank > span,
.tsbq .tsbq-board-row.tsbq-rank-2 .tsbq-board-rank > span,
.tsbq .tsbq-board-row.tsbq-rank-3 .tsbq-board-rank > span {
	color: #3A2A00;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 3px 8px -3px rgba(0, 0, 0, .35);
}

.tsbq .tsbq-board-row.tsbq-rank-1 .tsbq-board-rank > span { background: var(--tsbq-gold); }
.tsbq .tsbq-board-row.tsbq-rank-2 .tsbq-board-rank > span { background: var(--tsbq-silver); color: #27323D; }
.tsbq .tsbq-board-row.tsbq-rank-3 .tsbq-board-rank > span { background: var(--tsbq-bronze); color: #3B1E05; }

.tsbq .tsbq-board-name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 700;
}

.tsbq .tsbq-board-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tsbq .tsbq-board-correct {
	font-size: 14px;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-board-score {
	font-weight: 800;
}

.tsbq .tsbq-board-row.is-me {
	background: var(--tsbq-me-bg);
	box-shadow: inset 4px 0 0 var(--tsbq-me-border);
}

.tsbq .tsbq-badge {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tsbq-me-border);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tsbq.tsbq-design-kahoot .tsbq-badge {
	color: #2A0F5C;
}

.tsbq .tsbq-board-gap {
	text-align: center;
	color: var(--tsbq-muted);
	letter-spacing: .3em;
	line-height: 1;
	padding: 2px 0;
}

/* ==================================================================== *
 * 11. Schmale Container / Mobil
 * ==================================================================== */
/* Schmaler Container (Klasse per JS/ResizeObserver statt @container – robust in Elementor/Safari) */
.tsbq.tsbq-sm .tsbq-stage {
	--tsbq-stage-radius: 18px;
}

.tsbq.tsbq-sm .tsbq-answers {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.tsbq.tsbq-sm .tsbq-tile.tsbq-tile {
	min-height: 60px;
	padding: 12px 14px 14px 12px;
	font-size: 16px;
}

.tsbq.tsbq-sm .tsbq-tile-shape {
	width: 30px;
	height: 30px;
}

.tsbq.tsbq-sm .tsbq-question {
	margin-bottom: 14px;
}

.tsbq.tsbq-sm .tsbq-question > span {
	padding: 10px 16px;
}

.tsbq.tsbq-sm .tsbq-timer {
	width: 50px;
	height: 50px;
	top: 8px;
	right: 8px;
}

.tsbq.tsbq-sm .tsbq-timer-num {
	font-size: 17px;
}

.tsbq.tsbq-sm .tsbq-banner {
	padding: 8px 12px;
}

.tsbq.tsbq-sm .tsbq-no-image .tsbq-question {
	padding: 66px 18px 30px;
}

.tsbq.tsbq-sm .tsbq-no-image .tsbq-question > span {
	font-size: 21px;
}

.tsbq.tsbq-sm .tsbq-hero.tsbq-hero-empty {
	min-height: 0;
}

.tsbq.tsbq-sm .tsbq-form-row {
	flex-direction: column;
}

.tsbq.tsbq-sm .tsbq-submit {
	width: 100%;
}

.tsbq.tsbq-sm .tsbq-result-dial {
	width: 160px;
	height: 160px;
}

.tsbq.tsbq-sm .tsbq-result-score {
	font-size: 34px;
}

.tsbq.tsbq-sm .tsbq-board-cols,
.tsbq.tsbq-sm .tsbq-board-row {
	grid-template-columns: 36px minmax(0, 1fr) 46px 70px;
	gap: 8px;
}

.tsbq.tsbq-sm .tsbq-board-row {
	padding: 8px 10px;
}

.tsbq.tsbq-sm .tsbq-board-cols {
	padding: 0 10px 6px;
}

.tsbq.tsbq-sm .tsbq-result-actions .tsbq-btn {
	flex: 1 1 100%;
}

.tsbq.tsbq-sm .tsbq-next {
	flex: 1 1 auto;
}

/* Schmaler Container (Klasse per JS/ResizeObserver statt @container – robust in Elementor/Safari) */
.tsbq.tsbq-xs .tsbq-board-correct,
.tsbq.tsbq-xs .tsbq-board-cols span:nth-child(3) {
	display: none;
}

.tsbq.tsbq-xs .tsbq-board-cols,
.tsbq.tsbq-xs .tsbq-board-row {
	grid-template-columns: 46px minmax(0, 1fr) 70px;
}

.tsbq.tsbq-xs .tsbq-board-cols {
	letter-spacing: .06em;
}

/* ==================================================================== *
 * 12. Highscore-Tabelle (serverseitig: [tsb_quiz_highscore])
 * ==================================================================== */
.tsbq.tsbq-highscore-wrap {
	max-width: 900px;
}

.tsbq-highscore-wrap .tsbq-highscore-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.tsbq-highscore-wrap .tsbq-highscore-select label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #5A6878;
}

.tsbq-highscore-wrap .tsbq-highscore-select select {
	min-height: 44px;
	padding: 0 40px 0 14px;
	border: 2px solid rgba(34, 48, 63, .14);
	border-radius: 12px;
	background-color: #FFFFFF;
	color: #22303F;
	font: inherit;
	font-size: 16px;
	max-width: 100%;
}

table.tsbq-highscore.tsbq-highscore {
	--tsbq-hs-primary: var(--tsbq-primary, var(--e-global-color-primary, var(--wp--preset--color--primary, #003C73)));
	--tsbq-hs-accent: var(--tsbq-accent, var(--e-global-color-accent, var(--wp--preset--color--secondary, #E2001A)));
	--tsbq-hs-head-bg: var(--tsbq-hs-primary);
	--tsbq-hs-head-fg: #FFFFFF;
	--tsbq-hs-row: #FFFFFF;
	--tsbq-hs-row-alt: #F4F7FA;
	--tsbq-hs-fg: #22303F;
	--tsbq-hs-muted: #5A6878;
	--tsbq-hs-me: color-mix(in srgb, var(--tsbq-hs-primary) 10%, #fff);
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--tsbq-hs-row);
	color: var(--tsbq-hs-fg);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 12px 32px -12px rgba(16, 32, 56, .2);
}

.tsbq-design-tsb table.tsbq-highscore.tsbq-highscore {
	--tsbq-hs-primary: #003C73;
	--tsbq-hs-accent: #E2001A;
}

.tsbq-design-kahoot table.tsbq-highscore.tsbq-highscore {
	--tsbq-hs-primary: #46178F;
	--tsbq-hs-accent: #FF3355;
	--tsbq-hs-row-alt: #F5F0FC;
}

table.tsbq-highscore.tsbq-highscore caption.tsbq-highscore-caption,
table.tsbq-highscore.tsbq-highscore caption {
	caption-side: top;
	padding: 0 2px 12px;
	text-align: left;
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	color: var(--tsbq-hs-primary);
	background: none;
	border: 0;
}

.tsbq-design-tsb table.tsbq-highscore.tsbq-highscore caption::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 10px;
	border-radius: 2px;
	background: #E2001A;
}

table.tsbq-highscore.tsbq-highscore th,
table.tsbq-highscore.tsbq-highscore td {
	padding: 13px 16px;
	border: 0;
	text-align: left;
	vertical-align: middle;
	background: transparent;
	color: inherit;
}

table.tsbq-highscore.tsbq-highscore thead th {
	background: var(--tsbq-hs-head-bg);
	color: var(--tsbq-hs-head-fg);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

table.tsbq-highscore.tsbq-highscore tbody tr:nth-child(even) td {
	background: var(--tsbq-hs-row-alt);
}

table.tsbq-highscore.tsbq-highscore tbody tr + tr td {
	border-top: 1px solid rgba(34, 48, 63, .06);
}

table.tsbq-highscore.tsbq-highscore .tsbq-col-rank {
	width: 76px;
}

table.tsbq-highscore.tsbq-highscore .tsbq-col-name {
	font-weight: 700;
}

table.tsbq-highscore.tsbq-highscore .tsbq-col-score,
table.tsbq-highscore.tsbq-highscore .tsbq-col-correct {
	text-align: right;
	white-space: nowrap;
}

table.tsbq-highscore.tsbq-highscore td.tsbq-col-score {
	font-weight: 800;
	color: var(--tsbq-hs-primary);
}

table.tsbq-highscore.tsbq-highscore td.tsbq-col-correct,
table.tsbq-highscore.tsbq-highscore td.tsbq-col-date {
	color: var(--tsbq-hs-muted);
	font-size: 14px;
}

table.tsbq-highscore.tsbq-highscore .tsbq-col-date {
	white-space: nowrap;
}

table.tsbq-highscore.tsbq-highscore .tsbq-rank-badge {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	background: rgba(34, 48, 63, .07);
	color: var(--tsbq-hs-fg);
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-1 .tsbq-rank-badge,
table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-2 .tsbq-rank-badge,
table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-3 .tsbq-rank-badge {
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 3px 8px -3px rgba(0, 0, 0, .35);
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-1 .tsbq-rank-badge {
	background: linear-gradient(145deg, #FFE08A 0%, #F2B600 55%, #C88F00 100%);
	color: #3A2A00;
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-2 .tsbq-rank-badge {
	background: linear-gradient(145deg, #F4F6F8 0%, #BCC5CF 55%, #8E99A6 100%);
	color: #27323D;
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-rank-3 .tsbq-rank-badge {
	background: linear-gradient(145deg, #F6C9A0 0%, #CD7F32 55%, #9B5A1E 100%);
	color: #3B1E05;
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-highscore-me td {
	background: var(--tsbq-hs-me);
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-highscore-me td:first-child {
	box-shadow: inset 4px 0 0 var(--tsbq-hs-accent);
}

table.tsbq-highscore.tsbq-highscore tr.tsbq-highscore-empty td {
	padding: 28px 16px;
	text-align: center;
	color: var(--tsbq-hs-muted);
}

@media (max-width: 560px) {
	table.tsbq-highscore.tsbq-highscore {
		font-size: 15px;
	}

	table.tsbq-highscore.tsbq-highscore th,
	table.tsbq-highscore.tsbq-highscore td {
		padding: 11px 10px;
	}

	table.tsbq-highscore.tsbq-highscore .tsbq-col-date {
		display: none;
	}

	table.tsbq-highscore.tsbq-highscore .tsbq-col-rank {
		width: 52px;
	}
}

@media (max-width: 380px) {
	table.tsbq-highscore.tsbq-highscore .tsbq-col-correct {
		display: none;
	}
}

/* ==================================================================== *
 * 13. Bewegung reduzieren
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.tsbq *,
	.tsbq *::before,
	.tsbq *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.tsbq .tsbq-next-auto {
		display: none;
	}

	.tsbq .tsbq-banner.is-shown {
		transform: rotate(-3deg);
	}
}

@media (forced-colors: active) {
	.tsbq .tsbq-tile.tsbq-tile,
	.tsbq .tsbq-btn.tsbq-btn {
		border: 2px solid ButtonText;
	}

	.tsbq .tsbq-answers.is-revealed .tsbq-tile.is-correct {
		border-width: 4px;
	}
}

/* ==================================================================== *
 * 12. Fallbacks für ältere Safari-Versionen (iOS < 16.2 / < 15)
 * ==================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.tsbq {
		--tsbq-btn-hover: var(--tsbq-btn-bg);
		--tsbq-ghost-border: rgba(0, 60, 115, .3);
		--tsbq-me-bg: #EAF1F8;
	}

	.tsbq.tsbq-design-theme {
		--tsbq-stage-bg: linear-gradient(160deg, #E6EDF4 0%, #F6F8FB 70%);
		--tsbq-media-bg: #F2F5F9;
		--tsbq-me-bg: #EAF1F8;
	}

	.tsbq.tsbq-design-tsb {
		--tsbq-btn-hover: #C10016;
		--tsbq-ghost-border: rgba(0, 60, 115, .28);
		--tsbq-me-bg: #EAF1F8;
	}

	.tsbq.tsbq-design-kahoot {
		--tsbq-btn-hover: #EFE7FB;
		--tsbq-ghost-border: rgba(255, 255, 255, .5);
		--tsbq-me-bg: rgba(255, 255, 255, .24);
	}
}

@supports not (aspect-ratio: 1 / 1) {
	.tsbq .tsbq-hero {
		height: 0;
		max-height: none;
		padding-top: 56.25%;
	}

	.tsbq .tsbq-hero.tsbq-hero-empty {
		height: auto;
		padding-top: 0;
	}
}

/* ==================================================================== *
 * 13. Startbildschirm / Portal  [tsb_quiz_portal]
 * ==================================================================== */
html.tsbq-locked,
body.tsbq-locked {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.tsbq.tsbq-portal {
	--tsbq-pbtn-bg: rgba(34, 48, 63, .07);
	--tsbq-pbtn-bg-hover: rgba(34, 48, 63, .13);
	--tsbq-portal-max: 1120px;
	--tsbq-lvl-radius: 24px;
	max-width: none;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: var(--tsbq-stage-bg);
	color: var(--tsbq-stage-fg);
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
}

.tsbq.tsbq-portal.is-away {
	min-height: 0;
	height: 0;
}

.tsbq.tsbq-design-tsb.tsbq-portal,
.tsbq.tsbq-design-kahoot.tsbq-portal {
	--tsbq-pbtn-bg: rgba(255, 255, 255, .14);
	--tsbq-pbtn-bg-hover: rgba(255, 255, 255, .24);
}

/* Vollbild-Ebene (direkt unter <body>) */
.tsbq.tsbq-portal.tsbq-portal-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.tsbq.tsbq-portal-layer:fullscreen {
	width: 100%;
	height: 100%;
}

.tsbq .tsbq-portal-shell {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding:
		max(14px, env(safe-area-inset-top))
		max(16px, env(safe-area-inset-right))
		max(24px, env(safe-area-inset-bottom))
		max(16px, env(safe-area-inset-left));
}

.tsbq.tsbq-portal-layer .tsbq-portal-shell {
	min-height: 100%;
}

.tsbq.tsbq-design-tsb .tsbq-portal-shell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #E2001A 0 96px, rgba(255, 255, 255, .16) 96px);
}

/* Kopfleiste */
.tsbq .tsbq-portal-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: var(--tsbq-portal-max);
	min-height: 48px;
	margin: 0 auto;
}

.tsbq .tsbq-portal-brand {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsbq-stage-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsbq .tsbq-portal-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.tsbq .tsbq-pbtn.tsbq-pbtn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--tsbq-pbtn-bg);
	color: var(--tsbq-stage-fg);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color .15s ease;
}

.tsbq .tsbq-pbtn.tsbq-pbtn:hover {
	background: var(--tsbq-pbtn-bg-hover);
	color: var(--tsbq-stage-fg);
}

.tsbq .tsbq-pbtn.tsbq-pbtn[hidden] {
	display: none;
}

.tsbq .tsbq-pbtn-close.tsbq-pbtn {
	padding: 0;
	width: 44px;
}

.tsbq .tsbq-pbtn .tsbq-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.tsbq .tsbq-pbtn:focus-visible,
.tsbq .tsbq-level:focus-visible,
.tsbq .tsbq-qcard:focus-visible {
	outline: 3px solid var(--tsbq-focus);
	outline-offset: 3px;
}

/* Inhalt */
.tsbq .tsbq-portal-body {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--tsbq-portal-max);
	margin: 0 auto;
	padding: clamp(16px, 4vh, 48px) 0 0;
}

.tsbq .tsbq-portal-view:focus,
.tsbq .tsbq-portal-title:focus {
	outline: none;
}

.tsbq .tsbq-portal-eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tsbq-eyebrow);
}

.tsbq h2.tsbq-portal-title {
	margin: 0;
	font-family: inherit;
	text-transform: none;
	font-size: clamp(32px, calc(var(--tsbq-cw, 1000px) * .058), 60px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--tsbq-stage-fg);
}

.tsbq .tsbq-portal-sub {
	max-width: 46em;
	margin: 12px 0 0;
	font-size: clamp(16px, calc(var(--tsbq-cw, 1000px) * .018), 19px);
	color: var(--tsbq-stage-muted);
}

.tsbq .tsbq-portal-levels {
	text-align: center;
}

.tsbq .tsbq-portal-levels .tsbq-portal-sub {
	margin-left: auto;
	margin-right: auto;
}

/* Gürtel-Streifen */
.tsbq .tsbq-belt {
	display: flex;
	overflow: hidden;
}

.tsbq .tsbq-belt-seg {
	flex: 1 1 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

/* Stufen-Karten */
.tsbq .tsbq-level-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(24px, 5vh, 48px);
	text-align: left;
}

.tsbq .tsbq-level.tsbq-level {
	--lvl: #1F9A4B;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 280px;
	margin: 0;
	padding: 40px 28px 28px;
	border: 1px solid var(--tsbq-card-border);
	border-radius: var(--tsbq-lvl-radius);
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	box-shadow: var(--tsbq-card-shadow);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	overflow: hidden;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform .2s var(--tsbq-ease), box-shadow .2s ease;
}

.tsbq .tsbq-level.tsbq-level-fortgeschritten {
	--lvl: #1D5FB8;
}

.tsbq .tsbq-level.tsbq-level-meister {
	--lvl: #D4AF37;
	background: linear-gradient(160deg, #26262A 0%, #111113 100%);
	color: #FFFFFF;
	border-color: rgba(212, 175, 55, .35);
}

.tsbq .tsbq-level.tsbq-level:hover {
	transform: translateY(-3px);
	background-color: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
}

.tsbq .tsbq-level.tsbq-level-meister:hover {
	color: #FFFFFF;
}

.tsbq .tsbq-level:active {
	transform: translateY(0);
}

.tsbq .tsbq-belt-level {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
}

.tsbq .tsbq-level-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: currentColor;
	opacity: .08;
}

.tsbq .tsbq-level-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding-right: 8px;
}

.tsbq .tsbq-level-label {
	font-size: clamp(24px, calc(var(--tsbq-cw, 1000px) * .028), 32px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.tsbq .tsbq-level-desc {
	font-size: 15px;
	opacity: .78;
}

.tsbq .tsbq-level-count {
	align-self: flex-start;
	margin-top: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .13);
	font-size: 13px;
	font-weight: 700;
}

.tsbq .tsbq-level-go,
.tsbq .tsbq-qcard-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--lvl, var(--tsbq-btn-bg));
	color: #FFFFFF;
	transition: transform .2s var(--tsbq-ease);
}

.tsbq .tsbq-level-go {
	margin-top: 22px;
	align-self: flex-end;
}

.tsbq .tsbq-level-meister .tsbq-level-go {
	color: #141414;
}

.tsbq .tsbq-level-go .tsbq-icon,
.tsbq .tsbq-qcard-go .tsbq-icon {
	width: 22px;
	height: 22px;
}

.tsbq .tsbq-level:hover .tsbq-level-go,
.tsbq .tsbq-qcard:hover .tsbq-qcard-go {
	transform: translateX(3px);
}

/* Quiz-Karten */
.tsbq .tsbq-quiz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	margin-top: 28px;
}

.tsbq .tsbq-qcard.tsbq-qcard {
	--lvl: var(--tsbq-btn-bg);
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 104px;
	margin: 0;
	padding: 18px 18px 18px 34px;
	border: 1px solid var(--tsbq-card-border);
	border-radius: 18px;
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	box-shadow: var(--tsbq-card-shadow);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	overflow: hidden;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform .2s var(--tsbq-ease);
}

.tsbq .tsbq-qcard.tsbq-qcard:hover {
	transform: translateY(-2px);
	background-color: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
}

.tsbq .tsbq-belt-card {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 14px;
	flex-direction: column;
}

.tsbq .tsbq-qcard-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.tsbq .tsbq-qcard-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}

.tsbq .tsbq-qcard-intro {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	opacity: .75;
}

.tsbq .tsbq-qcard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tsbq .tsbq-qcard-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .13);
	font-size: 13px;
	font-weight: 700;
}

.tsbq .tsbq-qcard-chip .tsbq-icon {
	width: 14px;
	height: 14px;
}

.tsbq .tsbq-qcard-go {
	width: 40px;
	height: 40px;
}

.tsbq .tsbq-portal-empty {
	padding: 24px;
	border-radius: 18px;
	background: var(--tsbq-pbtn-bg);
	color: var(--tsbq-stage-fg);
}

/* Quiz im Portal: Bühne geht im Portal-Hintergrund auf */
.tsbq .tsbq-portal-quiz {
	width: 100%;
}

.tsbq .tsbq-portal-quiz > .tsbq {
	max-width: 880px;
}

.tsbq .tsbq-portal-quiz .tsbq-stage {
	background: transparent;
	padding: 0;
	border-radius: 0;
	overflow: visible;
}

.tsbq .tsbq-portal-quiz .tsbq-stage::before {
	display: none;
}

.tsbq .tsbq-portal-loading {
	padding: 48px 0;
	text-align: center;
	font-weight: 700;
	color: var(--tsbq-stage-muted);
}

.tsbq[data-view="quiz"] .tsbq-portal-body {
	justify-content: flex-start;
	padding-top: 8px;
}

.tsbq .tsbq-result-actions .tsbq-other .tsbq-icon {
	width: 18px;
	height: 18px;
}

/* --- Portal: Kahoot --- */
.tsbq.tsbq-design-kahoot .tsbq-level.tsbq-level {
	border: 0;
	color: #FFFFFF;
	box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22), 0 14px 30px -14px rgba(20, 0, 50, .7);
}

.tsbq.tsbq-design-kahoot .tsbq-level.tsbq-level-anfaenger {
	--lvl: #FFFFFF;
	background: #26890C;
}

.tsbq.tsbq-design-kahoot .tsbq-level.tsbq-level-fortgeschritten {
	--lvl: #FFFFFF;
	background: #1368CE;
}

.tsbq.tsbq-design-kahoot .tsbq-level.tsbq-level-meister {
	--lvl: #FFD166;
	background: #1A1A1A;
}

.tsbq.tsbq-design-kahoot .tsbq-level.tsbq-level:hover {
	color: #FFFFFF;
}

.tsbq.tsbq-design-kahoot .tsbq-level-anfaenger:hover {
	background-color: #26890C;
}

.tsbq.tsbq-design-kahoot .tsbq-level-fortgeschritten:hover {
	background-color: #1368CE;
}

.tsbq.tsbq-design-kahoot .tsbq-level .tsbq-level-go {
	color: #46178F;
}

.tsbq.tsbq-design-kahoot .tsbq-level .tsbq-level-count {
	background: rgba(255, 255, 255, .2);
}

.tsbq.tsbq-design-kahoot .tsbq-level .tsbq-level-num {
	opacity: .2;
}

.tsbq.tsbq-design-kahoot .tsbq-qcard.tsbq-qcard {
	--lvl: #46178F;
	border: 0;
	background: #FFFFFF;
	color: #1A1A1A;
	box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), 0 12px 26px -14px rgba(20, 0, 50, .7);
}

.tsbq.tsbq-design-kahoot .tsbq-qcard.tsbq-qcard:hover {
	background-color: #FFFFFF;
	color: #1A1A1A;
}

.tsbq.tsbq-design-kahoot h2.tsbq-portal-title {
	text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

/* --- Portal: TSB --- */
.tsbq.tsbq-design-tsb .tsbq-portal-eyebrow {
	color: rgba(255, 255, 255, .78);
}

.tsbq.tsbq-design-tsb .tsbq-qcard.tsbq-qcard {
	--lvl: #E2001A;
}

.tsbq.tsbq-design-tsb .tsbq-level.tsbq-level-anfaenger,
.tsbq.tsbq-design-tsb .tsbq-level.tsbq-level-fortgeschritten {
	--lvl: #003C73;
}

.tsbq.tsbq-design-tsb .tsbq-level.tsbq-level-meister {
	--lvl: #E2001A;
	border-color: rgba(255, 255, 255, .12);
}

.tsbq.tsbq-design-tsb .tsbq-level-meister .tsbq-level-go {
	color: #FFFFFF;
}

/* --- Portal: schmal (Handy) --- */
.tsbq.tsbq-portal.tsbq-sm .tsbq-portal-body {
	justify-content: flex-start;
	padding-top: 18px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-pbtn-label {
	display: none;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-pbtn.tsbq-pbtn {
	padding: 0 12px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-pbtn-back.tsbq-pbtn {
	padding: 0 16px 0 12px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-portal-levels {
	text-align: left;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 22px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level.tsbq-level {
	flex-direction: row;
	align-items: center;
	min-height: 120px;
	padding: 18px 16px 18px 32px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-belt-level {
	right: auto;
	bottom: 0;
	width: 14px;
	height: auto;
	flex-direction: column;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-num {
	display: none;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-text {
	gap: 4px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-label {
	font-size: 23px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-desc {
	font-size: 14px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-count {
	margin-top: 2px;
	padding: 3px 10px;
	font-size: 12px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-level-go {
	margin: 0;
	align-self: center;
	width: 42px;
	height: 42px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-quiz-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 20px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-qcard.tsbq-qcard {
	min-height: 88px;
	padding: 14px 14px 14px 30px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-qcard-title {
	font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.tsbq .tsbq-level.tsbq-level,
	.tsbq .tsbq-qcard.tsbq-qcard,
	.tsbq .tsbq-level-go,
	.tsbq .tsbq-qcard-go {
		transition: none;
	}
}

/* --- Portal: Quiz-Karten mit Vorschaubild (Grid) --- */
.tsbq .tsbq-quiz-grid.tsbq-quiz-grid-media {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	align-items: stretch;
}

.tsbq .tsbq-qcard.tsbq-qcard-has-media {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 0;
	padding: 0;
	border-radius: 18px;
	transition: transform .2s var(--tsbq-ease), box-shadow .2s var(--tsbq-ease);
}

.tsbq .tsbq-qcard.tsbq-qcard-has-media:hover {
	transform: translateY(-4px);
	box-shadow: var(--tsbq-card-shadow), 0 18px 32px -18px rgba(0, 0, 0, .45);
}

.tsbq .tsbq-qcard.tsbq-qcard-has-media:focus-visible {
	outline: 3px solid var(--tsbq-focus);
	outline-offset: 3px;
}

.tsbq .tsbq-qcard-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: rgba(127, 127, 127, .13);
	background-size: cover;
}

.tsbq .tsbq-qcard-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform .4s var(--tsbq-ease);
}

.tsbq .tsbq-qcard-has-media:hover .tsbq-qcard-media img {
	transform: scale(1.04);
}

.tsbq .tsbq-qcard-has-media .tsbq-belt-card {
	position: static;
	flex-direction: row;
	width: 100%;
	height: 8px;
	flex: 0 0 auto;
}

.tsbq .tsbq-qcard-body {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-qcard.tsbq-qcard-has-media {
	padding: 0;
	min-height: 0;
}

.tsbq.tsbq-portal.tsbq-sm .tsbq-qcard-body {
	padding: 14px 14px 16px;
}

@media (max-width: 480px) {
	.tsbq .tsbq-quiz-grid.tsbq-quiz-grid-media {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsbq .tsbq-qcard.tsbq-qcard-has-media,
	.tsbq .tsbq-qcard-media img {
		transition: none;
	}

	.tsbq .tsbq-qcard.tsbq-qcard-has-media:hover,
	.tsbq .tsbq-qcard-has-media:hover .tsbq-qcard-media img {
		transform: none;
	}
}

/* ==================================================================== *
 * 14. Erklärung, Übungsmodus, Ton, Teilen
 * ==================================================================== */
.tsbq {
	--tsbq-expl-bg: color-mix(in srgb, var(--tsbq-primary) 6%, var(--tsbq-card-bg));
	--tsbq-expl-border: var(--tsbq-primary);
	--tsbq-expl-fg: var(--tsbq-card-fg);
}

.tsbq.tsbq-design-kahoot {
	--tsbq-expl-bg: rgba(255, 255, 255, .14);
	--tsbq-expl-border: #FFD166;
}

/* Erklärung nach der Antwort */
.tsbq .tsbq-explanation {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: var(--tsbq-tile-radius);
	border-left: 4px solid var(--tsbq-expl-border);
	background: var(--tsbq-expl-bg);
	color: var(--tsbq-expl-fg);
	animation: tsbq-enter .35s var(--tsbq-ease) both;
}

.tsbq .tsbq-explanation-icon {
	flex: none;
	display: inline-flex;
	color: var(--tsbq-expl-border);
}

.tsbq .tsbq-explanation-icon .tsbq-icon {
	width: 22px;
	height: 22px;
}

.tsbq .tsbq-explanation-body {
	min-width: 0;
}

.tsbq .tsbq-explanation .tsbq-explanation-label {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-explanation .tsbq-explanation-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.tsbq .tsbq-footer.tsbq-footer-end {
	justify-content: flex-end;
}

/* Kopfzeile: rechte Gruppe mit Punkten und Ton-Schalter */
.tsbq .tsbq-topbar-end {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.tsbq .tsbq-mute.tsbq-mute {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	box-shadow: 0 0 0 1px var(--tsbq-line), 0 2px 8px -2px rgba(16, 32, 56, .14);
	cursor: pointer;
	line-height: 1;
	transition: transform .15s var(--tsbq-ease), opacity .15s;
}

.tsbq .tsbq-mute.tsbq-mute:hover,
.tsbq .tsbq-mute.tsbq-mute:focus {
	background: var(--tsbq-card-bg);
	color: var(--tsbq-card-fg);
	transform: scale(1.06);
}

.tsbq .tsbq-mute.tsbq-mute:focus-visible {
	outline: 3px solid var(--tsbq-focus);
	outline-offset: 2px;
}

.tsbq .tsbq-mute.is-muted {
	opacity: .7;
}

.tsbq .tsbq-mute .tsbq-icon {
	width: 20px;
	height: 20px;
}

/* Übungsmodus-Badge */
.tsbq .tsbq-practice-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 5px 12px 5px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tsbq-stage-fg) 10%, transparent);
	color: var(--tsbq-stage-fg);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.tsbq .tsbq-practice-badge .tsbq-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.tsbq .tsbq-card .tsbq-practice-badge {
	margin: 0 0 10px;
	background: var(--tsbq-chip-bg);
	color: var(--tsbq-chip-fg);
}

.tsbq .tsbq-card-practice {
	text-align: center;
}

.tsbq .tsbq-practice-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 18px 0 22px;
}

.tsbq .tsbq-practice-num {
	font-size: clamp(40px, 10vw, 60px);
	font-weight: 800;
	line-height: 1;
	color: var(--tsbq-heading);
	font-variant-numeric: tabular-nums;
}

.tsbq .tsbq-practice-text {
	font-size: 16px;
	font-weight: 600;
	color: var(--tsbq-muted);
}

.tsbq .tsbq-result-actions .tsbq-practice-btn,
.tsbq .tsbq-result-actions .tsbq-share-btn {
	white-space: normal;
}

/* Hinweis-Toast (Teilen) */
.tsbq .tsbq-toast {
	position: fixed;
	left: 50%;
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 2147483001;
	max-width: calc(100vw - 32px);
	padding: 12px 18px;
	border-radius: 12px;
	background: #1B2633;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
	transform: translateX(-50%);
	animation: tsbq-toast 3.6s var(--tsbq-ease) both;
	pointer-events: none;
}

@keyframes tsbq-toast {
	0% { opacity: 0; transform: translate(-50%, 12px); }
	8%, 88% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, 0); }
}

@media (min-width: 600px) {
	.tsbq .tsbq-explanation .tsbq-explanation-text {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsbq .tsbq-explanation,
	.tsbq .tsbq-toast {
		animation: none;
	}

	.tsbq .tsbq-mute.tsbq-mute:hover,
	.tsbq .tsbq-mute.tsbq-mute:focus {
		transform: none;
	}
}

/* ==================================================================== *
 * Seitenmodus: Quiz füllt den Viewport (eigene Quiz-Seite)
 * ==================================================================== */
.tsbq.tsbq-pagemode {
	max-width: none;
	width: 100%;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
}

.tsbq.tsbq-pagemode .tsbq-stage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--tsbq-pagebar-h, 0px));
	min-height: calc(100dvh - var(--tsbq-pagebar-h, 0px));
	border-radius: 0;
	padding:
		max(12px, env(safe-area-inset-top))
		max(12px, env(safe-area-inset-right))
		max(16px, env(safe-area-inset-bottom))
		max(12px, env(safe-area-inset-left));
}

.tsbq.tsbq-pagemode .tsbq-inner {
	width: 100%;
	max-width: 820px;
}

/* Im Spiel: Topbar oben, Frage darunter – nicht vertikal zentriert springen. */
.tsbq.tsbq-pagemode .tsbq-stage:has(.tsbq-game) {
	justify-content: flex-start;
}

.tsbq.tsbq-pagemode .tsbq-game {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--tsbq-pagebar-h, 0px) - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
}

/* Frage + Antworten möglichst ohne Scrollen auf einen Bildschirm */
.tsbq.tsbq-pagemode .tsbq-hero {
	max-height: min(34dvh, 360px);
}

.tsbq.tsbq-pagemode .tsbq-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tsbq.tsbq-pagemode .tsbq-pm-exit {
	flex: 0 0 auto;
}

.tsbq.tsbq-pagemode .tsbq-pm-finish {
	text-align: center;
}

.tsbq.tsbq-pagemode .tsbq-pm-finish .tsbq-result-meta {
	justify-content: center;
	margin-top: 16px;
}

.tsbq.tsbq-pagemode .tsbq-pm-loading {
	justify-content: center;
	min-height: 48px;
	font-size: 16px;
}

.tsbq .tsbq-pm-skip {
	margin-top: 12px;
}

.tsbq .tsbq-pm-skip .tsbq-icon {
	width: 18px;
	height: 18px;
}

@media (min-width: 900px) {
	.tsbq.tsbq-pagemode .tsbq-stage {
		padding-left: max(32px, env(safe-area-inset-left));
		padding-right: max(32px, env(safe-area-inset-right));
	}
}

/* Vollbild auf <html>: Hintergrund des Dokuments nicht schwarz lassen. */
html:fullscreen {
	background: #FFFFFF;
}

/* ==================================================================== *
 * Highscore-Seite: Ergebniskarte „Dein Ergebnis"
 * ==================================================================== */
.tsbq .tsbq-hspage-result:empty {
	display: none;
}

.tsbq .tsbq-hspage-result {
	margin-bottom: clamp(16px, 3vw, 28px);
}

.tsbq .tsbq-hsr-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(20px, 5vw, 36px) clamp(16px, 4vw, 32px);
	border-radius: var(--tsbq-stage-radius);
	background: var(--tsbq-stage-bg);
	color: var(--tsbq-stage-fg);
	box-shadow: var(--tsbq-card-shadow);
	text-align: center;
}

.tsbq.tsbq-design-tsb .tsbq-hsr-card,
.tsbq.tsbq-design-kahoot .tsbq-hsr-card {
	--tsbq-ghost-fg: #FFFFFF;
	--tsbq-ghost-border: rgba(255, 255, 255, .55);
	--tsbq-chip-bg: rgba(255, 255, 255, .14);
	--tsbq-chip-fg: #FFFFFF;
	--tsbq-focus: #FFD166;
}

.tsbq.tsbq-design-tsb .tsbq-hsr-card {
	--tsbq-eyebrow: rgba(255, 255, 255, .82);
}

.tsbq.tsbq-design-tsb .tsbq-hsr-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: #E2001A;
	z-index: -1;
}

.tsbq .tsbq-hsr-eyebrow {
	margin-bottom: 4px;
}

.tsbq h2.tsbq-hsr-score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 12px;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: 1;
	outline: none;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
}

.tsbq .tsbq-hsr-num {
	font-size: clamp(56px, 16vw, 104px);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--tsbq-heading);
}

.tsbq.tsbq-design-tsb .tsbq-hsr-num {
	color: #FFFFFF;
}

.tsbq .tsbq-hsr-unit {
	font-size: clamp(18px, 4vw, 24px);
	font-weight: 700;
	color: var(--tsbq-stage-muted);
}

.tsbq .tsbq-hsr-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	margin-top: 16px;
}

.tsbq .tsbq-hsr-correct,
.tsbq .tsbq-hsr-rank,
.tsbq .tsbq-hsr-practice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.tsbq .tsbq-hsr-correct {
	background: var(--tsbq-chip-bg);
	color: var(--tsbq-chip-fg);
}

.tsbq .tsbq-hsr-rank {
	background: var(--tsbq-primary);
	color: #FFFFFF;
}

.tsbq.tsbq-design-tsb .tsbq-hsr-rank {
	background: #E2001A;
}

.tsbq.tsbq-design-kahoot .tsbq-hsr-rank {
	background: #FFFFFF;
	color: #46178F;
}

.tsbq .tsbq-hsr-card.tsbq-rank-1 .tsbq-hsr-rank { background: var(--tsbq-gold); color: #3B2A00; }
.tsbq .tsbq-hsr-card.tsbq-rank-2 .tsbq-hsr-rank { background: var(--tsbq-silver); color: #232B35; }
.tsbq .tsbq-hsr-card.tsbq-rank-3 .tsbq-hsr-rank { background: var(--tsbq-bronze); color: #2E1806; }

.tsbq .tsbq-hsr-card.is-podium .tsbq-hsr-rank {
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
	animation: tsbq-pop .5s var(--tsbq-ease) .2s both;
}

.tsbq .tsbq-hsr-practice {
	margin-top: 10px;
	padding: 6px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tsbq-stage-muted);
	border: 1px dashed currentColor;
}

.tsbq .tsbq-hsr-correct .tsbq-icon,
.tsbq .tsbq-hsr-rank .tsbq-icon,
.tsbq .tsbq-hsr-practice .tsbq-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.tsbq .tsbq-hsr-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 22px;
}

.tsbq .tsbq-hsr-actions .tsbq-btn.tsbq-btn {
	width: 100%;
	text-decoration: none;
}

.tsbq .tsbq-hsr-actions .tsbq-btn.tsbq-btn:focus-visible {
	outline: 3px solid var(--tsbq-focus);
	outline-offset: 3px;
}

@media (min-width: 600px) {
	.tsbq .tsbq-hsr-actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.tsbq .tsbq-hsr-actions .tsbq-btn.tsbq-btn {
		width: auto;
	}
}

/* Eigene Zeile in der Bestenliste */
.tsbq table.tsbq-highscore.tsbq-highscore tr.is-you td {
	background: var(--tsbq-hs-me, var(--tsbq-me-bg));
	font-weight: 700;
}

.tsbq table.tsbq-highscore.tsbq-highscore tr.is-you td:first-child {
	box-shadow: inset 4px 0 0 var(--tsbq-hs-accent, var(--tsbq-accent));
}

.tsbq tr.is-you td {
	animation: tsbq-you 1.6s var(--tsbq-ease) .4s 2;
}

.tsbq [data-score-id].is-you:not(tr) {
	background: var(--tsbq-me-bg);
	box-shadow: inset 4px 0 0 var(--tsbq-me-border);
}

@keyframes tsbq-you {
	0%, 100% { filter: none; }
	50% { filter: brightness(.94) saturate(1.3); }
}

@media (prefers-reduced-motion: reduce) {
	.tsbq tr.is-you td,
	.tsbq .tsbq-hsr-card.is-podium .tsbq-hsr-rank {
		animation: none;
	}
}