/* ══ Das Profil der Lernbereiche ═══════════════════════════════════════════════
 * Eine Stelle für das Aussehen ALLER Lern-Apps — heute Funklizenz LX und
 * Sportbootführerschein, morgen Funklizenz DE (§34 F) oder was sonst dazukommt.
 *
 * Vorgeschichte: die beiden Bereiche hatten getrennte Paletten und liefen langsam
 * auseinander — hellblaue Antworten hier, weiße dort; zwei Blautöne für Ränder
 * (#dde4ea / #e3e9f0), zwei Grüntöne für „richtig", drei Grauwerte für Nebentext.
 * Jede einzelne Abweichung war zu klein, um aufzufallen, und zusammen sahen die
 * Bereiche aus wie zwei Programme (§37, §40, §45).
 *
 * ── So wird ein NEUER Lernbereich angeschlossen ───────────────────────────────
 *   1. Die Seite hängt die App in `<div class="radio-embed">` — dort stehen die
 *      Marken. (Der Klassenname ist historisch; er meint „eingebettete Lern-App",
 *      nicht „Funk". Umbenannt wurde er nicht, weil daran rund 60 Regeln in
 *      style.css hängen.)
 *   2. Das eigene Stylesheet benutzt AUSSCHLIESSLICH `var(--lern-…)` —
 *      keine rohen Farben. `scripts/check_learnstyle.py` besteht darauf.
 *   3. Was es hier nicht gibt, gehört hierher — nicht als Sonderfarbe in die App.
 *
 * ⚠️ Kein `style="…"` im Markup und kein `on…=`: die CSP (§20, §23) lässt beides
 * nicht zu, und beides stirbt lautlos. Breiten setzt die App per CSSOM.
 *
 * ⚠️ Diese Datei wird IMMER geladen (_head.php), nicht nur auf den Lernseiten.
 * Eine Bedingung je Bereich wäre genau die Zeile, die ein dritter Bereich
 * vergisst — und dann steht er ohne Marken da, mit unsichtbaren Fallback-Werten.
 */

.radio-embed {
    /* ── Flächen und Linien ── */
    --lern-flaeche: #fff;            /* Karten, Antworten, Kästen */
    --lern-flaeche-2: #f8fafc;       /* zurückgenommen: Gesperrtes, Katalogeinträge */
    --lern-linie: #e3e9f0;           /* Rahmen */
    --lern-linie-zart: #eee;         /* Trennlinien innerhalb eines Blocks */

    /* ── Schrift ── */
    /* ⚠️ Die Schriftfamilie gehört ins Profil, nicht in die einzelne App: der SBF
       hatte gar keine und erbte sie vom Seitenkörper, der Funk setzte seine eigene.
       Das ging gut, solange beide zufällig system-ui ergaben. */
    --lern-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Frage und Antwort — die zwei Textsorten, die in jedem Trainer vorkommen. */
    /* ⚠️ Die Frage steht in der Textfarbe, NICHT in Navy. Navy ist im Lernbereich die
       Farbe der Bedienung (Knöpfe, Überschriften, Rahmen); die Frage selbst ist das,
       was man liest. Der Funkbereich hatte sie blau, der SBF schwarz — beide sagen es
       jetzt ausdrücklich, statt dass eine Seite erbt (§45 i). */
    --lern-frage-farbe: var(--lern-text);
    --lern-frage-groesse: 1.05rem;
    --lern-frage-gewicht: 600;
    --lern-frage-zeile: 1.4;
    --lern-antwort-groesse: 1rem;
    --lern-antwort-gewicht: normal;   /* ⚠️ NICHT fett — siehe §45 h */
    --lern-antwort-zeile: 1.45;
    --lern-text: #333;
    --lern-text-leise: #777;         /* Zähler, Quellenangaben, Beschriftungen */

    /* ── Die Seitenfarben ── */
    --lern-akzent: #0a3d62;          /* Navy: Überschriften, Knöpfe, Rahmen */
    --lern-akzent-stark: #0c4b78;    /* Navy beim Überfahren des gefüllten Knopfs */
    --lern-hover: #eef4f9;           /* Umriss-Knopf beim Überfahren */

    /* ⚠️ Gold ist die Farbe des FORTSCHRITTS (Balken, Streak-Punkte, ausgewählte
       Antwort) — nicht Navy. Grün heißt in beiden Apps „richtig beantwortet"; ein
       grüner Streak-Punkt daneben war doppeldeutig (§40). */
    --lern-gold: #b7950b;
    --lern-gold-flaeche: #fdf8e8;

    /* ── Rückmeldung ── */
    --lern-richtig: #2e7d32;
    --lern-richtig-flaeche: #e3f2e4;
    --lern-falsch: #c62828;
    --lern-falsch-flaeche: #fbe3e2;

    /* Zurücksetzen und andere Handlungen, die etwas wegwerfen */
    --lern-gefahr-flaeche: #f8d7da;
    --lern-gefahr-linie: #f1b7bc;
    --lern-gefahr-text: #842029;
    --lern-gefahr-hover: #f4c9ce;

    /* Rückfrage in der Seite statt confirm() (§33) */
    --lern-hinweis-flaeche: #fff8e1;
    --lern-hinweis-linie: #ffe082;

    /* Gesperrtes Modul: sichtbar, aber sichtbar nicht offen (§17) */
    --lern-gesperrt-flaeche: #f4f6f8;
    --lern-gesperrt-linie: #c3ccd6;
    --lern-gesperrt-text: #8a95a1;

    /* Schrift auf den Rückmeldeflächen — dunkel genug für den Kontrast */
    --lern-richtig-text: #10230f;
    --lern-falsch-text: #2a0d0c;

    /* ── Form ── */
    /* Der Fortschrittsbalken: EIN Maß für alle Bereiche. Vorher 6px/3px beim Funk
       und 8px/4px beim SBF — nebeneinander sah derselbe Balken verschieden dick aus. */
    --lern-balken-hoehe: 6px;
    --lern-balken-radius: 3px;
    --lern-karte-polster: 18px;      /* Karten beider Bereiche */
    --lern-radius: 10px;             /* Karten und Kästen */
    --lern-radius-klein: 6px;        /* Knöpfe */
    --lern-radius-feld: 8px;         /* Antworten, Symbolknöpfe */
}

/* ⚠️ `border-box` für den ganzen Lernbereich. Die Funk-App bringt das selbst mit
 * (`.mr-app *`), der Sportbootführerschein hatte es NICHT — und seine Antworten sind
 * `width:100%` MIT Polster und Rahmen. Je nach Browser-Vorgabe für <button> ergibt
 * das 100 % + 30 px, also einen Überhang, der nur auf schmalen Fenstern auffällt.
 * Hier statt in den einzelnen Apps: ein dritter Bereich hat es damit von Anfang an. */
.radio-embed { font-family: var(--lern-schrift); }

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