/* ------------------------------------------- Implikationen erkennen (App-Optik)
   Prämissenfeld (.ie-aussagen) und Euler-Diagramm der Lösung (.ied-*), gebaut
   von landing/aufgaben/implikationen.mjs. Farben nur über Variablen, damit
   Hell- und Dunkelmodus stimmen: S und P im Akzent, M neutral. */

/* Die beiden Prämissen, schlicht untereinander, ohne Nummern (App: Aussagenfeld). */
.trainer .ie-aussagen { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 56px; margin: 14px 0 0; padding: 20px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px -16px rgba(74, 60, 44, 0.18); }
.trainer .ie-aussagen p { margin: 0 !important; font: 400 19px/1.375 "Work Sans", sans-serif !important; color: var(--t-ink) !important; overflow-wrap: anywhere; }

/* Euler-Diagramm */
.ied { text-align: center; }
.ied .ied-titel { margin: 0 !important; font: 700 12px/1.3 "Work Sans", sans-serif !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted, var(--r-leise)) !important; }
.ied-svg { display: block; width: 100%; height: auto; margin-top: 8px; font: 400 16px/1 "Work Sans", sans-serif; }
.ied-svg .ied-s, .ied-svg .ied-p { color: var(--akzent); }
.ied-svg .ied-m { color: var(--t-muted, var(--r-leise)); }
.ied-svg .ied-unter { fill: var(--t-muted, var(--r-leise)); }
.ied .ied-legende { margin: 8px 0 0 !important; font: 400 13.5px/1.4 "Work Sans", sans-serif !important; color: var(--t-soft, var(--r-text)) !important; }

@media (max-width: 760px) {
  .trainer .ie-aussagen { padding: 16px; gap: 10px; }
  .trainer .ie-aussagen p { font-size: 17px !important; }
  /* Am Handy darf das Bild in den Innenabstand der Karte reichen, damit die Kürzel lesbar bleiben. */
  .trainer .ied-svg { width: calc(100% + 24px); margin: 8px -12px 0; }
}