/* Lernbegleiter — Darstellung. Enthält keinen Stoff. Diagramme einfarbig (Akzent); wer welches
   Fach ist, sagt die Beschriftung, nicht die Farbe. */
:root{
  --papier:#F2F1EC; --flaeche:#FBFAF6; --tinte:#1A1D1B; --weich:#55605A; --linie:#C3C6BD;
  --akzent:#1F5D4C; --akzent-hell:#D5E6DF; --gut:#2C6E49; --gefahr:#A8322A; --warn:#8A4B1F;
  --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;
        --akzent:#5FBFA1;--akzent-hell:#23382F;--gut:#6FBF8F;--gefahr:#E0685A;--warn:#D98B4A}
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.6 var(--text)}
.rand{max-width:64rem;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)}
a{color:inherit}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
h1{font-size:1.7rem;line-height:1.2;margin:1.4rem 0 .2rem}
h2{font-size:1.3rem;margin:1rem 0 .3rem}
h3{font-size:1.02rem;margin:1rem 0 .4rem}
.lead{color:var(--weich);margin:.2rem 0 1rem;max-width:44rem}
.hinweis{background:var(--flaeche);border-left:4px solid var(--akzent);padding:.7rem 1rem;margin:1.2rem 0}
.hinweis p{margin:.25rem 0}
button,.dateiknopf{font:inherit;font-size:.95rem;cursor:pointer;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:var(--papier);display:inline-block}
button.zweit,.dateiknopf{background:transparent;color:var(--akzent);font-family:var(--mono);font-size:.85rem}
button.klein{padding:.2rem .55rem;font-size:.8rem}
button.gefahr{border-color:var(--gefahr);color:var(--gefahr)}
button:disabled{opacity:.5;cursor:default}
button[aria-pressed=true]{background:var(--akzent);color:var(--papier)}
.dateiknopf input{position:absolute;width:1px;height:1px;opacity:0}
.dateiknopf:focus-within{outline:3px solid var(--akzent);outline-offset:2px}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0;align-items:center}
input,select,textarea{font:inherit;padding:.4rem .55rem;border:2px solid var(--linie);border-radius:6px;background:var(--papier);color:var(--tinte);max-width:100%}
textarea{width:100%;resize:vertical}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:.9rem 1.1rem;margin:.7rem 0}
.formular{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:end}
.formular label{display:flex;flex-direction:column;font-family:var(--mono);font-size:.76rem;color:var(--weich);gap:.15rem}
.formular input[type=text]{min-width:12rem}
.formular input[type=number]{width:6.5rem}
.fehler{flex-basis:100%;margin:0;color:var(--gefahr);border-left:3px solid var(--gefahr);padding-left:.6rem}
.rueckblick label{display:block;margin:.6rem 0 .2rem;font-weight:600}

.reiter{display:flex;flex-wrap:wrap;gap:.3rem;margin:1rem 0 .6rem;border-bottom:1px solid var(--linie);padding-bottom:.5rem}
.reiter button{background:transparent;color:var(--tinte);border-color:transparent;border-radius:999px;transition:background .2s,color .2s}
.reiter button:hover{border-color:var(--linie)}
.reiter button[aria-selected=true]{background:var(--akzent);color:var(--papier)}
.zaehler:not(:empty){display:inline-block;min-width:1.3rem;text-align:center;background:var(--warn);color:var(--papier);border-radius:999px;font-family:var(--mono);font-size:.72rem;padding:0 .3rem;margin-left:.2rem}
.bereich{opacity:0;transform:translateY(8px)}
.bereich.an{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
html:not(.js) .bereich{opacity:1;transform:none}

.heute-raster{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:.8rem;align-items:start}
.ringe{display:flex;gap:.6rem;align-items:center;justify-content:center}
.ringe svg,.uhrbild{width:8.2rem;height:8.2rem}
.ring-bahn{fill:none;stroke:var(--linie);stroke-width:10}
.ring-wert{fill:none;stroke:var(--akzent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .9s ease}
.ring-zahl{font:700 15px var(--text);fill:var(--tinte)}
.ring-text{font:9.5px var(--mono);fill:var(--weich)}
.hinweise{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.45rem}
.hinweis-karte{display:flex;gap:.7rem;justify-content:space-between;align-items:center;background:var(--papier);border-left:4px solid var(--akzent);border-radius:0 8px 8px 0;padding:.5rem .8rem}
.pfeil{font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.countdowns{list-style:none;padding:0;margin:.3rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.6rem}
.countdown{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:.6rem .9rem;display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:baseline}
.countdown strong{font-size:1.9rem;line-height:1.1;color:var(--akzent)}
.countdown.nah{border:2px solid var(--warn)}
.countdown.nah strong{color:var(--warn)}
.countdown>span:nth-of-type(n+2),.countdown>span:only-of-type{grid-column:1 / -1}
.aufgaben{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.35rem}
.aufgabe{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:.4rem .7rem;transition:opacity .3s}
.aufgabe input{width:1.2rem;height:1.2rem;accent-color:var(--akzent)}
.aufgabe label{display:flex;flex-direction:column;cursor:pointer;min-width:0}
.aufgabe.erledigt{opacity:.55}
.aufgabe.erledigt .a-titel{text-decoration:line-through}
.marke{font-family:var(--mono);font-size:.72rem;border:1px solid var(--akzent);color:var(--akzent);border-radius:999px;padding:0 .5rem}
.marke.warn{border-color:var(--warn);color:var(--warn)}
.schritte{padding-left:1.3rem}

.gesamtzeile{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;margin:.4rem 0}
.gesamtzeile strong{font-size:1.8rem;color:var(--akzent)}
.faecher{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:.8rem;margin:.6rem 0}
.fachkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.fachkopf{display:flex;align-items:baseline;gap:.6rem}
.fachkopf h3{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.schnitt{font-size:1.5rem;font-weight:700;color:var(--akzent)}
.trend{font-size:1.2rem;font-weight:700}
.trend.gut{color:var(--gut)}
.trend.warn{color:var(--warn)}
.spark{width:100%;max-width:14rem;height:auto}
.spark-linie{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linejoin:round}
.spark-punkt{fill:var(--akzent);stroke:var(--flaeche);stroke-width:2}
.notenliste{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.2rem}
.notenliste li{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:center}
.zielrechner{border-top:1px dashed var(--linie);padding-top:.4rem;margin-top:.2rem;display:grid;gap:.25rem}
.zielrechner input{width:6rem}
.zielantwort{margin:0;font-size:.93rem;min-height:1.4rem}

.zeit-raster{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:.8rem;align-items:start}
.uhr{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.uhr label{font-family:var(--mono);font-size:.76rem;color:var(--weich)}
.uhr-anzeige{font:700 2rem var(--mono);margin:-5.6rem 0 3.2rem}
.uhr .ring-wert{transition:stroke-dashoffset .5s linear}
.wochenbild{width:100%;max-width:26rem;height:auto;display:block}
.achse{stroke:var(--linie);stroke-width:1;fill:none}
.balken{fill:var(--akzent);transform-origin:center 122px;animation:wachsen .6s ease both}
.saeule.heute .tagname{font-weight:700;fill:var(--tinte)}
.wert{font:10px var(--mono);fill:var(--weich)}
.tagname{font:10px var(--mono);fill:var(--weich)}
.jefach{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.3rem}
.fachzeit{display:grid;grid-template-columns:minmax(5rem,10rem) 1fr auto;gap:.6rem;align-items:center}
.bahn{height:.6rem;background:var(--linie);border-radius:999px;overflow:hidden}
.bahn span{display:block;height:100%;width:0;background:var(--akzent);border-radius:999px;transition:width .8s ease}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;border-bottom:1px solid var(--linie);padding:.3rem .5rem}
footer{margin:1.5rem 0 2.5rem;border-top:1px solid var(--linie);padding-top:.8rem}
@keyframes auftritt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.auftritt{animation:auftritt .4s ease both}
@media (max-width:720px){.heute-raster,.zeit-raster{grid-template-columns:1fr}.aufgabe{grid-template-columns:auto 1fr auto}.aufgabe .marke{display:none}.formular label{flex:1 1 9rem}.formular input[type=text]{min-width:0;width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.bereich{opacity:1;transform:none}}

/* Lernplan der Lernwelt unter "Dran" */
.lernplan-block{margin:.4rem 0 .8rem;border-left:4px solid var(--akzent)}
.lernplan-block h4{margin:0 0 .4rem;font-size:1rem}
.lernplan-block p{margin:.6rem 0 0}
.lernplan-liste{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.lernplan-liste li{display:grid;grid-template-columns:1fr auto;gap:.15rem .7rem;align-items:center}
.lernplan-liste li a{font-weight:600}
.lernplan-liste li .mono{grid-column:1;grid-row:2}
.lernplan-liste li button{grid-column:2;grid-row:1 / span 2}
@media (max-width:30rem){.lernplan-liste li{grid-template-columns:1fr}.lernplan-liste li button{grid-column:1;grid-row:auto;justify-self:start}}