/* Lernstrecke und Auswertungen im Frontend */

.eu-app {
	--eu-gruen: #2f7d4f;
	--eu-gelb: #b8860b;
	--eu-rot: #b3261e;
	--eu-linie: #dcdcd6;
	--eu-flaeche: #fbfbf9;
	--eu-text: #1e1e1c;
	max-width: 62rem;
	margin: 0 auto;
	color: var(--eu-text);
	font-size: 1rem;
	line-height: 1.55;
}

.eu-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.eu-kopf h2 { margin: 0 0 .2rem; }
.eu-unterzeile { margin: 0; color: #56564f; }

.eu-karte {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.1rem; margin-bottom: .6rem;
	background: var(--eu-flaeche); border: 1px solid var(--eu-linie);
	border-left-width: 5px; border-radius: 6px;
}
.eu-karte.eu-rot { border-left-color: var(--eu-rot); }
.eu-karte.eu-gelb { border-left-color: var(--eu-gelb); }
.eu-karte.eu-gruen { border-left-color: var(--eu-gruen); }
.eu-karte-schmal { padding: .6rem 1.1rem; }
.eu-karte h4 { margin: 0 0 .15rem; font-size: 1.02rem; }
.eu-meta { margin: 0; font-size: .86rem; color: #6a6a62; display: flex; gap: .8rem; flex-wrap: wrap; }

.eu-marker { font-weight: 600; }
.eu-marker-rot { color: var(--eu-rot); }
.eu-marker-gelb { color: var(--eu-gelb); }
.eu-marker-gruen { color: var(--eu-gruen); }

.eu-knopf {
	display: inline-block; padding: .55rem 1.1rem; border: 0; border-radius: 5px;
	background: #1e3a5f; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
	text-decoration: none; white-space: nowrap;
}
.eu-knopf:hover { background: #16304f; color: #fff; }
.eu-knopf-still { background: transparent; color: #1e3a5f; border: 1px solid var(--eu-linie); }
.eu-knopf-still:hover { background: #eef1f5; color: #1e3a5f; }
.eu-knopf-aus { background: #e8e8e2; color: #6a6a62; cursor: default; }
.eu-knopf-gross { font-size: 1.15rem; padding: .9rem 2rem; width: 100%; }

.eu-abschnitt { margin-top: 2.2rem; }
.eu-abschnitt h3 { border-bottom: 1px solid var(--eu-linie); padding-bottom: .3rem; }
.eu-schlicht { list-style: none; padding: 0; }
.eu-schlicht li { padding: .3rem 0; border-bottom: 1px solid var(--eu-linie); }

.eu-tabelle { width: 100%; border-collapse: collapse; }
.eu-tabelle th, .eu-tabelle td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--eu-linie); vertical-align: top; }
.eu-tabelle thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #6a6a62; }

.eu-hinweis { padding: 1rem 1.2rem; background: #f4f2ec; border-left: 4px solid #c9b98a; border-radius: 4px; }

.eu-rueckfrage { padding: .8rem 1rem; background: var(--eu-flaeche); border: 1px solid var(--eu-linie); border-radius: 6px; margin-bottom: .6rem; }
.eu-frage { font-weight: 600; margin: .2rem 0; }
.eu-antwort { margin: .2rem 0; padding-left: .8rem; border-left: 3px solid var(--eu-gruen); }
.eu-rueckfrage textarea { width: 100%; }

/* Kennzahlen */
.eu-kennzahlen { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.eu-kachel { flex: 1 1 8rem; padding: .9rem 1rem; background: var(--eu-flaeche); border: 1px solid var(--eu-linie); border-radius: 6px; }
.eu-kachel.eu-rot { border-color: var(--eu-rot); }
.eu-zahl { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.eu-label { display: block; font-size: .82rem; color: #6a6a62; }

.eu-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* Matrix */
.eu-matrix-huelle { overflow-x: auto; border: 1px solid var(--eu-linie); border-radius: 6px; }
.eu-matrix { border-collapse: collapse; font-size: .85rem; }
.eu-matrix th, .eu-matrix td { border: 1px solid var(--eu-linie); }
.eu-matrix-name { text-align: left; padding: .3rem .6rem; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 500; }
.eu-matrix-modul { height: 13rem; max-height: 13rem; width: 1.6rem; padding: 0; vertical-align: bottom; overflow: hidden; }
.eu-matrix-modul span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); padding: .4rem .2rem; white-space: nowrap; font-weight: 500; font-size: .8rem; }
.eu-zelle { width: 1.6rem; height: 1.6rem; }
.eu-zelle.eu-gruen { background: #cde5d4; }
.eu-zelle.eu-gelb { background: #f2e2b3; }
.eu-zelle.eu-rot { background: #f0c4c1; }
.eu-zelle.eu-leer { background: repeating-linear-gradient(45deg, #fafaf7, #fafaf7 3px, #f0f0ea 3px, #f0f0ea 6px); }

.eu-legende { display: flex; gap: 1rem; align-items: center; font-size: .85rem; color: #6a6a62; flex-wrap: wrap; }
.eu-punkt { display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--eu-linie); vertical-align: middle; margin-right: .2rem; }
.eu-punkt.eu-gruen { background: #cde5d4; }
.eu-punkt.eu-gelb { background: #f2e2b3; }
.eu-punkt.eu-rot { background: #f0c4c1; }
.eu-punkt.eu-leer { background: #f0f0ea; }

.eu-zeile-rot td { background: #fdf3f2; }
.eu-text-rot { color: var(--eu-rot); font-weight: 600; }
.eu-luecken { margin: 0; padding-left: 1.1rem; color: var(--eu-rot); font-size: .88rem; }
.eu-pruefkopf { padding: .8rem 1rem; background: var(--eu-flaeche); border: 1px solid var(--eu-linie); border-radius: 6px; margin-bottom: 1rem; }

/* Terminal */
.eu-kiosk { max-width: 34rem; margin: 3rem auto; text-align: center; }
.eu-kiosk-karte { padding: 2.5rem 2rem; background: var(--eu-flaeche); border: 1px solid var(--eu-linie); border-radius: 10px; }
.eu-kiosk-ort { margin: 0 0 .4rem; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #6a6a62; }
.eu-kiosk-form input[type="text"] { width: 100%; font-size: 1.4rem; padding: .8rem; text-align: center; letter-spacing: .12em; border: 1px solid var(--eu-linie); border-radius: 6px; margin-bottom: .8rem; }

/* Lernansicht */
/* display:flex schlägt den Browser-Default für [hidden] – deshalb hier
   ausdrücklich ausblenden, sonst steht das Overlay dauerhaft im Bild. */
.eu-modal[hidden] { display: none !important; }
.eu-modal { position: fixed; inset: 0; background: rgba(20,20,18,.6); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; z-index: 9999; }
.eu-modal-inhalt { position: relative; background: #fff; max-width: 46rem; width: 100%; border-radius: 10px; padding: 2rem 2.2rem 2.4rem; }
.eu-modal-zu { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #6a6a62; }
.eu-fortschritt { display: flex; gap: .3rem; margin-bottom: 1.4rem; }
.eu-fortschritt span { flex: 1; height: 4px; background: #e8e8e2; border-radius: 2px; }
.eu-fortschritt span.aktiv { background: #1e3a5f; }
.eu-lern-schritt h3 { margin-top: 0; }
.eu-lern-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.eu-quizfrage { margin-bottom: 1.4rem; }
.eu-quizfrage p { font-weight: 600; }
.eu-quizfrage label { display: block; padding: .5rem .7rem; border: 1px solid var(--eu-linie); border-radius: 5px; margin-bottom: .35rem; cursor: pointer; }
.eu-quizfrage label:hover { background: #f4f4ef; }
.eu-quizfrage.eu-falsch { border-left: 4px solid var(--eu-rot); padding-left: .8rem; }
.eu-signaturflaeche { border: 1px dashed #9a9a92; border-radius: 6px; background: #fff; touch-action: none; width: 100%; height: 11rem; }
.eu-signatur-hilfe { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #6a6a62; }
.eu-fehlermeldung { color: var(--eu-rot); font-weight: 600; }
.eu-erfolg { text-align: center; padding: 1.5rem 0; }
.eu-erfolg .eu-haken { font-size: 3rem; color: var(--eu-gruen); }
.eu-sprachhinweis { padding: .7rem 1rem; background: #f4f2ec; border-left: 4px solid #c9b98a; border-radius: 4px; font-size: .9rem; margin-bottom: 1rem; }

@media (max-width: 640px) {
	.eu-karte { flex-direction: column; align-items: stretch; }
	.eu-karte .eu-knopf { width: 100%; text-align: center; }
	.eu-modal-inhalt { padding: 1.5rem 1.2rem 2rem; }
}