/* =====================================================
   LERNLEKTIONEN CSS – MatheAlex
   Extrahiert aus dem WordPress Customizer (Stand: April 2026)
   Dieses CSS wird vom Plugin alex-lernlektionen geladen.
   ===================================================== */


/* =====================================================
   CSS-VARIABLEN

   Die Farbwerte stehen seit dem 2026-08-25 nicht mehr hier,
   sondern im Kern-Plugin in design/farben.css unter dem
   Vorsatz mx-lese-. Grund: Dieselben Bausteine treten auch
   im Abi-Trainer und in der Antwort des KI-Tutors auf und
   muessen dort dasselbe bedeuten.

   Die alten Namen bleiben als Zwischenschicht bestehen und
   zeigen auf die Werte des Kerns. So musste unten keine
   einzige Regel angefasst werden, und der Umstieg ist an
   einer Stelle nachvollziehbar.

   Hinter jedem Verweis steht der frueher hier gesetzte Wert
   als Rueckfall. Ist das Kern-Plugin abgeschaltet, sehen die
   Lektionen deshalb unveraendert aus. Das ist der Pruefstein
   der Werkzeugkette: Ein Plugin darf ausfallen, ohne dass
   ein anderes stehenbleibt.
   ===================================================== */

:root {
  --primary-blau: var(--mx-primaer);
  --secondary-blau: var(--mx-sekundaer);
  --mathe-blau: var(--mx-lese-linie);
  --mathe-gold-hell: var(--mx-lese-gold);
  --mathe-gold-sehr-hell: var(--mx-lese-gold-zart);
}


/* =====================================================
   GRUNDLAYOUT
   ===================================================== */

h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 25px;
}

section {
  margin-bottom: 50px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.mathe-content {
  margin: 2rem;
}

@media (max-width: 600px) {
  .mathe-content {
    margin: 1rem 0;
  }
}


/* =====================================================
   MATH-BLOCK (Formelboxen)
   ===================================================== */

.math-block,
.solution-btn {
  background: var(--mathe-gold-hell);
  color: var(--mathe-blau);
}

.math-block {
  margin: 1rem 0 !important;
  padding: 0.8rem 1rem !important;
  border-left: 6px solid var(--mathe-blau);
  border-left-width: 6px !important;
  border-radius: 6px !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-bottom: 1.3rem;

  /* Typografie-Schutz */
  letter-spacing: normal !important;
  word-spacing: normal !important;
  line-height: normal !important;
  font-size: 1rem !important;
  transform: none !important;
  filter: none !important;
  text-rendering: auto !important;
  font-variant-ligatures: normal !important;
  font-feature-settings: normal !important;
  unicode-bidi: normal !important;
  direction: ltr !important;
}

.math-block svg {
  max-width: none;
}

/* Autorhinweis */
.math-block::after {
  content: attr(data-origin);
  position: absolute;
  bottom: 0.25rem;
  right: 0.6rem;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.1);
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Linksbündiger Formelblock */
.math-block.math-block-left {
  text-align: left !important;
}


/* =====================================================
   EXERCISE (Übungsrahmen)
   ===================================================== */

.exercise {
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--mathe-gold-sehr-hell);
  border: 2px solid var(--mathe-blau);
  border-radius: 12px;
}


/* =====================================================
   INFO-BOX (blaue Box – Beispiele, Merksätze)
   ===================================================== */

.info-box {
  background: var(--mx-lese-beispiel-flaeche);
  border-left: 4px solid var(--mx-lese-beispiel-linie);
  padding: 15px 20px;
  margin: 25px 0;
  border-radius: 4px;
}


/* =====================================================
   EXERCISE-TASK (goldene Aufgabenbox)
   ===================================================== */

.exercise-task {
  background: var(--mathe-gold-hell);
  border-left: 4px solid var(--mathe-blau);
  padding: 15px 20px;
  margin: 25px 0;
  border-radius: 4px;
}


/* =====================================================
   HINT-BOX (roter Hinweis)
   ===================================================== */

.hint-box {
  background: var(--mx-lese-warnung-flaeche);
  border-left: 4px solid var(--mx-lese-warnung-linie);
  padding: 10px 15px;
  border-radius: 4px;
  margin: 15px 0;
  font-size: 0.9em;
}


/* =====================================================
   COMPARE-TABLE (Vergleichstabelle)
   ===================================================== */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
}

.compare-table td,
.compare-table th {
  vertical-align: top;
  padding: 20px;
  border: 1px solid var(--mx-lese-tabelle-linie);
}

.compare-table th,
.compare-table td:first-child {
  text-align: center;
}

.compare-table tr:first-child td {
  font-weight: 600;
  text-align: center;
}

/* Schmale Bildschirme: waagerecht scrollen statt über den Rand laufen */
@media (max-width: 600px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-table tbody {
    display: table;
    width: 100%;
    min-width: 480px;
  }
}

/* =====================================================
   WEICHE KANTE AN VERSCHIEBBAREN KAESTEN
   =====================================================

   Ein Kasten, der breiter ist als der Bildschirm, sieht am
   Telefon aus wie abgeschnitten. Dass man ihn wischen kann,
   sieht man ihm nicht an. Diese Kante legt einen zarten
   Schatten an die Seite, an der noch etwas kommt, und nimmt
   ihn weg, sobald man dort angekommen ist.

   Wie es wirkt: Vier Verlaufsschichten liegen uebereinander.
   Die beiden deckenden Schichten haben die Farbe des Kastens
   und wandern mit dem Inhalt mit, weil sie local stehen; die
   beiden Schattenschichten stehen fest. Am linken Rand deckt
   die mitwandernde Schicht den Schatten zu, solange nichts
   verschoben ist. Wird gewischt, wandert sie fort und der
   Schatten kommt zum Vorschein. Reines CSS, kein Skript.

   Die Deckfarbe muss die Farbe des Kastens sein, deshalb steht
   sie je Baustein einmal: weiss fuer die Tabelle, Gold fuer den
   Formelblock, jeweils ueber die Variable dieser Datei. Der Schatten selbst ist ein Schwarzton mit
   geringer Deckung; er traegt keine Bedeutung und gehoert
   deshalb nicht in farben.css. */

@media (max-width: 600px) {
  .compare-table {
    background-image:
      linear-gradient(to right,  var(--mx-karte), rgba(255, 255, 255, 0)),
      linear-gradient(to left,   var(--mx-karte), rgba(255, 255, 255, 0)),
      linear-gradient(to right,  rgba(0, 37, 79, 0.16), rgba(0, 37, 79, 0)),
      linear-gradient(to left,   rgba(0, 37, 79, 0.16), rgba(0, 37, 79, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Der Formelblock bringt seinen Bildlauf selbst mit und braucht
   den Hinweis in jeder Breite, nicht nur am Telefon: Eine lange
   Umgebung laeuft auch am Rechner ueber den Kasten hinaus. */
.math-block {
  background-image:
    linear-gradient(to right,  var(--mathe-gold-hell), rgba(255, 243, 230, 0)),
    linear-gradient(to left,   var(--mathe-gold-hell), rgba(255, 243, 230, 0)),
    linear-gradient(to right,  rgba(0, 37, 79, 0.16), rgba(0, 37, 79, 0)),
    linear-gradient(to left,   rgba(0, 37, 79, 0.16), rgba(0, 37, 79, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}


/* =====================================================
   DETAILS / SUMMARY (Aufklappbare Lösungen)
   ===================================================== */

.exercise details {
  margin-top: 1.5rem;
}

.exercise details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mathe-blau);
  padding: 0.3rem 0;
  list-style: none;
  transition: opacity 0.15s ease, text-decoration 0.15s ease;
}

.exercise details > summary::-webkit-details-marker {
  display: none;
}

.exercise details > summary::before {
  content: "\25B8";
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.15s ease;
}

.exercise details > summary:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.exercise details[open] > summary::before {
  transform: rotate(90deg);
}


/* =====================================================
   SOLUTION-BTN (Lösungs-Button)
   ===================================================== */

.solution-btn {
  padding: 10px 16px;
  font-weight: bold;
  border: 2px solid var(--mathe-blau);
  border-radius: 8px;
  cursor: pointer;
}

.solution-btn:hover,
.solution-btn:active,
.solution-btn:focus,
.solution-btn:focus-visible {
  background: var(--mathe-gold-hell);
  color: var(--mathe-blau);
  border-color: var(--mathe-blau);
  outline: none;
  box-shadow: none;
}


/* =====================================================
   MODAL (Lösungs-Popup)
   ===================================================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
}

.modal-content {
  position: relative;
  max-width: 720px;
  max-height: 80vh;
  margin: 8vh auto;
  padding: 1.8rem 2rem;
  background: var(--mathe-gold-sehr-hell);
  border-radius: 14px;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--mathe-blau);
  cursor: pointer;
}

/* Feedback: richtig / falsch */
.modal-content.is-correct {
  background: var(--mx-richtig-flaeche);
  border: 2px solid var(--mx-richtig);
  color: var(--mx-richtig-text);
}

.modal-content.is-wrong {
  background: var(--mx-falsch-flaeche);
  border: 2px solid var(--mx-falsch);
  color: var(--mx-falsch-text);
}

.modal-content.is-correct h3,
.modal-content.is-correct h4 {
  color: var(--mx-richtig-text);
}

.modal-content.is-wrong h3,
.modal-content.is-wrong h4 {
  color: var(--mx-falsch-text);
}

.modal-content.is-correct .solution-btn,
.modal-content.is-wrong .solution-btn {
  background: var(--mathe-gold-hell);
  color: var(--mathe-blau);
  border-color: var(--mathe-blau);
}


/* =====================================================
   TABS
   ===================================================== */

.tabs {
  margin-top: 2.5rem;
}

.tab-buttons {
  display: flex;
  gap: 6px;
}

.tab-buttons button {
  flex: 1;
  padding: 12px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid var(--mathe-blau);
  border-radius: 8px 8px 0 0;
  background: var(--mathe-gold-hell);
  color: var(--mathe-blau);
}

.tab-buttons button.active {
  background: var(--mathe-gold-sehr-hell);
  border-bottom: none;
}

.tab-content {
  display: none;
  padding: 1.5rem;
  background: var(--mathe-gold-sehr-hell);
  border: 2px solid var(--mathe-blau);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.tab-content.active {
  display: block;
}

@media (max-width: 600px) {
  .tab-buttons {
    flex-direction: column;
  }
  .tab-buttons button {
    border-radius: 8px;
  }
}


/* =====================================================
   MULTIPLE CHOICE
   ===================================================== */

.exercise > p:last-of-type {
  margin-bottom: 0.6rem;
}

.answers {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.answers .solution-btn {
  width: 100%;
  text-align: center;
}

/* Die beiden Rueckmeldungen gehoeren nicht auf die Seite, sondern ins Popup.
   Das Skript liest ihren Inhalt aus und zeigt ihn nach dem Klick. Ohne diese
   Regel stand die richtige Antwort samt Erklaerung offen unter jeder Frage.
   Gefunden am 2026-08-27 beim Umwandeln der Lektionssammlung; die beiden
   Auswahllektionen sind die einzigen, die diesen Baustein benutzen. */
.mc-feedback-correct,
.mc-feedback-wrong {
  display: none;
}


/* =====================================================
   LESSON-END (Schlusssatz)
   ===================================================== */

.lesson-end {
  text-align: center;
  margin-top: 35px;
  font-weight: 600;
}


/* =====================================================
   TEXT-CENTER
   ===================================================== */

.text-center {
  text-align: center;
}