/*
 * Ergaenzungen zum Fenster des Lernkerns.
 *
 * Das Fenster selbst steht in bausteine.css (alex-lernkern, design),
 * Klasse mx-popup, und wird von bausteine.js bedient. Hier steht nur
 * der eine Fall, den es dort nicht gibt: das knappe Fenster ohne Kopf
 * mit einem Zeichen und einem Wort, also der Hinweis nach dem
 * Anmelden.
 *
 * Am 2026-09-05 stand hier zwischenzeitlich ein eigener Aufbau mit
 * eigenem Grund und eigenem Fenster. Er dunkelte nur einen Teil der
 * Seite ab und sah anders aus als jedes andere Fenster. Gelernt: Wo
 * ein Baustein da ist, wird er benutzt und nicht nachgebaut.
 */

.mx-popup__fenster.ap-fenster--knapp {
  width: min(20rem, 100%);
  height: auto;
  text-align: center;
}

.ap-fenster--knapp .mx-popup__inhalt {
  padding: 2.25rem 1.75rem;
}

.ap-popup__haken {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--mx-akzent, #F2A9A9);
  margin-bottom: .35rem;
}

.ap-popup__wort {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mx-primaer, #00254F);
}

/* Die Ladeanzeige nutzt die Klassen der Lektionen, weil ihr Verhalten
   daran haengt. Sie bekommt hier die Werte des Bausteins, damit sie
   trotzdem aussieht wie jedes andere Fenster. */
.modal.ap-laden { background: var(--mx-popup-grund, rgba(0, 37, 79, .45)); }

/* Mittig, nicht oben. Die Vorlage der Lektionen setzt margin: 8vh auto
   und haengt das Fenster damit an den oberen Rand; jedes andere Fenster
   der Plattform steht in der Mitte. Alex' Ansage vom 2026-09-05.

   Gesetzt wird es am Kind und nicht ueber display: flex am Grund: Der
   Grund schaltet ueber display zwischen an und aus, und wer ihm hier
   ein flex gibt, macht ihn dauerhaft sichtbar. */
.ap-laden .modal-content.ap-laden__inhalt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 20rem;
  margin: 0;
  padding: 2.25rem 1.75rem;
  background: var(--mx-karte, #fff);
  border-radius: var(--mx-radius-gross, 12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  text-align: center;
}