/* Lernportal – mobil zuerst, nur hell (Tino 2026-11-11: weißer Hintergrund, schwarze Schrift, kein Dunkelmodus).
   Farbwelt (Tino 2026-11-11): Grundfarbe dunkles Orange, Nebenfarben aufgehellte Orangetöne, Grautöne zum Rahmen,
   Blau nur für Hervorhebungen (Links, Tipps, Fokus, gewählte Antwort). Keine Fachfarben mehr. */
:root {
  --orange: #c2410c; --orange-dunkel: #9a3412; --orange-hell: #fdba74; --orange-zart: #ffedd5; --orange-hauch: #fff7ed;
  --blau: #1d4ed8; --blau-zart: #eff6ff; --blau-linie: #93c5fd;
  --bg: #ffffff; --flaeche: #ffffff; --text: #111111; --leise: #4b4540; --linie: #d6d3d1; --linie-stark: #a8a29e;
  --akzent: var(--orange); --akzent-text: #ffffff;
  --gut: #15803d; --gut-bg: #ecfdf3; --schlecht: #b91c1c; --schlecht-bg: #fef2f2;
  --merke-bg: var(--orange-zart); --merke-linie: var(--orange); --tipp-bg: var(--blau-zart); --tipp-linie: var(--blau);
  --fach: var(--orange); --radius: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* „hidden“ gilt immer, auch gegen display-Regeln von Komponenten (sonst war der Chat überall sichtbar) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 19px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
main { max-width: 46rem; margin: 0 auto; padding: 0 16px 3rem; }
a { color: var(--blau); }
a:hover { color: var(--orange-dunkel); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 1rem 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; border-bottom: 3px solid var(--fach); padding-bottom: .2rem; }
h3 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
img, svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: .8rem 0; }
th, td { border: 1px solid var(--linie); padding: .35rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--flaeche); }
.klein { font-size: .85rem; color: var(--leise); }
.sprunglink { position: absolute; left: -999px; }
.sprunglink:focus { left: 8px; top: 8px; background: var(--flaeche); padding: .4rem; z-index: 9; }

.kopfleiste {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 16px; background: var(--flaeche); border-bottom: 3px solid var(--orange);
}
.marke { display: flex; gap: .5rem; align-items: center; font-weight: 700; color: var(--text); text-decoration: none; }
.konto-anzeige { font-weight: 700; color: var(--akzent); text-decoration: none; }
.fuss { max-width: 46rem; margin: 2rem auto; padding: 0 16px; color: var(--leise); font-size: .9rem; }
.fuss a { color: var(--leise); }
.link-knopf { background: none; border: 0; color: var(--leise); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }

.knopf {
  display: inline-block; background: var(--orange); color: var(--akzent-text); border: 0; border-radius: 999px;
  padding: .7rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; text-decoration: none;
}
.knopf:hover:not(:disabled) { background: var(--orange-dunkel); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.zweit { background: transparent; color: var(--fach); border: 2px solid var(--fach); }
.klein-knopf { padding: .45rem 1rem; min-height: 40px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.pfad { font-size: .9rem; color: var(--leise); margin-top: 1rem; }
.kennung { color: var(--leise); font-weight: 500; font-size: .85em; }
.meta { color: var(--leise); margin-top: 0; }
.marke-pflicht { color: var(--fach); font-weight: 600; }
.lernziele { background: var(--flaeche); border-radius: var(--radius); padding: .8rem 1rem .8rem 2.2rem; border: 1px solid var(--linie); }

.durcharbeit { position: sticky; top: 49px; z-index: 4; background: var(--bg); padding: .4rem 0; }
.balken { height: 8px; background: var(--linie); border-radius: 4px; overflow: hidden; }
.balken span { display: block; height: 100%; width: 0; background: var(--fach); transition: width .3s; }
.durcharbeit p { margin: .2rem 0 0; font-size: .85rem; color: var(--leise); }

.beispiel { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--fach);
  border-radius: var(--radius); padding: .4rem 1rem .8rem; margin: 1rem 0; }
.schritt { border-top: 1px dashed var(--linie); padding: .3rem 0; }
.schritt summary { cursor: pointer; font-weight: 600; padding: .4rem 0; min-height: 44px; display: flex; align-items: center; }
.schritt[open] summary { color: var(--fach); }
.merke, .hinweis { border-radius: var(--radius); padding: .6rem 1rem; margin: 1rem 0; border-left: 5px solid; }
.merke { background: var(--merke-bg); border-color: var(--merke-linie); }
.hinweis { background: var(--tipp-bg); border-color: var(--tipp-linie); }
.kasten-titel { font-weight: 700; margin: 0 0 .3rem; }
.formel-block { display: block; overflow-x: auto; margin: .6rem 0; }
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* Aufgaben */
.aufgabe, .kurzfrage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 1rem 0; }
.aufgabe .frage, .kurzfrage .frage { font-weight: 600; margin: 0 0 .6rem; }
.optionen { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.optionen label { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px;
  padding: .6rem .8rem; cursor: pointer; min-height: 44px; }
.optionen input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.optionen label:has(input:checked) { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); background: var(--blau-zart); }
.luecke { font: inherit; border: 0; border-bottom: 2px solid var(--fach); background: transparent; color: inherit;
  min-width: 6ch; width: 10ch; padding: 0 .2rem; }
.wortliste { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; padding: 0; list-style: none; }
.wortliste li { border: 1px dashed var(--leise); border-radius: 999px; padding: .1rem .7rem; font-size: .9rem; }
.zeile { display: grid; grid-template-columns: 1fr; gap: .3rem; margin: .5rem 0; }
@media (min-width: 560px) { .zeile { grid-template-columns: 1fr 1fr; align-items: center; } }
select, input[type=number], input[type=text], input[type=password], input:not([type]) {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg);
  color: inherit; min-height: 44px; max-width: 100%;
}
.zahlfeld { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0; }
.zahlfeld input { width: 9rem; }
.reihe { list-style: none; padding: 0; margin: 0; }
.reihe li { display: flex; gap: .4rem; align-items: center; border: 1px solid var(--linie); border-radius: 10px;
  padding: .4rem .6rem; margin: .3rem 0; background: var(--bg); }
.reihe li span { flex: 1; }
.reihe button { min-width: 44px; min-height: 44px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: inherit; font-size: 1.1rem; }
.wf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; border-bottom: 1px dashed var(--linie); padding: .4rem 0; }
.wf .wahl { display: flex; gap: .8rem; }
.wf .wahl label { min-height: 44px; display: flex; align-items: center; gap: .3rem; }
.rueckmeldung { margin-top: .7rem; padding: .6rem .8rem; border-radius: 10px; }
.rueckmeldung.gut { background: var(--gut-bg); }
.rueckmeldung.schlecht { background: var(--schlecht-bg); }
.rueckmeldung strong { display: block; }
.ehrenwort { display: flex; gap: .5rem; align-items: center; margin: .6rem 0 1rem; min-height: 44px; }
.vorpruefung { font-size: .95rem; }
.vorpruefung.ja { color: var(--gut); }
.vorpruefung.nein { color: var(--schlecht); }
.ergebnis { text-align: center; background: var(--flaeche); border-radius: var(--radius); padding: 1rem; border: 2px solid var(--fach); }
.ergebnis .gross { font-size: 2.2rem; font-weight: 800; margin: 0; }
.melden { margin-top: .4rem; }
.melden summary { font-size: .85rem; color: var(--leise); cursor: pointer; }
.melden textarea { width: 100%; min-height: 4rem; font: inherit; border-radius: 8px; border: 1px solid var(--linie); background: var(--bg); color: inherit; }
.lehrplan { margin-top: 2rem; color: var(--leise); }

/* Start, Fach */
.kontokarte { background: var(--flaeche); border-radius: var(--radius); padding: 1rem; border: 1px solid var(--linie); }
.kontokarte .gross { font-size: 2rem; font-weight: 800; margin: 0; color: var(--akzent); }
.einloesen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.einloesen input { width: 6rem; }
.fachkacheln { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.fachkacheln a { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-top: 5px solid var(--fach);
  border-radius: var(--radius); padding: .8rem; text-decoration: none; color: var(--text); font-weight: 600; min-height: 4.5rem; }
.fachkacheln .klein { display: block; font-weight: 400; }
.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); margin: .6rem 0; padding: .2rem .8rem; }
.block summary { font-weight: 700; cursor: pointer; padding: .6rem 0; min-height: 44px; }
.block .nr { color: var(--fach); }
.lektionsliste { list-style: none; padding: 0; margin: 0 0 .6rem; }
.lektionsliste li { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--linie); }
.status { font-size: .85rem; color: var(--leise); white-space: nowrap; }
.status.bestanden { color: var(--gut); font-weight: 600; }
.anmelden { max-width: 22rem; margin: 3rem auto; display: grid; gap: .8rem; }
.anmelden label { display: grid; gap: .2rem; }
.fehler { color: var(--schlecht); min-height: 1.5em; }
.regeln li { margin: .4rem 0; }

/* Elternansicht, Bericht, Unterrichtsstand */
.schnellwahl { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.buchung { display: grid; gap: .5rem; margin-top: 1rem; }
.buchung label, .block label { display: grid; gap: .2rem; margin: .4rem 0; }
.balkenzeile { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: .5rem; align-items: center; font-size: .9rem; }
.balkenzeile .balken span { background: var(--akzent); }
.berichtsvorschau { background: #fff; color: #1d2024; border-radius: var(--radius); padding: .8rem; overflow-x: auto; }
.tabelle-scroll { overflow-x: auto; }
textarea { font: inherit; width: 100%; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg); color: inherit; padding: .4rem; }
fieldset.block { border: 1px solid var(--linie); }

/* Lernbegleiter: am Rechner Seitenleiste rechts, auf dem Handy eigener Reiter (Tino 2026-11-11) */
.begleiter { display: flex; flex-direction: column; gap: .4rem; background: var(--flaeche); padding: .7rem; }
.begleiter-kopf { display: flex; justify-content: space-between; align-items: center; }
.begleiter-info { margin: 0; }
.begleiter-verlauf { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .5rem; min-height: 6rem; }
.blase { padding: .5rem .7rem; border-radius: 12px; overflow-wrap: anywhere; }
.blase-schueler { white-space: pre-wrap; }
.blase p { margin: .3rem 0; }
.blase p:first-child { margin-top: 0; }
.blase p:last-child { margin-bottom: 0; }
.blase ul, .blase ol { margin: .3rem 0; padding-left: 1.3rem; }
.blase code { background: var(--orange-hauch); border: 1px solid var(--linie); border-radius: 4px; padding: 0 .25rem; font-size: .92em; }
.blase table { font-size: .9rem; }
.md-titel { margin-top: .5rem; }
.blase-schueler { background: var(--orange-zart); align-self: flex-end; max-width: 85%; }
.blase-begleiter { background: var(--bg); border: 1px solid var(--linie); align-self: flex-start; max-width: 95%; }
.begleiter-form { display: flex; gap: .4rem; align-items: flex-end; }
.begleiter-form textarea { flex: 1; }
.reiter { display: none; }

@media (min-width: 1100px) {
  body.mit-begleiter main, body.mit-begleiter .fuss { margin-left: max(16px, calc((100vw - 25rem - 46rem) / 2)); margin-right: 25rem; }
  body.mit-begleiter .begleiter { position: fixed; top: 49px; right: 0; bottom: 0; width: 24rem;
    border-left: 1px solid var(--linie); z-index: 6; }
}
@media (max-width: 1099.98px) {
  body.mit-begleiter { padding-bottom: 60px; }
  body.mit-begleiter .reiter { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; height: 56px;
    background: var(--flaeche); border-top: 1px solid var(--linie); }
  .reiter button { flex: 1; border: 0; background: none; color: var(--leise); font: inherit; font-weight: 600; }
  .reiter button[aria-pressed="true"] { color: var(--akzent); box-shadow: inset 0 3px 0 var(--akzent); }
  body.mit-begleiter .begleiter { display: none; }
  body.mit-begleiter.reiter-chat .begleiter { display: flex; position: fixed; top: 49px; left: 0; right: 0; bottom: 56px; z-index: 7; }
  body.mit-begleiter.reiter-chat main, body.mit-begleiter.reiter-chat .fuss { display: none; }
}

/* Aufklappbares deutlich kennzeichnen (Tino 2026-11-11): Pfeil im Kreis vor jeder Zusammenfassung, dreht beim Öffnen */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--orange) no-repeat center / 1rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary::after { content: "antippen"; margin-left: auto; font-size: .75rem; font-weight: 400; color: var(--leise); }
details[open] > summary::after { content: "zuklappen"; }
details.melden > summary::before { width: 1.2rem; height: 1.2rem; background-size: .75rem; background-color: var(--leise); }
details.melden > summary::after { content: none; }
details > summary:hover::before { background-color: var(--orange-dunkel); }
.schritt { border: 1px solid var(--linie); border-left: 4px solid var(--orange); border-radius: 8px; padding: 0 .8rem; margin: .6rem 0; }
.schritt[open] { padding-bottom: .6rem; }
details.block > summary::after { content: none; }

/* Durcharbeit sichtbar machen (Tino 2026-11-11): orange = zählt schon, grau = noch offen */
.punkt { display: inline-block; flex: none; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--linie-stark); margin-right: .5rem; vertical-align: middle; }
.punkt.fertig { background: var(--orange); }
.kurzfrage > .punkt { display: block; margin: 0 0 .3rem; }
.blinken { outline: 3px solid var(--blau); outline-offset: 4px; border-radius: 8px; transition: outline-color .3s; }
/* Hinweis „antippen“ klein oben rechts, damit der Titel die Breite behält */
details > summary { position: relative; padding-right: 4.2rem; }
details > summary::after { position: absolute; right: 0; top: .5rem; }
details.block > summary, details.melden > summary { padding-right: 0; }
.schritt > summary, .lehrplan > summary { padding-right: 4.6rem; }
summary > .punkt { margin-right: 0; }
/* Prüftermine (Tino 2026-11-11) */
.termin { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.termin input, .termin select { width: 100%; min-height: 44px; font: inherit; }
.termin input[data-t="thema"] { grid-column: 1 / -1; }
.termin button { grid-column: 1 / -1; justify-self: start; }