/* =============================================================
   MCT – css/mod_test.css
   Eigenständiges App-Layout, Mobile First
   ============================================================= */

/* -------------------------------------------------------------
   Testmodus: immer ausblenden (alle Geräte)
   ------------------------------------------------------------ */
body.testmodus #feedback-icon {
	display: none;
}

/* Screen 2 (geführter Ablauf): Nav/Footer auf allen Geräten aus */
body.testmodus-screen2 #kopf,
body.testmodus-screen2 #hauptnav,
body.testmodus-screen2 #fuss,
body.testmodus-screen2 #feedback-icon {
	display: none;
}
body.testmodus-screen2 #inhalt {
	padding:   0;
	max-width: none;
	margin:    0;
}
body.testmodus-screen2 #test-app {
	height: 100vh;  /* Fallback für Browser ohne dvh-Unterstützung */
	height: 100dvh; /* folgt der tatsächlich sichtbaren Höhe (Browser-
	                   Chrome ein-/ausgeblendet), siehe Auftrag
	                   "mod_test Viewport" */
}
body.testmodus-screen2 #test-haupt {
	/* overflow bleibt beim neuen, mobile-first geltenden Aufbau unten
	   (display:flex/flex-direction:column/overflow:hidden) - erst die
	   einzelnen Screen-Inhalte (#test-kacheln/#test-screen3-inhalt)
	   scrollen jeweils für sich (siehe dort). Dieselbe Erklärung wie
	   an der Basisregel. */
	overflow: hidden;
}

/* -------------------------------------------------------------
   Testmodus Mobile: auch Header und Nav ausblenden
   ------------------------------------------------------------ */
@media (max-width: 767px) {
	body.testmodus #kopf,
	body.testmodus #hauptnav,
	body.testmodus #fuss {
		display: none;
	}
	body.testmodus #inhalt {
		padding:   0;
		max-width: none;
		margin:    0;
	}
	#test-app {
		height: 100vh;  /* Fallback für Browser ohne dvh-Unterstützung */
		height: 100dvh;
	}

	/* Screen 1: #test-hamburger-btn öffnet dasselbe globale Menü wie
	   #hauptnav-toggle (siehe js/mct.js) – hier nur die Sichtbarkeit
	   von #hauptnav wiederhergestellt, wenn es geöffnet wurde. Auf
	   Screen 2 (body.testmodus-screen2) bleibt die globale Navigation
	   ausdrücklich ausgeblendet. */
	body.testmodus.nav-offen:not(.testmodus-screen2) #hauptnav {
		display: flex;
	}
}

/* -------------------------------------------------------------
   App-Grundgerüst
   ------------------------------------------------------------ */
#test-app {
	display:        flex;
	flex-direction: column;
	width:          100%;
	background:     var(--bg-page);
	height: 100vh;  /* Fallback für Browser ohne dvh-Unterstützung */
	height: 100dvh; /* tatsächlich sichtbare Höhe statt der auf
	                   Smartphones oft größeren "großen" 100vh (siehe
	                   Auftrag "mod_test Viewport") */
}

#test-header {
	flex-shrink: 0;
	background:  var(--bg-panel);
}

/* #test-haupt selbst scrollt nicht mehr - stattdessen scrollt jeweils
   nur der aktuell sichtbare Screen-Inhalt für sich (#test-kacheln bzw.
   #test-screen3-inhalt, siehe unten). Grund: beide Bereiche lagen
   bisher als einfache Geschwister in EINEM gemeinsamen Scrollcontainer
   - ein Screenwechsel per .show()/.hide() ließ dabei die alte
   Scrollposition des vorherigen Inhalts (z.B. eine weit
   heruntergescrollte Themenliste) am neuen, meist kürzeren Inhalt
   (z.B. die aktuelle Frage) stehen, wodurch dieser teilweise oberhalb
   des sichtbaren Bereichs startete. Mit einem eigenen Scrollcontainer
   je Screen beginnt ein gerade erst sichtbar gewordener Bereich immer
   bei Scrollposition 0 (siehe Auftrag "mod_test Viewport").
   min-height:0 ist nötig, damit dieser Flex-Kindbereich innerhalb von
   #test-app tatsächlich schrumpfen und seinen eigenen Inhalt selbst
   scrollen lassen kann, statt den Elternbereich aufzublähen. */
#test-haupt {
	flex:           1;
	min-height:     0;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
}

#test-pfad-nav {
	flex-shrink: 0;
}

#test-kacheln,
#test-screen3-inhalt {
	flex:       1;
	min-height: 0;
	overflow-y: auto;
	/* BUGFIX (Auftrag "mod_test: Themenkacheln feste Größe"): verhindert,
	   dass CSS Grid die (wenigen) Zeilen von #test-kacheln über die
	   verfügbare Höhe verteilt/streckt (align-content ist bei einem
	   Grid-Container standardmäßig "stretch"-artig) - ohne diese Regel
	   wuchsen einzelne Themenkacheln unnötig in die Höhe, sobald
	   #test-kacheln (z.B. auf dem Smartphone durch die feste App-Shell-
	   Höhe von #test-app, siehe unten) mehr Höhe zugewiesen bekam, als
	   die vorhandenen Kacheln tatsächlich brauchen. Für
	   #test-screen3-inhalt (kein Grid-Container) wirkungslos.
	   align-content betrifft dagegen NICHT die einzelne Kachelhöhe
	   innerhalb einer Zeile - das steuert weiterhin align-items
	   (Standard "stretch"), wodurch Kacheln in derselben Zeile weiterhin
	   gleich hoch bleiben, siehe .test-kachel. */
	align-content: start;
}

/* -------------------------------------------------------------
   Testmodus Desktop: normales MCT-Menü + Footer sichtbar
   BUGFIX (Auftrag "mod_test: Themenkacheln feste Größe"): diese Regeln
   standen im Quellcode bisher VOR dem obigen "App-Grundgerüst" - da
   #test-app/#test-haupt dort untenstehend nochmal UNBEDINGT (ohne
   Media Query) height:100vh/100dvh bzw. overflow:hidden setzen, gewann
   bei gleicher Selektor-Spezifität die spätere, unbedingte Regel auch
   auf dem Desktop (reine Reihenfolge-Frage im Stylesheet, siehe Auftrag
   "mod_test Viewport") - #test-app blieb dadurch auch auf großen
   Bildschirmen viewport-hoch, #test-haupt weiterhin überlaufversteckt.
   Das trieb u.a. die Themenkacheln über den beschriebenen Grid-
   Stretch-Effekt in die Höhe. Durch die Verschiebung hierher (NACH dem
   App-Grundgerüst) gewinnt auf dem Desktop wieder korrekt diese
   Rückstellung auf normales Seiten-Layout (auto-Höhe, sichtbarer
   Überlauf, normaler Seiten-Scroll) - unverändert dieselben
   Deklarationen wie zuvor, nur die Position im Stylesheet hat sich
   geändert.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
	#test-hamburger-btn {
		display: none;
	}
	#test-app {
		height: auto;
	}
	#test-haupt {
		overflow-y: visible;
	}
	#test-buttonleiste {
		position: sticky;
		bottom:   0;
	}
}

#test-overlay-bereich {
	position: fixed;
	inset:    0;
	z-index:  1000;
}

/* -------------------------------------------------------------
   Screen 1: Suchfeld + Hamburger
   ------------------------------------------------------------ */
#test-screen1-header {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	padding:     0.5rem 0.75rem;
	border-top:  1px solid var(--border);
}

#test-suche {
	flex:          1;
	padding:       0.5rem 0.75rem;
	border:        1px solid var(--border);
	border-radius: var(--radius);
	background:    var(--bg-page);
	color:         var(--text-base);
	font-size:     1rem;
}
#test-suche:focus {
	outline:      none;
	border-color: var(--btn-bg);
}

#test-hamburger-btn {
	flex-shrink:   0;
	width:         2.5rem;
	height:        2.5rem;
	border:        none;
	background:    transparent;
	font-size:     1.3rem;
	cursor:        pointer;
	color:         var(--text-muted);
	border-radius: var(--radius);
}
#test-hamburger-btn:hover {
	background: var(--bg-hover);
	color:      var(--text-base);
}

/* -------------------------------------------------------------
   Screen 2: Zurück-Button + Titel
   ------------------------------------------------------------ */
#test-screen2-header {
	position:  relative;
	text-align: center;
	min-height: 2.4rem;
	padding:   0.5rem 0.75rem;
	border-top: 1px solid var(--border);
}
#btn-test-screen2-zurueck {
	position:  absolute;
	left:      0.75rem;
	top:       50%;
	transform: translateY(-50%);
	font-size:  0.9rem;
	padding:    0.4rem 0.75rem;
	background: transparent;
	border:     1px solid var(--border);
	color:      var(--text-base);
	cursor:     pointer;
	border-radius: var(--radius);
}
#btn-test-screen2-zurueck:hover { background: var(--bg-hover); }

#test-screen2-titel {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--text-base);
}
#test-screen2-header .test-header-platzhalter {
	position:  absolute;
	right:     0.75rem;
	top:       50%;
	transform: translateY(-50%);
}

#btn-test-screen2-zurueck {
	font-size:  0.9rem;
	padding:    0.4rem 0.75rem;
	background: transparent;
	border:     1px solid var(--border);
	color:      var(--text-base);
	cursor:     pointer;
	border-radius: var(--radius);
}
#btn-test-screen2-zurueck:hover {
	background: var(--bg-hover);
}

#test-screen2-titel {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--text-base);
}

/* -------------------------------------------------------------
   Pfad-Navigation
   ------------------------------------------------------------ */
#test-pfad-nav {
	display:     flex;
	align-items: center;
	flex-wrap:   nowrap;
	overflow-x:  auto;
	gap:         0.15rem;
	padding:     0.4rem 0.75rem;
	font-size:   0.8rem;
	color:       var(--text-muted);
	border-bottom: 1px solid var(--border);
	background:  var(--bg-panel);
	-webkit-overflow-scrolling: touch;
}
#test-pfad-nav::-webkit-scrollbar { display: none; }

.test-pfad-item {
	cursor:        pointer;
	white-space:   nowrap;
	padding:       0.15rem 0.3rem;
	border-radius: var(--radius);
	transition:    var(--transition);
}
.test-pfad-item:hover    { background: var(--bg-hover); color: var(--text-base); }
.test-pfad-aktuell       { color: var(--text-base); font-weight: 600; }
.test-pfad-trenner       { color: var(--text-muted); flex-shrink: 0; }

/* -------------------------------------------------------------
   Kacheln (Screen 1 + Screen 2)
   ------------------------------------------------------------ */
#test-kacheln {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0.6rem;
	padding:               0.75rem;
}

.test-kachel {
	display:        flex;
	flex-direction: column;
	gap:            0.3rem;
	padding:        0.75rem;
	border:         1px solid var(--border);
	border-radius:  var(--radius);
	background:     var(--bg-panel);
	cursor:         pointer;
	transition:     var(--transition);
	min-width:      0;
	-webkit-tap-highlight-color: transparent;
	user-select:    none;
}
.test-kachel:hover,
.test-kachel:active    { background: var(--bg-hover); }

/* Themenkachel: ausgewählt */
.test-kachel-aktiv {
	border-color: var(--btn-bg);
	box-shadow:   0 0 0 2px var(--btn-bg);
}

/* Selbst-Kachel (ganzer Zweig) */
.test-kachel-selbst {
	grid-column: 1 / -1;
	border-left: 3px solid var(--btn-bg);
}
.test-kachel-selbst .test-kachel-name {
	font-weight: 700;
}
.test-kachel-selbst .test-kachel-name::before {
	content:     '▸ ';
	font-weight: 400;
	color:       var(--text-muted);
	font-size:   0.8em;
}

.test-kachel-name {
	font-size:     0.9rem;
	font-weight:   500;
	color:         var(--text-base);
	line-height:   1.3;
	overflow-wrap: break-word;
	word-break:    break-word;
	hyphens:       auto;
}
.test-kachel-count {
	font-size: 0.75rem;
	color:     var(--text-muted);
}

/* Suchergebnisse: einspaltig */
#test-kacheln.test-suche-aktiv {
	grid-template-columns: 1fr;
}
#test-kacheln.test-suche-aktiv .test-kachel-pfad {
	white-space:   normal;
	overflow:      visible;
	text-overflow: unset;
}
.test-kachel-pfad {
	font-size:     0.7rem;
	color:         var(--text-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.test-kacheln-leer {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--text-muted);
	padding:     2rem 1rem;
	font-size:   0.95rem;
}

/* -------------------------------------------------------------
   Optionskacheln (Screen 2)
   ------------------------------------------------------------ */
.test-opt-kachel {
	gap: 0.2rem;
}

.test-opt-icon {
	font-size:   1.4rem;
	line-height: 1;
}

.test-opt-label {
	font-size:   0.75rem;
	color:       var(--text-muted);
	font-weight: 400;
}

.test-opt-state {
	font-size:   0.9rem;
	font-weight: 600;
	color:       var(--text-base);
}

/* Zustandsoptik über data-opt-wert (leicht per CSS anpassbar) */
.test-opt-kachel[data-opt-wert="deaktiviert"] .test-opt-state,
.test-opt-kachel[data-opt-wert="privat"]      .test-opt-state {
	color: var(--text-muted);
}

/* Fest vorgegebene, nicht bedienbare Option (z.B. gast, siehe mod_test.js) */
.test-opt-kachel-gesperrt {
	opacity: 0.5;
	cursor:  default;
}
.test-opt-kachel-gesperrt:hover,
.test-opt-kachel-gesperrt:active {
	background: var(--bg-panel);
}

/* Debug-Ausgabe */
#test-debug-ausgabe {
	grid-column:   1 / -1;
	font-size:     0.8rem;
	background:    var(--bg-page);
	border:        1px solid var(--border);
	border-radius: var(--radius);
	padding:       1rem;
	overflow-x:    auto;
	white-space:   pre-wrap;
}

/* -------------------------------------------------------------
   Button-Leiste
   ------------------------------------------------------------ */
#test-buttonleiste {
/*
	display:         flex;
	justify-content: flex-end;
*/
	flex-shrink:     0; /* bleibt in voller Höhe unten im Flex-Layout
	                       von #test-app sichtbar, schrumpft nicht weg
	                       (siehe Auftrag "mod_test Viewport") */
	padding:         0.75rem;
	border-top:      1px solid var(--border);
	background:      var(--bg-panel);
}

#btn-test-weiter {
	padding:   0.75rem 2rem;
	font-size: 1rem;
	float: right;
}
#btn-test-weiter:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}

/* -------------------------------------------------------------
   SuS-Info (nach Kaskadenauswahl)
   ------------------------------------------------------------ */
#test-sus-info {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.5rem 0.75rem;
	font-size:       0.9rem;
	border-bottom:   1px solid var(--border);
}
#test-sus-info-text {
	display:     flex;
	gap:         0.5rem;
	flex-wrap:   wrap;
	align-items: center;
}
#test-sus-info-label  { color: var(--text-muted); font-size: 0.8rem; }
#test-sus-info-name   { font-weight: 600; color: var(--text-base); }
#test-sus-info-klasse { color: var(--text-muted); font-size: 0.85rem; }
#btn-test-sus-wechseln {
	font-size:   0.8rem;
	padding:     0.3rem 0.6rem;
	flex-shrink: 0;
}

/* -------------------------------------------------------------
   Screen 2b: HA/KT Info-Screen
   ------------------------------------------------------------ */
#test-screen2b-header {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	padding:     0.5rem 0.75rem;
	border-top:  1px solid var(--border);
}

#btn-test-screen2b-zurueck {
	font-size:     0.9rem;
	padding:       0.4rem 0.75rem;
	background:    transparent;
	border:        1px solid var(--border);
	color:         var(--text-base);
	cursor:        pointer;
	border-radius: var(--radius);
}
#btn-test-screen2b-zurueck:hover { background: var(--bg-hover); }

#test-screen2b-titel {
	font-size:   1rem;
	font-weight: 600;
	color:       var(--text-base);
}

/* Inhaltsblock */
.test-2b-block {
	padding: 1rem 0.75rem;
	grid-column: 1 / -1;
}

.test-2b-titel {
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--text-base);
	margin:      0 0 0.5rem 0;
}

.test-2b-beschreibung {
	font-size: 0.9rem;
	color:     var(--text-muted);
	margin:    0 0 0.75rem 0;
}

.test-2b-zeit {
	font-size:   0.85rem;
	color:       var(--text-muted);
	margin:      0 0 0.25rem 0;
}

.test-2b-countdown-hinweis {
	font-size: 0.85rem;
	color:     var(--text-base);
	margin:    0 0 0.75rem 0;
}

.test-2b-tabelle {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.9rem;
	margin-top:      0.75rem;
}
.test-2b-tabelle th,
.test-2b-tabelle td {
	padding:       0.4rem 0.5rem;
	text-align:    left;
	border-bottom: 1px solid var(--border);
}
.test-2b-tabelle th {
	color:       var(--text-muted);
	font-weight: 400;
	width:       45%;
}
.test-2b-tabelle td {
	font-weight: 500;
	color:       var(--text-base);
}




/* Screen 3 Statusleiste: echtes links | mitte | rechts */
#test-screen3-header {
	position:   relative;
	text-align: center;
	min-height: 2.4rem;
	padding:    0.5rem 0.75rem;
	border-top: 1px solid var(--border);
}
.test-header-links {
	position:  absolute;
	left:      0.75rem;
	top:       50%;
	transform: translateY(-50%);
}
.test-header-links button {
	font-size: 0.8rem; padding: 0.3rem 0.6rem; background: transparent;
	border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted);
}
.test-header-links button:disabled { opacity: 0.5; cursor: default; }

.test-header-mitte {
	font-size:   0.85rem;
	font-weight: 600;
	color:       var(--text-base);
}
.test-header-rechts {
	position:  absolute;
	right:     0.75rem;
	top:       50%;
	transform: translateY(-50%);
}















.test-3-block { grid-column: 1 / -1; padding: 1rem 0.75rem; }
.test-3-vorspann { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.5rem 0; }
.test-3-frage { font-size: 1.05rem; font-weight: 600; color: var(--text-base); margin: 0 0 1rem 0; }

.test-3-antworten { display: flex; flex-direction: column; gap: 0.5rem; }
.test-3-antwortkarte {
	padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-panel); cursor: pointer; user-select: none;
	-webkit-tap-highlight-color: transparent; transition: var(--transition);
}
.test-3-antwortkarte:hover { background: var(--bg-hover); }
.test-3-antwort-aktiv { border-color: var(--btn-bg); box-shadow: 0 0 0 2px var(--btn-bg); }
.test-3-antwort-keine { border-style: dashed; }

#test-3-ki-bereich, #test-3-problem-bereich { margin-top: 1rem; }
#test-3-ki-antwort {
	margin-top: 0.5rem; padding: 0.75rem; background: var(--bg-page);
	border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem;
}
#test-3-problem-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
#test-3-problem-text { min-height: 4rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); }

/* Statusleiste */
#test-3-statusleiste {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--text-muted);
	border-bottom: 1px solid var(--border); background: var(--bg-panel);
}
#test-3-statusleiste button {
	font-size: 0.8rem; padding: 0.3rem 0.6rem; background: transparent;
	border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted);
}
#test-3-statusleiste button:disabled { opacity: 0.5; cursor: default; }
#test-3-status-mitte { font-weight: 600; color: var(--text-base); }
#test-3-status-rechts { min-width: 1.5rem; }

/* Fragebereich */
#test-3-frage-bereich {
	grid-column: 1 / -1; padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--border);
}
.test-3-vorspann { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem 0; line-height: 1.4; }
.test-3-frage { font-size: 1.05rem; font-weight: 600; color: var(--text-base); margin: 0; line-height: 1.4; }

/* KI- und Problem-Bereich: dezent abgesetzt */
#test-3-ki-bereich, #test-3-problem-bereich {
	grid-column: 1 / -1; margin: 0.5rem 0.75rem; padding: 0.75rem;
	background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
	font-size: 0.9rem;
}
#test-3-ki-bereich hr, #test-3-problem-bereich hr {
	border: none; border-top: 1px solid var(--border); margin: 0.6rem 0;
}
#test-3-ki-hinweis { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
#test-3-ki-eingabe, #test-3-problem-text {
	width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-page); color: var(--text-base); resize: vertical; font-family: inherit;
}
#test-3-ki-antwort {
	margin-top: 0.5rem; padding: 0.6rem; background: var(--bg-page);
	border: 1px solid var(--border); border-radius: var(--radius); line-height: 1.4;
}
.test-3-bereich-aktionen { display: flex; justify-content: space-between; margin-top: 0.6rem; }
.test-3-bereich-aktionen-zentriert { justify-content: center; }
#test-3-problem-status { text-align: center; }
.test-3-bereich-aktionen + #test-3-problem-status { margin-top: 0.6rem; }

/* Antworten – kompakt, kein Hüpfen dank durchgehend sichtbarem Rahmen */
#test-3-antworten { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; }
.test-3-antwortkarte {
	padding: 0.6rem 0.75rem; border: 2px solid transparent; border-radius: var(--radius);
	background: var(--bg-panel); box-shadow: 0 0 0 1px var(--border);
	cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
	transition: var(--transition); line-height: 1.35; overflow-wrap: break-word;
}
.test-3-antwortkarte:hover { background: var(--bg-hover); }
.test-3-antwort-aktiv { border-color: var(--btn-bg); box-shadow: 0 0 0 1px var(--btn-bg); }
.test-3-antworten-trenner { border-top: 1px dashed var(--border); margin: 0.3rem 0; }
.test-3-antwort-keine { font-style: italic; }

/* Sticky-Aktionsleiste: 3 Slots */
#test-buttonleiste.test-buttonleiste-3fach {
	display:    block;
	position:   relative;
	text-align: center;
	min-height: 2.6rem;
}
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-problem-icon {
	float: left;
	background-color: inherit;
	border: 1px solid var(--btn-bg);
	padding: 5px;
	font-size: 120%;
}
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-ki-icon {
	background-color: inherit;
	border: 1px solid var(--btn-bg);
	padding: 5px;
	font-size: 120%;
}
#test-buttonleiste.test-buttonleiste-3fach #btn-test-weiter {
	float: right;
	background-color: inherit;
	border: 1px solid var(--btn-bg);
	padding: 5px;
	font-size: 120%;
}
#test-buttonleiste.test-buttonleiste-3fach #test-3-aktion-mitte {
	display: inline-block;
}
/* Fest vorgegebene, im Gastzugang nicht verfügbare Aktion (siehe mod_test.js) */
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-problem-icon:disabled,
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-ki-icon:disabled {
	opacity: 0.5;
	cursor:  default;
}
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-problem-icon:disabled:hover,
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-ki-icon:disabled:hover {
	background-color: inherit;
}
/* KI-Hilfe ohne Lizenz (sus_frei/gast, siehe mod_test.js:
   test_ki_icon_html()): optisch wie oben, aber bewusst kein echtes
   disabled-Element - bleibt klick-/tapbar, damit der Hinweistext auch
   auf dem Smartphone erreichbar ist (siehe Auftrag) */
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-ki-icon.test-3-aktion-icon-gesperrt {
	opacity: 0.5;
	cursor:  not-allowed;
}
#test-buttonleiste.test-buttonleiste-3fach #btn-test-3-ki-icon.test-3-aktion-icon-gesperrt:hover {
	background-color: inherit;
}





#test-3-ki-eingabe, #test-3-problem-text, #test-3-freitext-eingabe {
	width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-page); color: var(--text-base); resize: vertical; font-family: inherit;
}
#test-3-freitext-eingabe { min-height: 10rem; }


.test-3-antwortkarte { border-left: 15px solid transparent; }

.test-3-marker-richtig { border-left-color: #2e7d32; }
.test-3-marker-falsch  { border-left-color: #c62828; }

.test-3-rahmen-richtig { border-color: #2e7d32; box-shadow: 0 0 0 1px #2e7d32; }
.test-3-rahmen-falsch  { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }


.test-3-kernpunkte-liste { margin: 0.25rem 0; padding-left: 1.25rem; }
.test-3-kernpunkte-liste li { margin-bottom: 0.2rem; }

.test-5-haken {
	text-align: center;
	font-size:  3rem;
	color:      #2e7d32;
	line-height: 1.2;
}
.test-5-herzen {
	text-align: center;
	font-size:  1.3rem;
	margin-top: 1rem;
}
#btn-test-5-fertig {
	margin-left: auto;
}