*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; color: #1c1c28; background: #f6f7fb; }
.kopf { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem; background: #fff; border-bottom: 1px solid #dde; }
.logo { font-weight: 700; color: inherit; text-decoration: none; }
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
.formular { display: grid; gap: 1rem; }
.formular label { display: grid; gap: .25rem; }
input, button { font: inherit; min-height: 44px; padding: .5rem .75rem; border-radius: .5rem; }
input { border: 1px solid #99a; width: 100%; }
button { border: 0; background: #3b5bdb; color: #fff; cursor: pointer; }
.errorlist { margin: 0; padding: .5rem 1rem; list-style: none; background: #ffe3e3; border-radius: .5rem; }
select { font: inherit; min-height: 44px; padding: .5rem .75rem; width: 100%; border-radius: .5rem; border: 1px solid #99a; background: #fff; color: inherit; }
.knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.knoepfe button { min-height: 64px; font-weight: 600; }
button:disabled { background: #99a; cursor: not-allowed; }
.hinweis { padding: .75rem 1rem; background: #fff3bf; border-radius: .5rem; }
.zuletzt { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.zuletzt li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: #fff; border-radius: .5rem; }
.quote { color: #555; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  body { color: #e8e8f0; background: #14141c; }
  .kopf, .zuletzt li, select { background: #1e1e2a; border-color: #333; }
  input { background: #1e1e2a; color: inherit; border-color: #556; }
  .hinweis { background: #4a3f10; }
  .quote { color: #aab; }
}
.chat-titel { font-size: 1.1rem; margin: 0 0 .75rem; }
#verlauf { display: grid; gap: .5rem; padding-bottom: 8rem; }
.nachricht { max-width: 90%; padding: .5rem .75rem; border-radius: .75rem; background: #fff; overflow-wrap: anywhere; }
.nachricht.user { justify-self: end; background: #dbe4ff; }
.nachricht .text { white-space: pre-wrap; }
.nachricht.fehler { background: #ffe3e3; }
.nachricht .foto { font-size: .8rem; font-weight: 600; }
.nachricht .katex-display { overflow-x: auto; overflow-y: hidden; }
.chat-form { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; padding: .5rem; background: #fff; border-top: 1px solid #dde; align-items: end; }
.chat-form textarea { font: inherit; padding: .5rem; border: 1px solid #99a; border-radius: .5rem; resize: none; min-width: 0; background: inherit; color: inherit; }
.knopf { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .75rem; border-radius: .5rem; background: #3b5bdb; color: #fff; cursor: pointer; }
#zuschneiden { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; gap: .5rem; padding: .75rem; background: #14141c; color: #fff; }
#zuschneiden[hidden] { display: none; }
#zuschneiden p { margin: 0; font-weight: 600; }
.crop-bild { flex: 1; min-height: 0; }
.crop-bild img { display: block; max-width: 100%; }
.crop-knoepfe { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; }
button.sekundaer, a.knopf.sekundaer { background: #556; }
body.dialog-offen { overflow: hidden; }
@media (prefers-color-scheme: dark) {
  .nachricht { background: #1e1e2a; }
  .nachricht.user { background: #2b3a78; }
  .nachricht.fehler { background: #4a1f1f; }
  .chat-form { background: #1e1e2a; border-color: #333; }
}
.aufgabentext { font-size: 1.15rem; }
#aufgabe input, #aufgabe textarea { min-height: 44px; }
#aufgabe .knoepfe form { display: contents; }

.tabelle { overflow-x: auto; }
.tabelle table { border-collapse: collapse; min-width: 100%; }
.tabelle th, .tabelle td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #dde; white-space: nowrap; }
.karte { padding: .5rem 1rem; margin-bottom: .5rem; border: 1px solid #dde; border-radius: 6px; }