/* ============================================================================
   juscool-merken.css — Vorschau in Lösungen, Mein Kodex, Wortschatz
   Entwürfe 13, 15, 16, 17. Ein dunkles Fenster für Paragraph und Begriff;
   gemerkt heißt: Symbol gefüllt in Gelb #f2d36b. Farbcode: Voraussetzung
   grün, Rechtsfolge terrakotta, Ausnahme gelb, als Leuchtstift-Fläche.
   ========================================================================== */
:root { --merk-gelb: #f2d36b; --fenster: #201e1d; --fenster-text: #f5ead8; --fenster-leise: #c9bba4;
  --fc-v: #e1eecc; --fc-r: #ffe1d0; --fc-a: #fbefb8; }

/* Antippbar in Begründung und Lösung: Paragraph fett, Begriff grün unterlegt. */
.mk { display: inline; margin: 0; padding: 0 3px; border: 0; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; line-height: inherit; }
.mk-norm { font-family: var(--schrift-norm); font-weight: 700; background: var(--flaeche-2); box-shadow: inset 0 -1.5px 0 var(--linie); }
.mk-begriff { background: var(--gut-sanft); color: var(--gut-kante); font-weight: 600; }
.mk:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
:root[data-modus="dunkel"] .mk-begriff { color: var(--tinte); }

.mk-fenster { position: absolute; z-index: 60; box-sizing: border-box; display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 18px;
  background: var(--fenster); color: var(--fenster-text); box-shadow: 0 18px 40px -12px rgb(32 30 29 / 55%); animation: mk-auf 180ms ease-out; }
.mk-fenster::before { content: ""; position: absolute; top: -7px; left: var(--pfeil, 24px); width: 14px; height: 14px; background: var(--fenster); transform: rotate(45deg); border-radius: 2px; }
@keyframes mk-auf { from { opacity: 0; transform: translateY(-4px); } }
.mk-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mk-nr { font: 700 22px/1.15 var(--schrift-norm); }
.mk-begriff-name { font: 400 22px/1.15 var(--schrift-titel); }
.mk-merk { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px 0 0; border: 0; border-radius: 12px; background: none; color: var(--fenster-leise); cursor: pointer; flex: none; }
.mk-merk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mk-merk[aria-pressed="true"] { color: var(--merk-gelb); }
.mk-merk[aria-pressed="true"] svg { fill: currentColor; }
.mk-titel { margin: -4px 0 0; font: 400 16px/1.3 var(--schrift-norm); color: #e3c58b; }
.mk-wortlaut p, .mk-erklaerung { margin: 0; font-size: 15px; line-height: 1.6; }
.mk-wortlaut { display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; }
.mk-norm-zeile { margin: 0; font: 700 15px var(--schrift-norm); }
.mk-latein { justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--fenster); border: 1px solid #3a3633; color: var(--merk-gelb); font: italic 400 16px/1.3 var(--schrift-norm); }
.ml-karte .mk-latein { background: var(--tinte); border-color: var(--tinte); }
.mk-chip { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #4a3d16; color: var(--merk-gelb); font-size: 12px; font-weight: 700; }
.mk-chip[hidden] { display: none; }
/* Zugeklappt: rund sechs Zeilen, der Rest läuft aus; „Weiterlesen“ steht
   direkt darunter. */
.ist-kurz { overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.mk-wortlaut.ist-kurz, .mk-erklaerung.ist-kurz { max-height: 144px; overflow: hidden; }
.ml-text.ist-kurz, .ml-text-zeile.ist-kurz { max-height: 160px; }
[data-kurz]:focus { outline: none; }
.mk-weiter { justify-self: start; margin: -4px 0 0; padding: 6px 0; border: 0; background: none; color: var(--fenster-text); font: 700 15px var(--schrift); cursor: pointer; }
.ml-karte .mk-weiter { color: var(--akzent-text, var(--akzent)); }
.mk-weiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .mk-fenster { animation: none; } }

/* -- Seiten Mein Kodex und Wortschatz ---------------------------------------- */
.ml { max-width: 640px; margin: 0 auto; padding: 16px 16px 72px; display: grid; gap: 14px; }
.ml-geraet { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--flaeche); font-size: var(--t-1); font-weight: 600; }
.ml-geraet .sym { width: 18px; height: 18px; }
.ml-geraet span { flex: 1; }
.ml-geraet button { border: 0; background: none; color: var(--akzent-text, var(--akzent)); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 0; }
.ml-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-titel-seite { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 400 clamp(30px, 4vw, 40px)/1.05 var(--schrift-titel); }
.ml-zeichen-para { font: 400 1.15em/1 var(--schrift-norm); }
.ml-zeichen-wort { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gut); color: #fff; }
.ml-zeichen-wort .sym { width: 22px; height: 22px; fill: currentColor; }
.ml-blog { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--tinte); }
.ml-blog .sym { width: 22px; height: 22px; }
.ml-schalter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ml-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--tinte); font: 700 15px var(--schrift); cursor: pointer; }
.ml-knopf .sym { width: 18px; height: 18px; }
.ml-autopilot[aria-pressed="true"] { background: var(--akzent-sanft); border-color: var(--akzent); color: var(--akzent-text, var(--tinte)); }
.ml-farben[aria-pressed="true"] { border-color: var(--tinte); background: var(--flaeche-2); }
.ml-punkte { display: inline-flex; }
.ml-punkte i { width: 12px; height: 12px; border-radius: 50%; margin-right: -4px; border: 1.5px solid var(--flaeche); }
.ml-punkte i:nth-child(1) { background: var(--gut); } .ml-punkte i:nth-child(2) { background: var(--akzent); } .ml-punkte i:nth-child(3) { background: #c9a43c; }
.ml-info { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--tinte); cursor: pointer; }
.ml-info[aria-expanded="true"] { background: var(--fenster); color: var(--fenster-text); }
.ml-info .sym { width: 20px; height: 20px; }
.ml-zahl { margin-left: auto; font: 400 15px var(--schrift-norm); color: var(--gedaempft); }
.ml-blase { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--fenster); color: var(--fenster-text); }
.ml-blase > .sym { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #4a2f1d; color: #f0a575; flex: none; }
.ml-blase b { display: block; font: 400 18px/1.2 var(--schrift-titel); }
.ml-blase p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--fenster-leise); }
.ml-legende { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; font-size: var(--t-1); font-weight: 700; }
.ml-legende span { padding: 3px 10px; border-radius: 6px; }
.ml-gesetz { margin: 8px 0 -4px; font: 400 18px var(--schrift-norm); color: var(--gedaempft); }
.ml-karten { display: grid; gap: 12px; }
.ml-karte { display: grid; gap: 6px; padding: 16px 18px; border-radius: 22px; background: var(--flaeche); border: 1.5px solid var(--linie); }
.ml-kopf { display: flex; align-items: flex-start; gap: 10px; }
.ml-nr { flex: 1; margin: 0; font: 700 24px/1.15 var(--schrift-norm); color: var(--tinte); }
.ml-begriff { flex: 1; margin: 0; font: 400 22px/1.15 var(--schrift-titel); }
.ml-auto { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--akzent-sanft); color: var(--akzent-text, var(--tinte)); font-size: 12px; font-weight: 700; }
.ml-auto .sym { width: 12px; height: 12px; }
.ml-merk { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px 0 0; border: 0; border-radius: 12px; background: none; color: #c9a43c; cursor: pointer; }
.ml-merk .sym { width: 22px; height: 22px; fill: currentColor; }
.ml-titel { margin: -2px 0 2px; font: 400 17px/1.3 var(--schrift-norm); color: var(--gedaempft); }
.ml-text p, .ml-text-zeile { margin: 0 0 6px; font-size: 16px; line-height: 1.65; }
.ml-norm { margin: 0; font: 400 16px var(--schrift-norm); }
.ml-leer { display: grid; gap: 14px; justify-items: start; padding: 20px; border-radius: 22px; background: var(--flaeche); border: 1.5px dashed var(--linie); }
.ml-leer p { margin: 0; line-height: 1.6; }
/* Farbcode als Leuchtstift (Entwurf 17). */
mark.fc-v, .fc-v { background: var(--fc-v); color: #2b3520; }
mark.fc-r, .fc-r { background: var(--fc-r); color: #5a2a12; }
mark.fc-a, .fc-a { background: var(--fc-a); color: #4a3a0c; }
mark[class^="fc-"] { padding: 1px 2px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (min-width: 900px) { .ml { padding-top: 32px; } }