/* ============================================================================
   Shipaholics H5P Style v2.0.0 – konsolidierte Overrides
   ----------------------------------------------------------------------------
   Geladen via h5p_alter_library_styles (offizieller Hook) → iframe UND div.
   Cache-Buster: automatisch via filemtime() in der Plugin-PHP – diese Datei
   einfach ändern und speichern genügt, KEIN manueller Versionsbump nötig.

   JEDE aktive Regel unten zielt auf eine Klasse, die 2026-07-01 per DevTools
   im echten DOM belegt wurde (Klassendump Question Set + Einzeltests).
   Zustandsklassen, die H5P erst NACH einer Nutzeraktion setzt (h5p-correct/
   h5p-wrong/answered), sind als solche markiert – sie fehlen im Ruhe-DOM,
   das ist erwartbar und kein Fehler.

   Design-Tokens 1:1 aus donaupatent-trainer.html:
     --deep #0c2930   --deep-3 #1a4a56   --chart #f4eede   --ink #132229
     --ink-soft #3f5259   --port #d0473f (falsch)   --starboard #2f9e6f (richtig)
     --buoy #e6ac36   --foam #9dc2c7   Radius 14px
     Schatten 0 18px 44px -20px rgba(0,0,0,.7)
   Projektentscheidungen: Kartengrund #ffffff · Fortschrittspunkte #7ebec5 ·
   Karten-Innenabstand im Question-Set 10px.
============================================================================ */

/* Schriften SELBST-GEHOSTET – DSGVO-konform, KEIN externer Request an Google
   (LG München I, Az. 3 O 17493/20: dynamische Google-Fonts-Einbindung überträgt
   die IP ohne Einwilligung → verstößt gegen DSGVO). Selbst-Hosting = keine
   Drittübertragung = KEIN Cookie-Banner nötig + schneller (kein CDN-Roundtrip).

   Eine einzige, lesbarkeits-optimierte Familie (Braille Institute, fürs Lesen
   entwickelt) statt drei gemischter Fonts → kein Overload, minimaler Payload.
   Nur 2 Schnitte (Regular 400 + Bold 700). font-display: swap → Text sofort da.

   >>> Font-DATEIEN separat ablegen: styles/fonts/
       - atkinson-hyperlegible-v12-latin-regular.woff2
       - atkinson-hyperlegible-v12-latin-700.woff2
       (plus die latin-ext-Varianten, wenn beim Helper mit ausgewählt – dann
        zusätzliche @font-face-Blöcke mit unicode-range ergänzen; für Deutsch
        reicht latin, ß/Umlaute sind enthalten.)
   Bezug (offiziell, frei, SIL Open Font License):
       google-webfonts-helper: https://gwfh.mranftl.com/fonts/atkinson-hyperlegible
       → charsets: latin (+ latin-ext) · styles: regular + 700 · woff2
   WICHTIG: Family-Name hier ist 'Atkinson Hyperlegible' (Original, OHNE „Next") –
   passend zu den Helper-Dateinamen. Dateinamen unten müssen exakt passen. */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/atkinson-hyperlegible-v12-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/atkinson-hyperlegible-v12-latin_latin-ext-700.woff2') format('woff2');
}

/* Überall unten wird 'Atkinson Hyperlegible' mit robustem System-Fallback
   genutzt, damit bei (noch) fehlender Font-Datei nichts bricht. */

/* =========================================================================
   1) DIALOG CARDS  (H5P.Dialogcards – Klassen einzeln verifiziert)
   ========================================================================= */

.h5p-dialogcards .h5p-dialogcards-card-content {
	background: #ffffff;
	color: #132229;
	border-radius: 14px;
	box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .7);
	border: 1px solid #dcd2b8;
}
.h5p-dialogcards .h5p-dialogcards-card-text-area {
	color: #132229;
}
.h5p-dialogcards .h5p-dialogcards-card-text {
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 600;
	color: #132229;
	line-height: 1.28;
}
.h5p-dialogcards .h5p-dialogcards-answer-button {
	background: #0c2930;
	color: #f4eede;
	border: none;
	border-radius: 10px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 600;
}
.h5p-dialogcards .h5p-dialogcards-answer-button:hover {
	background: #1a4a56;
}
.h5p-dialogcards .h5p-dialogcards-cardwrap {
	border-radius: 14px;
}

/* =========================================================================
   2) GETEILTER H5P.Question-RAHMEN
   (h5p-question, -introduction, -content, -buttons, joubelui-button: verifiziert)
   Wirkt bei ALLEN darauf basierenden Typen: Question Set, Drag & Drop,
   Multiple Choice, True/False, Blanks.
   ========================================================================= */

.h5p-question {
	background: #ffffff;
	color: #132229;
	border-radius: 14px;
	box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .7);
	border: 1px solid #dcd2b8;
}
.h5p-question .h5p-question-introduction,
.h5p-question .h5p-question-content {
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #132229;
	line-height: 1.28;
}
.h5p-question .h5p-question-buttons {
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.h5p-question .h5p-joubelui-button {
	background: #0c2930;
	color: #f4eede;
	border: none;
	border-radius: 10px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 600;
	transition: background .16s ease;
}
.h5p-question .h5p-joubelui-button:hover,
.h5p-question .h5p-joubelui-button:focus {
	background: #1a4a56;
	color: #f4eede;
}
.h5p-question :focus-visible {
	outline: 3px solid #e6ac36;
	outline-offset: 2px;
	border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.h5p-question *, .h5p-dialogcards * {
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================================
   3) QUESTION SET  (Klassen OHNE h5p-Präfix – per Vorfahrenkette/Dump belegt:
   questionset · qs-footer · qs-progress · dots-container · progress-item ·
   progress-dot · Zustände: unanswered, current; answered = logisches Pendant)
   ========================================================================= */

/* Karten-Innenabstand: 10px rundherum – auf die WEISSE Karte (.h5p-question),
   eingegrenzt auf den Question-Set-Kontext. Live-Test belegt: dieser einfache
   Selektor genügt (kein !important, kein Präfix nötig). Der äußere
   .questionset-Wrapper ist transparent – Padding dort wäre unsichtbar. */
.questionset .h5p-question {
	padding: 10px;
}

/* Fortschrittspunkte – Türkis #7ebec5 (Projektentscheidung 2026-07-01) */
.questionset .progress-dot {
	border-color: #3f5259;
}
.questionset .progress-dot.current {
	background: #0c2930;
	border-color: #0c2930;
}
/* Zustandsklasse: setzt H5P erst nach Beantwortung (im Ruhe-DOM nicht sichtbar) */
.questionset .progress-dot.answered {
	background: #0c2930;
	border-color: #0c2930;
}
.questionset .qs-progress {
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================================
   4) DRAG & DROP  (h5p-dragquestion, h5p-draggable, h5p-dropzone,
   h5p-dragquestion-introduction: alle im Klassendump belegt)
   ========================================================================= */

.h5p-dragquestion .h5p-question-content {
	border-radius: 12px;
}
.h5p-dragquestion .h5p-draggable {
	background: #faf6ea;
	color: #132229;
	border: 1.5px solid #dcd2b8;
	border-radius: 11px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.h5p-dragquestion .h5p-draggable:hover {
	border-color: #1a4a56;
}
.h5p-dragquestion .h5p-dropzone {
	border-radius: 11px;
}
.h5p-dragquestion .h5p-dropzone .h5p-inner {
	border: 2px dashed #9dc2c7;
	border-radius: 11px;
}

/* =========================================================================
   5) MULTIPLE CHOICE  (h5p-multichoice, h5p-answers, h5p-answer,
   h5p-alternative-container, h5p-alternative-inner: im Dump belegt)
   ========================================================================= */

.h5p-multichoice .h5p-answer {
	background: #faf6ea;
	color: #132229;
	border: 1.5px solid #dcd2b8;
	border-radius: 11px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.h5p-multichoice .h5p-answer:hover {
	border-color: #1a4a56;
}
/* Zustandsklassen: erst nach „Überprüfen" im DOM */
.h5p-multichoice .h5p-answer.h5p-correct {
	border-color: #2f9e6f;
	background: #e9f6ee;
}
.h5p-multichoice .h5p-answer.h5p-wrong {
	border-color: #d0473f;
	background: #fbeae8;
}

/* =========================================================================
   6) TRUE / FALSE  (h5p-true-false, h5p-true-false-answers,
   h5p-true-false-answer: im Klassendump belegt – v1.x hatte sie nur geraten,
   jetzt verifiziert)
   ========================================================================= */

.h5p-true-false .h5p-true-false-answer {
	background: #faf6ea;
	color: #132229;
	border: 1.5px solid #dcd2b8;
	border-radius: 11px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.h5p-true-false .h5p-true-false-answer:hover {
	border-color: #1a4a56;
}
/* Zustandsklassen: erst nach „Überprüfen" im DOM */
.h5p-true-false .h5p-true-false-answer.h5p-correct {
	border-color: #2f9e6f;
	background: #e9f6ee;
}
.h5p-true-false .h5p-true-false-answer.h5p-wrong {
	border-color: #d0473f;
	background: #fbeae8;
}

/* =========================================================================
   7) FILL IN THE BLANKS  (h5p-blanks, h5p-input-wrapper, h5p-text-input:
   im Klassendump belegt)
   ========================================================================= */

.h5p-blanks .h5p-input-wrapper .h5p-text-input {
	border: 1.5px solid #dcd2b8;
	border-radius: 8px;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #132229;
}
/* Zustandsklassen: erst nach „Überprüfen" im DOM */
.h5p-blanks .h5p-input-wrapper.h5p-correct .h5p-text-input {
	border-color: #2f9e6f;
	background: #e9f6ee;
}
.h5p-blanks .h5p-input-wrapper.h5p-wrong .h5p-text-input {
	border-color: #d0473f;
	background: #fbeae8;
}

/* =========================================================================
   OFFEN (bewusst NICHT enthalten – Klassen bisher in keinem DOM-Check belegt):
   - Single Choice Set (h5p-sc-*): Typ bisher nirgends im Einsatz gesehen.
   - Scoreleiste am Quiz-Ende: rendert erst auf der Ergebnisseite. Zum Nachziehen
     Quiz durchspielen und dort prüfen:
       [...doc.querySelector('.questionset').querySelectorAll('*')]
         .map(e=>e.className).filter(c=>typeof c==='string'&&/score|bar|result/i.test(c))
         .filter((v,i,a)=>a.indexOf(v)===i);
     Dann Regel ergänzen (Verlauf Steuerbord→Boje: linear-gradient(90deg,#2f9e6f,#e6ac36)).
   Datei ändern + speichern genügt – filemtime bustet den Cache automatisch.
   H5P-Aggregation beachten: cachedassets/ ggf. leeren (siehe Plugin-Header §4).
============================================================================ */