:root {
	--rot: #b71c1c;
	--rot-dunkel: #8e1414;
	--rot-hell: #fdecec;
	--text: #1f2328;
	--text-leise: #5a6169;
	--flaeche: #f4f5f6;
	--linie: #d9dde1;
	--weiss: #ffffff;
	--fuss: #24292f;
	--fuss-text: #d5dde5;
	--gruen: #1e7b34;
	--radius: 8px;
	--schrift: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--flaeche);
	color: var(--text);
	font-family: var(--schrift);
	font-size: 17px;
	line-height: 1.55;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a { color: var(--rot); }
a:hover, a:focus { color: var(--rot-dunkel); }

h1, h2, h3 { line-height: 1.25; margin: 1.2em 0 .5em; }
h1 { font-size: 1.75rem; margin-top: .4em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

.rahmen { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }

.kopf { background: var(--rot); color: var(--weiss); }
.kopf-innen {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px 24px; padding-top: 12px; padding-bottom: 12px;
}
.marke { color: var(--weiss); text-decoration: none; font-weight: 800; font-size: 1.35rem; }
.marke span { font-weight: 400; }
.marke:hover, .marke:focus { color: var(--weiss); text-decoration: underline; }
.hauptnavi { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hauptnavi a { color: var(--weiss); text-decoration: none; font-weight: 600; padding: 6px 0; }
.hauptnavi a:hover, .hauptnavi a:focus { color: var(--weiss); text-decoration: underline; }

.inhalt {
	flex: 1;
	background: var(--weiss);
	margin-top: 24px; margin-bottom: 24px;
	padding-top: 16px; padding-bottom: 24px;
	border-radius: var(--radius);
}

.fuss { background: var(--fuss); color: var(--fuss-text); font-size: 14px; }
.fuss-innen {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 16px; padding-top: 20px; padding-bottom: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-produkt { color: var(--weiss); font-weight: 700; font-size: 15px; }
.made-by { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fuss-text); text-decoration: none; }
.made-by img { height: 18px; width: auto; opacity: .9; }
.made-by:hover img, .made-by:focus img { opacity: 1; }
.made-by:hover, .made-by:focus { color: var(--weiss); }
.fuss-navi { display: flex; gap: 18px; }
.fuss-navi a { color: var(--fuss-text); }
.fuss-navi a:hover, .fuss-navi a:focus { color: var(--weiss); }

.form_submit, .knopf {
	display: inline-block;
	background: var(--rot); color: var(--weiss);
	border: 0; border-radius: var(--radius);
	padding: 12px 22px; min-height: 48px;
	font: inherit; font-weight: 700;
	cursor: pointer; text-decoration: none; text-align: center;
}
.form_submit:hover, .form_submit:focus, .knopf:hover, .knopf:focus { background: var(--rot-dunkel); color: var(--weiss); }

.hinweis { color: var(--text-leise); font-size: .95rem; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fehlertext { color: var(--rot); font-weight: 700; }
.mail .at::after { content: "@"; }
.mail .punkt::after { content: "."; }

.wahl-gruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px 16px; margin: 0 0 16px; }
.wahl-gruppe legend { font-weight: 700; padding: 0 6px; }
.wahl {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; margin-top: 8px;
	border: 1px solid var(--linie); border-radius: var(--radius);
	cursor: pointer;
}
.wahl:hover { background: var(--rot-hell); }
.wahl input { width: 20px; height: 20px; accent-color: var(--rot); margin: 0; }
.wahl small { color: var(--text-leise); }

.start-aktion { margin: 24px 0; display: flex; flex-wrap: wrap; gap: 12px; }

.ergebnis-tabelle { border-collapse: collapse; width: 100%; max-width: 480px; }
.ergebnis-tabelle th, .ergebnis-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.ergebnis-tabelle td { font-weight: 700; }

.druck-liste { padding-left: 1.2em; }
.druck-liste li { margin: 6px 0; }

.quiz-titel { margin-top: .2em; }
.quiz-stand { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--text-leise); font-size: .95rem; margin-top: 8px; }
.balken { height: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.balken-fuellung { height: 100%; background: var(--rot); }

.frage-text { font-size: 1.15rem; font-weight: 600; margin: 16px 0 12px; outline: none; }
.liste_antworten { list-style: upper-alpha; padding-left: 1.6em; margin: 0; }
.liste_antworten li { margin: 8px 0; }
.antwort {
	display: block; width: 100%;
	padding: 12px 14px;
	background: var(--weiss); color: var(--text);
	border: 1px solid var(--linie); border-radius: var(--radius);
	font: inherit; text-align: left;
	cursor: pointer;
}
button.antwort:hover, button.antwort:focus-visible { background: var(--rot-hell); }
button.antwort:disabled { cursor: default; opacity: 1; }
button.antwort:disabled:hover { background: var(--weiss); }
.liste_antworten li.richtig .antwort { border: 2px solid var(--gruen); color: var(--gruen); font-weight: 700; }
.liste_antworten li.falsch .antwort { border: 2px solid var(--rot); color: var(--rot); text-decoration: line-through; }
.liste_antworten li.gewaehlt .antwort { border: 2px solid var(--rot); background: var(--rot-hell); font-weight: 700; }

.quiz-meldung { min-height: 1.5em; margin: 8px 0 0; font-weight: 700; }
.quiz-meldung.gut, .minuspunkte.gut { color: var(--gruen); }
.quiz-meldung.schlecht { color: var(--rot); }
.loesung-knopf { background: none; border: 0; padding: 8px 0; color: var(--rot); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

.blaettern { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.zurueck, .blaettern .zurueck { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); }
.zurueck:hover, .zurueck:focus, .blaettern .zurueck:hover, .blaettern .zurueck:focus { background: var(--linie); color: var(--text); }

.pruefung-uhr { position: sticky; top: 0; z-index: 1; background: var(--weiss); padding: 8px 0; font-weight: 700; font-size: 1.1rem; }
.pruefung-uhr.knapp { color: var(--rot); }
.pruefung-frage { border-top: 1px solid var(--linie); margin-top: 12px; }
.minuspunkte { font-size: 1.4rem; font-weight: 800; color: var(--rot); }
.gesamtstand { margin: 20px 0 0; font-weight: 600; }

.lernstand { margin-top: 32px; }
.lernstand-tabelle { border-collapse: collapse; width: 100%; max-width: 560px; }
.lernstand-tabelle th, .lernstand-tabelle td { padding: 8px 6px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.lernstand-tabelle td { width: 55%; }
.lernstand-wahl { display: block; font-weight: 400; color: var(--text-leise); }
.lernstand-zahl { font-weight: 700; }
.lernstand-fehler { display: block; color: var(--rot); }
.abzeichen { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; color: var(--weiss); font-weight: 800; }
.abzeichen-bronze { background: #a0692e; }
.abzeichen-silber { background: #7d868f; }
.abzeichen-gold { background: #b8901a; }
.termin { margin: 16px 0; }
.termin-feld input { font: inherit; padding: 6px 8px; margin-left: 6px; border: 1px solid var(--linie); border-radius: 6px; }
.termin-text { font-weight: 700; color: var(--rot); margin: 6px 0 0; }

@media (max-width: 600px) {
	body { font-size: 16px; }
	h1 { font-size: 1.45rem; }
	.kopf-innen { flex-wrap: nowrap; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
	.marke { font-size: 1.05rem; white-space: nowrap; }
	.marke span { display: none; }
	.hauptnavi { flex-wrap: nowrap; gap: 14px; font-size: 14px; }
	.hauptnavi a { white-space: nowrap; padding: 4px 0; }
	.inhalt { padding-top: 4px; }
	.quiz-titel { font-size: 1rem; margin: .6em 0 0; color: var(--text-leise); }
	.frage-text { font-size: 1.05rem; margin-top: 12px; }
	.liste_antworten li { margin: 6px 0; }
	.antwort { padding: 10px 12px; }
	.blaettern { margin-top: 12px; }
	.inhalt { margin-top: 0; margin-bottom: 0; border-radius: 0; }
	.form_submit, .knopf { width: 100%; }
	.blaettern .form_submit { width: auto; flex: 1; }
}

@media (max-width: 359px) {
	.kopf-innen { flex-wrap: wrap; row-gap: 2px; }
}