/* =============================================================
   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;
}
body.testmodus-screen2 #test-haupt {
	overflow-y: auto;
}

/* -------------------------------------------------------------
   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;
	}

	/* 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;
	}
}

/* -------------------------------------------------------------
   Testmodus Desktop: normales MCT-Menü + Footer sichtbar
   ------------------------------------------------------------ */
@media (min-width: 768px) {
	#test-hamburger-btn {
		display: none;
	}
	#test-app {
		height: auto;
	}
	#test-haupt {
		overflow-y: visible;
	}
	#test-buttonleiste {
		position: sticky;
		bottom:   0;
	}
}

/* -------------------------------------------------------------
   App-Grundgerüst
   ------------------------------------------------------------ */
#test-app {
	display:        flex;
	flex-direction: column;
	width:          100%;
	background:     var(--bg-page);
	height: 100vH;
}

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

#test-haupt {
	flex:       1;
	overflow-y: auto;
}

#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);
}

/* 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 {
/*	
	flex-shrink:     0;
	display:         flex;
	justify-content: flex-end;
*/
	
	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;
}





#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;
}