/* Lerneinheit — Darstellung. Enthaelt keinen Stoff. */
:root{
  --papier:#F2F1EC; --flaeche:#FBFAF6; --tinte:#1A1D1B; --weich:#55605A;
  --linie:#C3C6BD; --gut:#2C6E49; --warn:#8A4B1F; --recht:#2B4C7E;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--papier:#141715;--flaeche:#1C201D;--tinte:#ECEFE9;--weich:#A5AFA8;
        --linie:#333A35;--gut:#6FBF8F;--warn:#D98B4A;--recht:#8FB4E8}
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font:17px/1.65 var(--text)}
.rand{max-width:50rem;margin:0 auto;padding:0 1rem}
header{border-bottom:1px solid var(--linie);background:var(--flaeche);padding:.9rem 0}
.kopfzeile{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:baseline}
.wortmarke{font-family:var(--mono);letter-spacing:.14em;font-size:.95rem;
  border-bottom:2px solid var(--akzent);padding-bottom:2px}
.mono{font-family:var(--mono);font-size:.76rem;color:var(--weich)}
h1{font-size:1.65rem;margin:1.6rem 0 .3rem;letter-spacing:-.01em}
h2{font-size:1.25rem;margin:2.2rem 0 .5rem}
h3{font-size:1.05rem;margin:1.6rem 0 .4rem}
h2 .nr,h3 .nr{font-family:var(--mono);font-size:.78rem;color:var(--akzent);margin-right:.5rem}
p{margin:.6rem 0}
.hinweis{background:var(--flaeche);border-left:4px solid var(--akzent);padding:.9rem 1rem;margin:1.2rem 0}
.hinweis p{margin:.2rem 0}
.ziel{border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);
  padding:1rem 1.2rem;margin:1.4rem 0}
.ziel .art{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akzent)}
.bezug{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.6rem 0 0;font-size:.88rem;color:var(--weich)}
nav.reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0}
nav.reiter button{font:inherit;font-size:.9rem;cursor:pointer;padding:.45rem .9rem;border-radius:999px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte)}
nav.reiter button[aria-selected=true]{background:var(--akzent);border-color:var(--akzent);color:var(--papier)}
ul,ol{margin:.5rem 0;padding-left:1.2rem}
li{margin:.35rem 0}
table{border-collapse:collapse;width:100%;font-size:.93rem;margin:.8rem 0}
th,td{text-align:left;vertical-align:top;padding:.5rem .7rem .5rem 0;border-bottom:1px solid var(--linie)}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--weich)}
pre{background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;
  padding:.9rem 1rem;overflow-x:auto;font-family:var(--mono);font-size:.84rem;line-height:1.5}
.marke{border-left:4px solid var(--linie);background:var(--flaeche);padding:.8rem 1rem;margin:1rem 0}
.marke .art{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.25rem}
.marke.merke{border-left-color:var(--akzent)}
.marke.merke .art{color:var(--akzent)}
.marke.falle{border-left-color:var(--warn)}
.marke.falle .art{color:var(--warn)}
.marke.recht{border-left-color:var(--recht)}
.marke.recht .art{color:var(--recht)}
.marke.ris{border-left-color:var(--warn);border:1px dashed var(--warn);border-left-width:4px}
.marke.ris .art{color:var(--warn)}
.marke.praxis{border-left-color:var(--gut)}
.marke.praxis .art{color:var(--gut)}
.marke p{margin:.3rem 0}
.kontrolle-karte{border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);
  padding:.9rem 1.1rem;margin:0 0 .8rem}
.kontrolle-karte .frage{font-weight:600;margin:0}
details{margin-top:.5rem}
summary{cursor:pointer;font-family:var(--mono);font-size:.78rem;color:var(--akzent)}
.loesung{margin:.4rem 0 0;color:var(--weich)}
.stand-marke{font-family:var(--mono);font-size:.7rem;padding:.12rem .5rem;border-radius:3px;
  border:1px solid var(--linie)}
.stand-marke.offen{border-color:var(--warn);color:var(--warn)}
.stand-marke.fertig{border-color:var(--gut);color:var(--gut)}
footer{margin:3rem 0 2rem;color:var(--weich)}

.tabelle-scroll{overflow-x:auto;max-width:100%}
td{overflow-wrap:anywhere}td:first-child{overflow-wrap:break-word;hyphens:auto}
main{overflow-wrap:break-word}
.lehrplan{border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);padding:.4rem 1.2rem .8rem;margin:1.2rem 0}
.lehrplan h2{margin:.6rem 0 .3rem;font-size:1rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.lehrplan dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;margin:0;font-size:.92rem}
.lehrplan dt{font-family:var(--mono);font-size:.74rem;color:var(--weich);padding-top:.2rem}
.lehrplan dd{margin:0}
@media (max-width:560px){.lehrplan dl{grid-template-columns:1fr}.lehrplan dt{padding-top:.5rem}}
.ziel .lehrplan-zeile{font-size:.92rem;color:var(--weich)}
.marke.eltern{border-left-color:var(--recht)}.marke.eltern .art{color:var(--recht)}
.marke.beispiel,.marke.versuch{border-left-color:var(--gut)}.marke.beispiel .art,.marke.versuch .art{color:var(--gut)}
.marke.hinweis{border-left-color:var(--weich)}
.aufgabe{border:1px solid var(--akzent);border-radius:8px;background:var(--flaeche);padding:.9rem 1.1rem;margin:1rem 0}
.aufgabe .art{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent)}
.aufgabe .frage{margin:.3rem 0 .6rem}
.eingabe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.eingabe input,.eingabe select{font:inherit;padding:.4rem .6rem;border:1px solid var(--linie);border-radius:6px;background:var(--papier);color:var(--tinte);min-width:8rem;max-width:100%}
.einheit{font-family:var(--mono);font-size:.85rem;color:var(--weich)}
button{font:inherit;font-size:.9rem;cursor:pointer;padding:.4rem .9rem;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:var(--papier)}
button.nochnicht{background:transparent;color:var(--warn);border-color:var(--warn)}
button.gut{background:var(--gut);border-color:var(--gut)}
.knopf{display:inline-block;text-decoration:none;padding:.45rem 1rem;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:var(--papier)}
.knopf.zweit{background:transparent;color:var(--akzent)}
.rueck{min-height:1.4em;margin:.5rem 0 0;font-size:.92rem}
.rueck.gut{color:var(--gut)}.rueck.nochnicht{color:var(--warn)}
.bewerten{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem}
.bruchbild{margin:1rem 0}
.bruchbild svg{max-width:340px;width:100%;height:auto;display:block}
.bruchbild .voll{fill:var(--akzent);stroke:var(--tinte);stroke-width:1.2}
.bruchbild .leer{fill:var(--papier);stroke:var(--tinte);stroke-width:1.2}
.bruchbild figcaption{font-size:.88rem;color:var(--weich)}
.verweis{margin:1rem 0}
nav.reiter button{background:var(--flaeche);color:var(--tinte);border-color:var(--linie);border-radius:999px}
@media print{header,nav.reiter,#wiederholung,.eingabe,.bewerten,footer{display:none!important}
  body{background:#fff;color:#000}details{display:block}details>*{display:block}.aufgabe,.marke,.kontrolle-karte{break-inside:avoid}}
[hidden]{display:none!important}

.marke.unterricht,.marke.leitung{border-left-color:var(--recht)}.marke.unterricht .art,.marke.leitung .art{color:var(--recht)}
figure.bild{margin:1.2rem 0;text-align:center}figure.bild img{max-width:100%;height:auto;border:1px solid rgba(0,0,0,.12);border-radius:.4rem;background:#fff}figure.bild figcaption{font-size:.88rem;opacity:.8;margin-top:.4rem}

/* Rückmeldeweg (Fassung 38.0) */
.rueckmeldung { margin: 1.5rem 0 0.5rem; }
.rueckmeldung span { display: block; opacity: 0.8; }
@media print { .rueckmeldung { display: none; } }

/* ---- Bewegte Schicht (lerneinheit.bewegung.js, Fassung 88.0) ---- */
.le-balken{position:fixed;top:0;left:0;right:0;height:4px;background:var(--akzent);transform-origin:0 50%;
  transform:scaleX(0);z-index:50;pointer-events:none}
.le-ring{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 1rem}
.le-ring svg{width:3rem;height:3rem;transform:rotate(-90deg)}
.le-ring circle{fill:none;stroke-width:3.2}
.le-ring-grund{stroke:var(--linie,#ccc)}
.le-ring-wert{stroke:var(--akzent);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .6s ease}
.le-ring-text{font-size:.92rem}
.le-ring.le-voll .le-ring-text::after{content:" ✓";color:var(--akzent);font-weight:700}
#module button.le-fertig::after{content:" ✓";color:var(--akzent);font-weight:700}
.aufgabe.le-geloest{border-left:4px solid var(--akzent)}
@media (prefers-reduced-motion:no-preference){
  .le-ein{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;transition-delay:var(--d,0ms)}
  .le-ein.le-da{opacity:1;transform:none}
  .aufgabe.le-neu-geloest{animation:le-pop .5s ease-out}
  .rueck.gut{animation:le-auf .35s ease-out}
  .le-ring.le-voll svg{animation:le-pop .6s ease-out}
  #module button{transition:background .2s,color .2s,transform .2s}
  #module button:hover{transform:translateY(-2px)}
}
@keyframes le-pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes le-auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media print{.le-balken,.le-ring{display:none}.le-ein{opacity:1!important;transform:none!important}}

/* Fremdes Material mit Nennung (Fassung 90.0) */
.marke.fremd { border-left-style: dashed; }
.marke.fremd .nennung { font-size: .82em; opacity: .8; margin-top: .4em; }