/* TEST 12.10.2026 (Auftrag Walied): Prüfungsaufgaben Teil A im Stil des Entwurfs zum Fallstudien-Training –
   Akzent seit 12.10.2026 das Blau der Plattform (vorher Lila; der Dateiname ist geblieben), Karten mit runden Ecken, Aufgabenansicht zweispaltig (links Ausgangssituation, rechts Teilaufgaben).
   Abschalten: die <link>-Zeile zu dieser Datei in hq.html entfernen. Die Regeln überschreiben nur Aussehen,
   keine Funktion; #hq-app schlägt die Klassenregeln im <style> von hq.html. */
#hq-app {
  --hq-akzent: #5469d4; --hq-akzent-hell: #8796ef; --hq-akzent-weich: rgba(84, 105, 212, .10); --hq-akzent-rand: rgba(84, 105, 212, .5);
  --hq-flaeche: #171a27; --hq-linie: #2b2f42; --hq-text: #ece9f6; --hq-gedaempft: #b9b5cc;
  --li-flaeche-2: #1d2030; --li-chip: #22263a; --li-lila-bg: #232a4d; --li-lila-linie: #343c63; --li-text-2: #cfcbe0; --li-tief: #12141c;
  --li-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --li-serif: Georgia, 'Times New Roman', serif;
  max-width: 1360px;
}
/* Fachfarbe bleibt nur an der Plakette des Prüfungsfachs erhalten */
#hq-app[data-fach="vwl"] { --li-fach: #94b0d8; }
#hq-app[data-fach="rewe"] { --li-fach: #d9b874; }
#hq-app[data-fach="fininv"] { --li-fach: #7bbcb0; }
#hq-app[data-fach="mpa"] { --li-fach: #cc9c88; }

#hq-app .hq-kopf h1 { font-family: var(--li-serif); font-size: 2rem; font-weight: 700; letter-spacing: -.005em; }
#hq-app .hq-label { font-family: var(--li-mono); font-size: 12px; letter-spacing: .08em; }

/* Plaketten */
#hq-app .hq-pille { font-size: 13px; padding: 3px 10px; border: 0; border-radius: 999px; background: var(--li-chip); color: var(--li-text-2); }
#hq-app .hq-pille.akzent { background: var(--li-lila-bg); color: var(--li-fach, #c8d0fb); }
#hq-app .hq-teil-badge { background: none; padding: 0; margin-right: 2px; font-family: var(--li-mono); font-size: 13px; font-weight: 500; color: var(--hq-akzent-hell); }
#hq-app .hq-teil-badge::before { content: "Teilaufgabe "; }

/* Knöpfe */
#hq-app .hq-knopf { background: var(--hq-akzent); color: #fff; border-radius: 12px; min-height: 44px; padding: 0 20px; font-weight: 600; }
#hq-app .hq-knopf.zweit { background: transparent; color: #c8d0fb; border: 1px solid var(--li-lila-linie); font-weight: 500; }
#hq-app .hq-vorschau-leiste .hq-knopf { min-height: 0; padding: 7px 13px; }
#hq-app .hq-zurueck { background: transparent; border: 0; padding: 8px 0; color: var(--hq-akzent-hell); }
#hq-app .hq-loesung-knopf { color: var(--hq-akzent-hell); font-weight: 500; }
#hq-app .hq-teil-kopf:focus-visible, #hq-app .hq-knopf:focus-visible { outline: 2px solid var(--hq-akzent); outline-offset: 3px; }

/* Übersicht */
#hq-app .hq-modus-karte, #hq-app .hq-karte, #hq-app .hq-prf-termin, #hq-app .hq-gate { border-radius: 16px; }
#hq-app .hq-chip { border-radius: 999px; }
#hq-app .hq-info, #hq-app .hq-vorschau { border-left: 1px solid var(--hq-linie); border-radius: 16px; }
#hq-app .hq-prf-jahr { border-left: 0; padding-left: 0; font-family: var(--li-mono); font-weight: 500; color: var(--hq-akzent-hell); }
#hq-app .hq-prf-aufgabe, #hq-app .hq-auw-kasten, #hq-app .hq-auw-aufgabe { border-radius: 16px; }
#hq-app .hq-tabelle th { background: var(--li-chip); }

/* Aufgabenansicht: zwei Karten-Spalten */
#hq-app .hq-aufgabe { background: none; border: 0; border-radius: 0; padding: 0; display: grid; gap: 20px; }
#hq-app .hq-aufgabe-kopf { min-width: 0; background: var(--hq-flaeche); border: 1px solid var(--li-lila-linie); border-radius: 18px; padding: 24px; }
#hq-app .hq-aufgabe-teile { min-width: 0; display: grid; gap: 16px; }
#hq-app .hq-aufgabe-titel { font-family: var(--li-serif); font-size: 26px; line-height: 1.2; margin: 16px 0 14px; }
#hq-app .hq-sachverhalt { margin: 0; font-size: 16.5px; color: var(--li-text-2); }
#hq-app .hq-sachverhalt::before { content: "Ausgangssituation"; display: block; margin-bottom: 8px; font-family: var(--li-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--hq-gedaempft); }
#hq-app .hq-sachverhalt strong, #hq-app .hq-sachverhalt b, #hq-app .hq-sachverhalt th { color: var(--hq-text); }
#hq-app .hq-aufgabe-teile > .hq-teil { margin: 0; padding: 20px 22px; border: 1px solid var(--hq-linie); border-radius: 16px; background: var(--hq-flaeche); }
#hq-app .hq-aufgabe-teile > .hq-teil.zu { padding-bottom: 20px; }
#hq-app .hq-aufgabe-teile > .hq-teil:not(.zu) { border-color: var(--li-lila-linie); background: #181a2c; }
#hq-app .hq-frage { margin: 16px 0; padding: 0; background: none; border-left: 0; border-radius: 0; font-size: 18px; line-height: 1.5; }
@media (min-width: 1360px) {
  #hq-app .hq-aufgabe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  #hq-app .hq-aufgabe-kopf { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* Antwort */
#hq-app .hq-freitext, #hq-app .hq-eingabe input, #hq-app .hq-melden-box textarea, #hq-app .hq-deine { background: var(--li-tief); border-radius: 12px; padding: 12px 14px; }
#hq-app .hq-freitext { min-height: 150px; line-height: 1.6; }
#hq-app .hq-freitext:focus, #hq-app .hq-eingabe input:focus, #hq-app .hq-melden-box textarea:focus { outline: 2px solid var(--hq-akzent); outline-offset: 1px; }
#hq-app .hq-option { border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; }
#hq-app .hq-option:not(.gesperrt):hover { border-color: var(--hq-akzent); background: var(--li-flaeche-2); }
#hq-app .hq-option input, #hq-app .hq-kernpunkte input { accent-color: var(--hq-akzent); }
#hq-app .hq-option.korrekt { background: #152e29; border-color: #2f6b5c; }
#hq-app .hq-option.falsch { background: #3a1f24; border-color: #7a3a41; }

/* Ergebnis und Kernpunkte */
#hq-app .hq-ergebnis { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 16px; }
#hq-app .hq-ergebnis.richtig { background: #152e29; color: #9fe6d2; }
#hq-app .hq-ergebnis.teilweise { background: #3a2f12; color: #f6cf8e; }
#hq-app .hq-ergebnis.falsch { background: #3a1f24; color: #ffb4a8; }
#hq-app .hq-kernpunkte { display: grid; gap: 8px; margin: 12px 0; }
#hq-app .hq-kernpunkte li { gap: 12px; padding: 11px 14px; border: 1px solid var(--hq-linie); border-radius: 12px; color: var(--li-text-2); }
#hq-app .hq-kernpunkte li:has(input:checked) { border-color: #2f6b5c; background: rgba(94, 196, 168, .06); color: var(--hq-text); }
#hq-app .hq-kernpunkte input { width: 18px; height: 18px; margin-top: 3px; }
#hq-app .hq-treffer { color: #9fe6d2; white-space: normal; }
#hq-app .hq-fehler { border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; color: var(--li-text-2); }
#hq-app .hq-fehler b { color: var(--hq-text); }
#hq-app .hq-fehler.erkannt { border-color: #5a4718; background: #3a2f12; }

/* Lösungsweg */
#hq-app .hq-schritt { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--hq-linie); border-radius: 12px; background: var(--li-flaeche-2); }
#hq-app .hq-schritt.letzter { border-color: #2f6b5c; background: #152e29; }
#hq-app .hq-schritt-antwort { color: #9fe6d2; }

@media (max-width: 768px) {
  #hq-app .hq-aufgabe-kopf { padding: 18px 16px; }
  #hq-app .hq-aufgabe-teile > .hq-teil { padding: 16px; }
  #hq-app .hq-aufgabe-titel { font-size: 22px; }
  #hq-app .hq-frage { font-size: 16.5px; }
}

/* aktive Filter-Plakette: weiße Schrift auf Blau */
#hq-app .hq-chip.aktiv { color: #fff; }