/* BFT-U Diagnosetest — Bildsprache: Elementkachel des Periodensystems */

.bftu-dt {
	--paper: #FBFAF7;
	--ink: #16202B;
	--ink-soft: #5B6873;
	--rule: #D8D4CA;
	--rule-soft: #EAE7DF;
	--malachit: #0E6E63;
	--malachit-weich: #E3F0ED;
	--permanganat: #6B2D8C;
	--permanganat-weich: #F0E7F6;
	--signal: #A8442A;

	--f-text: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-data: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 0 7.5rem;
}

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

/* Schutz gegen Theme-Vorgaben: viele Themes setzen für Buttons nowrap,
   feste Breiten, Schatten oder Versalien. Das würde den Test zerlegen. */
.bftu-dt button,
.bftu-dt input,
.bftu-dt li {
	white-space: normal !important;
	max-width: 100% !important;
	overflow: visible !important;
	text-overflow: clip !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1.4;
	min-width: 0 !important;
	float: none !important;
	transform: none !important;
}
.bftu-dt ul { list-style: none !important; margin: 0; padding: 0; }
.bftu-dt li::before, .bftu-dt li::marker { content: none !important; }
.bftu-dt p { margin: 0 0 .75rem; }
.bftu-dt button { font: inherit; color: inherit; }

/* ---------- Mikro-Label: gesperrte Versalien wie Elementbeschriftungen ---------- */
.bftu-eyebrow {
	font-family: var(--f-data);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ---------- Kopf mit Fortschritt als Elementreihe ---------- */
.bftu-head {
	position: sticky; top: 0; z-index: 20;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	padding: .6rem .65rem .5rem;
}
.bftu-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.bftu-head-row .bftu-count { font-family: var(--f-data); font-size: .8rem; color: var(--ink-soft); }

.bftu-track {
	display: grid;
	grid-template-columns: repeat(20, minmax(0, 1fr));
	gap: 1px;
	margin-top: .5rem;
}
.bftu-tick {
	height: 22px;
	border: 1px solid var(--rule);
	background: #fff;
	border-radius: 2px;
	padding: 0;
	font-family: var(--f-data);
	font-size: .46rem;
	line-height: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--ink-soft);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.bftu-tick.done { background: var(--malachit); border-color: var(--malachit); color: #fff; }
.bftu-tick.current { outline: 2px solid var(--permanganat); outline-offset: 1px; }
.bftu-tick:focus-visible { outline: 2px solid var(--permanganat); outline-offset: 2px; }

/* ---------- Elementkachel als Aufgabenkopf (Signature) ---------- */
.bftu-cell {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: .85rem;
	align-items: start;
	border: 1.5px solid var(--ink);
	border-radius: 3px;
	padding: .6rem .8rem .65rem;
	margin: 1.1rem .9rem 1rem;
	background: #fff;
}
.bftu-cell-z {
	grid-row: 1 / span 2;
	font-family: var(--f-data);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	padding-top: .1rem;
}
.bftu-cell-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bftu-chip {
	font-family: var(--f-data);
	font-size: .64rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .12rem .38rem;
	border-radius: 2px;
	border: 1px solid var(--rule);
	color: var(--ink-soft);
	white-space: nowrap;
}
.bftu-chip.kb { background: var(--malachit-weich); border-color: #BCDDD6; color: #0A544B; }
.bftu-chip.afb { background: var(--permanganat-weich); border-color: #DCC8E8; color: #57217A; }
.bftu-cell-pts { font-family: var(--f-data); font-size: .64rem; color: var(--ink-soft); margin-left: auto; }
.bftu-cell > .bftu-chip { justify-self: start; margin-top: .38rem; }

/* ---------- Aufgabenkoerper ---------- */
.bftu-body { padding: 0 .9rem; min-width: 0; overflow-wrap: anywhere; }
.bftu-prompt { font-size: 1.06rem; line-height: 1.45; margin-bottom: .5rem; }
.bftu-hint {
	font-size: .86rem; color: var(--ink-soft);
	border-left: 2px solid var(--rule); padding-left: .6rem; margin-bottom: 1rem;
}
.bftu-part-label { font-weight: 600; font-size: .92rem; margin: 1.2rem 0 .5rem; }

/* ---------- Auswahl ---------- */
.bftu-opts { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0 0 .5rem; padding: 0; max-width: 100%; }

.bftu-opt {
	display: flex; gap: .65rem; align-items: flex-start;
	width: 100%; text-align: left; white-space: normal;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: #fff;
	padding: .7rem .8rem;
	cursor: pointer;
	transition: border-color .12s, background .12s;
	min-height: 44px;
}
.bftu-opt:hover { border-color: var(--ink-soft); }
.bftu-opt:focus-visible { outline: 2px solid var(--permanganat); outline-offset: 2px; }
.bftu-opt-key {
	flex: 0 0 auto;
	font-family: var(--f-data);
	font-size: .72rem;
	line-height: 1.25rem;
	width: 1.25rem; height: 1.25rem;
	text-align: center;
	border: 1px solid var(--rule);
	border-radius: 2px;
	color: var(--ink-soft);
	background: var(--paper);
}
.bftu-opt.sel { border-color: var(--malachit); background: var(--malachit-weich); }
.bftu-opt.sel .bftu-opt-key { background: var(--malachit); border-color: var(--malachit); color: #fff; }
.bftu-opt-text { flex: 1 1 0%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }

.bftu-select-note { font-family: var(--f-data); font-size: .7rem; color: var(--ink-soft); margin-bottom: .5rem; }
.bftu-select-note.full { color: var(--malachit); }

/* ---------- Raster (grid) ---------- */
.bftu-grid { display: flex; flex-direction: column; gap: .85rem; }
.bftu-grid-row { border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: .6rem .7rem; }
.bftu-grid-row > h4 { margin: 0 0 .45rem; font-size: .95rem; font-weight: 600; }
.bftu-grid-sub { margin-bottom: .55rem; }
.bftu-grid-sub:last-child { margin-bottom: 0; }
.bftu-grid-sub > .bftu-eyebrow { display: block; margin-bottom: .3rem; }
.bftu-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.bftu-pill {
	border: 1px solid var(--rule); border-radius: 999px; background: #fff;
	padding: .42rem .8rem; cursor: pointer; font-size: .92rem; min-height: 40px;
	max-width: 100%; overflow-wrap: anywhere; text-align: left;
}
.bftu-pill:focus-visible { outline: 2px solid var(--permanganat); outline-offset: 2px; }
.bftu-pill.sel { background: var(--malachit); border-color: var(--malachit); color: #fff; }

/* ---------- Reihenfolge ---------- */
.bftu-order-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .7rem; }
.bftu-slot {
	border: 1px dashed var(--rule); border-radius: 3px; background: #fff;
	min-height: 62px; padding: .35rem .3rem;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
	font-size: .8rem; cursor: pointer;
}
.bftu-slot .bftu-slot-n { font-family: var(--f-data); font-size: .62rem; color: var(--ink-soft); }
.bftu-slot.filled { border-style: solid; border-color: var(--malachit); background: var(--malachit-weich); }
.bftu-slot:focus-visible { outline: 2px solid var(--permanganat); outline-offset: 2px; }

/* ---------- Zuordnung ---------- */
.bftu-assign { display: flex; flex-direction: column; gap: .8rem; }
.bftu-assign-item { border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: .65rem .7rem; }
.bftu-assign-text { margin-bottom: .5rem; font-size: .95rem; overflow-wrap: anywhere; }

/* ---------- Zahleneingabe ---------- */
.bftu-fields { display: flex; flex-direction: column; gap: .6rem; }
.bftu-field { display: flex; align-items: center; gap: .7rem; }
.bftu-field label { flex: 1; font-size: .95rem; }
.bftu-field input {
	flex: 0 0 6.5rem; width: 6.5rem;
	font-family: var(--f-data); font-size: 1.05rem; text-align: center;
	padding: .55rem .4rem;
	border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink);
	min-height: 44px;
}
.bftu-field input:focus { outline: 2px solid var(--permanganat); outline-offset: 1px; border-color: var(--malachit); }

/* ---------- Schalenmodell ---------- */
.bftu-shell-wrap { display: flex; flex-direction: column; gap: .8rem; }
.bftu-shell-svg { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
.bftu-shell-ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.bftu-shell-ring.active { stroke: var(--permanganat); stroke-width: 2.5; }
.bftu-shell-ring.filled { stroke: var(--malachit); }
.bftu-shell-hit { fill: transparent; cursor: pointer; }
.bftu-shell-badge { fill: #fff; stroke: var(--rule); stroke-width: 1.5; }
.bftu-shell-badge.filled { stroke: var(--malachit); }
.bftu-shell-badge.active { stroke: var(--permanganat); stroke-width: 2.5; }
.bftu-shell-num { font-family: var(--f-data); font-size: 15px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.bftu-shell-lbl { font-family: var(--f-data); font-size: 12px; fill: var(--ink-soft); text-anchor: middle; }
.bftu-shell-core { fill: var(--ink); }
.bftu-shell-core-txt { font-family: var(--f-data); font-size: 13px; fill: #fff; text-anchor: middle; font-weight: 600; }
.bftu-shell-pick { border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: .6rem .7rem; }
.bftu-shell-pick > .bftu-eyebrow { display: block; margin-bottom: .5rem; }
.bftu-legend { font-size: .8rem; color: var(--ink-soft); margin: .55rem 0 0; }



.bftu-coach-text { display: block; margin-bottom: .5rem; }

.bftu-coach-ok:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.bftu-btn.pse.pulse { border-color: var(--permanganat); color: var(--permanganat); font-weight: 700; }

/* ---------- Lewis ---------- */
.bftu-lewis-svg { width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.bftu-lewis-atom { font-family: var(--f-data); font-size: 26px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.bftu-lewis-bond { stroke: var(--ink); stroke-width: 2; }
.bftu-lewis-slot { fill: #fff; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 3; cursor: pointer; }
.bftu-lewis-slot.sel { fill: var(--malachit-weich); stroke: var(--malachit); stroke-dasharray: none; }
.bftu-lewis-dot { fill: var(--malachit); pointer-events: none; }

/* ---------- Fusszeile ---------- */
.bftu-coach {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 10px);
	width: max-content;
	max-width: min(19rem, calc(100vw - 2rem));
	background: var(--ink);
	color: var(--paper);
	border-radius: 5px;
	padding: .7rem .8rem .6rem;
	font-size: .88rem;
	line-height: 1.35;
	box-shadow: 0 6px 18px rgba(22, 32, 43, .22);
	z-index: 2;
}
.bftu-coach::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-top-color: var(--ink);
	border-bottom: 0;
}
.bftu-coach > span { display: block; }
.bftu-coach-ok {
	display: block;
	width: fit-content;
	margin-top: .55rem;
	background: transparent;
	color: var(--paper);
	border: 1px solid rgba(251, 250, 247, .55);
	border-radius: 3px;
	padding: .35rem .7rem;
	font-size: .82rem;
	cursor: pointer;
	min-height: 34px;
}
.bftu-coach-ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bftu-coach .bftu-coach-close { position: absolute; top: .2rem; right: .3rem; background: none; border: 0; color: rgba(251,250,247,.7); font-size: 1.1rem; line-height: 1; padding: .25rem .4rem; cursor: pointer; }

.bftu-foot {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	background: var(--paper);
	border-top: 1px solid var(--rule);
	padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: .5rem; align-items: center;
	max-width: 46rem; margin: 0 auto;
}
.bftu-foot > .bftu-btn:first-child { justify-self: start; }
.bftu-foot > .bftu-btn:last-of-type { justify-self: end; }
.bftu-btn {
	border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
	padding: .7rem 1.1rem; cursor: pointer; font-weight: 600; min-height: 46px;
}
.bftu-btn:focus-visible { outline: 2px solid var(--permanganat); outline-offset: 2px; }
.bftu-btn[disabled] { opacity: .35; cursor: default; }
.bftu-btn.primary { background: var(--ink); color: var(--paper); }
.bftu-btn.ghost { border-color: var(--rule); font-weight: 500; }
.bftu-btn.wide { flex: 1; }
.bftu-btn.pse { justify-self: center; font-family: var(--f-data); font-size: .78rem; letter-spacing: .06em; padding: .7rem 1rem; }

/* ---------- PSE-Panel ---------- */
.bftu-sheet {
	position: fixed; inset: auto 0 0 0; z-index: 40;
	background: var(--paper); border-top: 2px solid var(--ink);
	max-height: 78vh; overflow: auto;
	padding: .8rem .9rem calc(1rem + env(safe-area-inset-bottom));
	max-width: 46rem; margin: 0 auto;
	box-shadow: 0 -8px 24px rgba(22,32,43,.14);
}
.bftu-sheet[hidden] { display: none; }
.bftu-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.bftu-pse-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.bftu-pse-el {
	border: 1px solid var(--rule); background: #fff; border-radius: 2px;
	padding: .22rem .1rem .26rem; text-align: center; line-height: 1.15;
}
.bftu-pse-z { font-family: var(--f-data); font-size: .54rem; color: var(--ink-soft); display: block; }
.bftu-pse-sym { font-family: var(--f-data); font-size: .92rem; font-weight: 600; display: block; }
.bftu-pse-m { font-family: var(--f-data); font-size: .5rem; color: var(--ink-soft); display: block; }
.bftu-pse-el.spacer { border: 0; background: transparent; }
.bftu-pse-legend { font-size: .74rem; color: var(--ink-soft); margin-top: .6rem; }
.bftu-pse-cols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-bottom: 3px; }
.bftu-pse-col { font-family: var(--f-data); font-size: .56rem; text-align: center; color: var(--ink-soft); }

/* ---------- Start und Ende ---------- */
.bftu-panel { padding: 1.2rem .9rem; }
.bftu-title { font-size: 1.6rem; line-height: 1.15; margin: .35rem 0 .6rem; font-weight: 700; letter-spacing: -.01em; }
.bftu-lead { color: var(--ink-soft); margin-bottom: 1.2rem; }
.bftu-code-input {
	font-family: var(--f-data); font-size: 1.4rem; letter-spacing: .16em; text-align: center; text-transform: uppercase;
	width: 100%; padding: .8rem .5rem; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; color: var(--ink);
}
.bftu-code-input:focus { outline: 2px solid var(--permanganat); outline-offset: 1px; }
.bftu-code-err {
	color: #7A2F19; background: #FBEEEA; border: 1px solid var(--signal);
	border-radius: 3px; padding: .55rem .7rem; font-size: .9rem; margin-top: .5rem;
}
.bftu-code-err[hidden] { display: none; }
.bftu-facts { list-style: none; padding: 0; margin: 1.2rem 0; border-top: 1px solid var(--rule); }
.bftu-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; }
.bftu-facts .v { font-family: var(--f-data); color: var(--ink-soft); }

.bftu-result-big { font-family: var(--f-data); font-size: 3.2rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.bftu-result-sub { color: var(--ink-soft); margin-top: .3rem; }
.bftu-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: .35rem; margin: 1.2rem 0; }
.bftu-review-cell { border: 1px solid var(--rule); border-radius: 2px; padding: .3rem .2rem; text-align: center; background: #fff; }
.bftu-review-cell .id { font-family: var(--f-data); font-size: .62rem; color: var(--ink-soft); display: block; }
.bftu-review-cell .p { font-family: var(--f-data); font-size: .82rem; font-weight: 600; display: block; }
.bftu-review-cell.full { background: var(--malachit); border-color: var(--malachit); color: #fff; }
.bftu-review-cell.full .id { color: rgba(255,255,255,.75); }
.bftu-review-cell.part { background: var(--malachit-weich); border-color: #BCDDD6; }

.bftu-note { border: 1px solid var(--signal); background: #FBEEEA; color: #7A2F19; padding: .7rem .8rem; border-radius: 3px; font-size: .92rem; }
.bftu-saving { font-family: var(--f-data); font-size: .8rem; color: var(--ink-soft); }

@media (min-width: 40rem) {
	.bftu-dt { font-size: 18px; }
	.bftu-pse-grid, .bftu-pse-cols { gap: 5px; }
	.bftu-order-slots { gap: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bftu-dt * { transition: none !important; animation: none !important; }
}