/* EMI lernt · Grundgestaltung (Chat 03–05, umgesetzt in 10a)
   Farben exakt nach Projektvorgabe. Schrift: Inter als Ersatz für Neue Haas Grotesk Display. */

@font-face { font-family: "Inter"; font-weight: 200; font-style: normal; font-display: swap; src: url("../schrift/inter-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("../schrift/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../schrift/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../schrift/inter-latin-500-normal.woff2") format("woff2"); }

:root {
  --violett: #662483;
  --violett-dunkel: #4d1a63;
  --violett-hell: #c9b6d3;
  --grund: #f3f1ee;
  --schrift: #171717;
  --flaeche: #ffffff;
  --leise: #5f5a55;      /* kleine graue Schrift, Kontrast ≥ 4.5:1 */
  --linie: #e4dfd8;
  --linie-2: #d8d1c8;
  --linie-3: #ece8e2;
  --pfeil: #8a837c;
  --leiste-h: 64px;
  --absender-h: 22px;
  --unten: env(safe-area-inset-bottom, 0px);
  --oben: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund);
  color: var(--schrift);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--violett); }
img { display: block; }
:focus-visible { outline: 2px solid var(--violett); outline-offset: 2px; }
[hidden] { display: none !important; }
.versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Rahmen ---------- */
#app { min-height: 100%; }
.seite {
  max-width: 560px; margin: 0 auto;
  padding: calc(var(--oben) + 18px) 20px calc(var(--leiste-h) + var(--absender-h) + var(--unten) + 28px);
  display: flex; flex-direction: column; gap: 20px;
  animation: rein .18s ease-out;
}
.seite.ohne-leiste { padding-bottom: calc(var(--unten) + 20px); min-height: 100%; }
@keyframes rein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seite, .blatt, .toast { animation: none !important; } }

.label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--leise); font-weight: 500;
}
.kopf { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.kopf .logo-quer { height: 28px; width: auto; }
.rund-knopf {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--flaeche); border: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: center; color: var(--schrift); padding: 0; flex-shrink: 0;
}
.zurueck {
  border: none; background: none; padding: 0; min-height: 44px;
  color: var(--violett); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.text-knopf {
  border: none; background: none; padding: 0; min-height: 44px;
  color: var(--violett); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
}
.karte { background: var(--flaeche); border-radius: 20px; padding: 16px 18px; }
h1.gross { margin: 0; font-size: 40px; font-weight: 200; letter-spacing: -0.01em; line-height: 1; }

/* ---------- Begleiter-Sprechblase ---------- */
.begleiter-gruss { display: flex; align-items: flex-end; gap: 12px; }
.begleiter-gruss img { width: 80px; height: 80px; flex-shrink: 0; }
.blase {
  background: var(--flaeche); border-radius: 18px 18px 18px 4px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
}
.blase .wer { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violett); font-weight: 500; }
.blase .was { font-size: 15px; line-height: 1.35; font-weight: 300; }
.tipp { display: flex; align-items: flex-end; gap: 10px; }
.tipp img { width: 52px; height: 52px; flex-shrink: 0; }
.tipp .blase { margin-bottom: 6px; border-radius: 14px 14px 14px 4px; padding: 10px 12px; }
.tipp .blase .was { font-size: 13px; line-height: 1.4; }

/* ---------- Leiste unten + Absender ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding: 6px 8px calc(var(--unten) + 4px);
}
.leiste-innen { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: var(--leiste-h); }
.leiste a {
  text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 52px; color: #625c56; position: relative;
}
.leiste a span.wort { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.leiste a[aria-current="page"] { color: var(--violett); }
.leiste a[aria-current="page"] span.wort { font-weight: 500; }
.leiste .foto-knopf { color: var(--violett); justify-content: flex-end; }
.leiste .foto-knopf .kreis {
  width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; background: var(--violett);
  box-shadow: 0 0 0 6px var(--grund); display: flex; align-items: center; justify-content: center;
}
.leiste .foto-knopf span.wort { font-weight: 500; }
.leiste .zahl {
  position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--violett); color: #fff; font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.absender { display: flex; justify-content: center; align-items: center; height: var(--absender-h); }
.absender img { height: 7px; width: auto; opacity: 0.8; }

/* ---------- Anmelden ---------- */
.anmelden { justify-content: flex-start; padding-top: calc(var(--oben) + 56px); }
.anmelden .logo-hoch { height: 120px; width: auto; margin: 0 auto; }
.wer-lernt { display: flex; flex-direction: column; align-items: center; gap: 32px; flex-grow: 1; }
.kinder { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.kind-knopf {
  height: 84px; border-radius: 20px; border: 1px solid var(--flaeche); background: var(--flaeche);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 24px; width: 100%;
}
.kind-knopf .namenslogo { height: 26px; width: auto; }
.kind-knopf .tier { width: 60px; height: 60px; }
.kind-knopf.bald { background: transparent; border: 1px dashed var(--linie-2); cursor: default; }
.kind-knopf.bald .namenslogo { opacity: 0.4; }
.kind-knopf.bald .tier { opacity: 0.6; }
.kind-knopf .bald-wort { display: flex; align-items: center; gap: 12px; }
.hinweis-zeile { font-size: 13px; color: var(--leise); text-align: center; margin: 0; line-height: 1.5; }

.pin { display: flex; flex-direction: column; flex-grow: 1; gap: 22px; }
.pin-oben { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pin-oben .tier { width: 80px; height: 80px; }
.pin-oben .namenslogo { height: 30px; width: auto; }
.punkte { display: flex; gap: 18px; }
.punkte span { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--violett); }
.punkte span.voll { background: var(--violett); }
.punkte.wackeln { animation: wackeln .4s; }
@keyframes wackeln { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-meldung { min-height: 40px; font-size: 14px; color: var(--violett); text-align: center; margin: 0; line-height: 1.4; }
.tasten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; padding: 0 24px; max-width: 360px; width: 100%; margin: 0 auto; }
.tasten button {
  height: 68px; border-radius: 34px; border: 1px solid var(--linie); background: var(--flaeche);
  font-size: 26px; font-weight: 200; color: var(--schrift); padding: 0;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.tasten button:active { background: #efe9f2; }
.tasten button.leer { visibility: hidden; }
.tasten button.loeschen { background: transparent; border: none; font-size: 22px; }

/* ---------- große Knöpfe ---------- */
.haupt-knopf {
  height: 56px; border-radius: 18px; border: none; background: var(--violett); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 400; width: 100%; text-decoration: none;
}
.haupt-knopf:disabled { background: var(--linie); color: var(--leise); cursor: default; }
.neben-knopf {
  height: 52px; border-radius: 16px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--schrift);
  display: flex; align-items: center; justify-content: center; font-size: 16px; width: 100%;
}
.warn-knopf { color: #8f1f3f; }

/* ---------- Start ---------- */
.serie { text-decoration: none; color: var(--schrift); display: flex; flex-direction: column; gap: 14px; }
.serie .oben { display: flex; justify-content: space-between; align-items: flex-start; }
.serie .zahl-gross { font-size: 60px; line-height: 1; font-weight: 200; color: var(--violett); letter-spacing: -0.02em; }
.serie .joker { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.ring { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--violett); }
.ring.joker { width: 36px; height: 36px; border: 1.5px dashed var(--violett); font-size: 15px; font-weight: 300; }
.ring.heute { border: 1.5px dotted var(--violett); font-size: 8px; letter-spacing: 0.06em; font-weight: 500; }
.ring.leer { border: 1px solid #ddd7cf; }
.ring.stempel { border: 1.5px solid var(--violett); }
.ring.stempel img { width: 26px; height: 26px; }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.woche > div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.woche .tag { font-size: 10px; letter-spacing: 0.12em; color: var(--leise); font-weight: 500; }
.balken { height: 2px; background: var(--linie-3); position: relative; }
.balken i { position: absolute; left: 0; top: 0; height: 2px; background: var(--violett); }
.serie .unten { display: flex; justify-content: space-between; font-size: 12px; color: var(--leise); gap: 12px; }
.serie .unten b { color: var(--violett); font-weight: 500; white-space: nowrap; }

.kamera-feld {
  min-height: 168px; border: none; border-radius: 24px; background: var(--violett); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; flex-shrink: 0;
}
.kamera-feld:active { background: var(--violett-dunkel); }
.kamera-feld .gross { font-size: 19px; font-weight: 300; }
.kamera-feld .klein { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }

.faellig { text-decoration: none; color: var(--schrift); display: flex; align-items: center; gap: 16px; }
.faellig .zahl { font-size: 40px; font-weight: 200; color: var(--violett); line-height: 1; min-width: 48px; }
.faellig .mitte { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.faellig .rechts { font-size: 13px; color: var(--violett); font-weight: 500; white-space: nowrap; }

.weiter { display: flex; flex-direction: column; gap: 10px; }
.weiter-reihe { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
.weiter-reihe::-webkit-scrollbar { display: none; }
.weiter-karte {
  text-decoration: none; color: var(--schrift); flex: 0 0 150px; background: var(--flaeche); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.weiter-karte .kz { font-size: 26px; font-weight: 200; color: var(--violett); line-height: 1; }
.weiter-karte .n { font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weiter-karte .m { font-size: 12px; color: var(--leise); }
.weiter-leer { font-size: 13px; color: var(--leise); line-height: 1.5; border: 1px dashed var(--linie-2); border-radius: 16px; padding: 14px 16px; }

/* ---------- Fächer ---------- */
.titel-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.titel-zeile > div { display: flex; flex-direction: column; gap: 4px; }
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fach-kachel {
  text-decoration: none; color: var(--schrift); background: var(--flaeche); border-radius: 16px; padding: 12px;
  min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--flaeche);
}
.fach-kachel.leer { border: 1px dashed var(--linie-2); background: rgba(255,255,255,0.55); }
.fach-kachel .oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.fach-kachel .kz { font-size: 30px; font-weight: 200; color: var(--violett); line-height: 1; display: inline-block; }
.fach-kachel .vok { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violett); border: 1px solid var(--violett-hell); border-radius: 6px; padding: 2px 4px; font-weight: 500; white-space: nowrap; }
.fach-kachel .unten { display: flex; flex-direction: column; gap: 2px; }
.fach-kachel .name { font-size: 13px; font-weight: 400; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; }
.fach-kachel .info { font-size: 11px; color: var(--leise); }
.fussnote { margin: 0; font-size: 12px; line-height: 1.5; color: var(--leise); text-align: center; }

/* ---------- Fach ---------- */
.fach-titel { display: flex; align-items: flex-end; gap: 14px; }
.fach-titel .kz-gross { font-size: 64px; font-weight: 200; color: var(--violett); line-height: 0.85; letter-spacing: -0.02em; }
.fach-titel > div { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; min-width: 0; }
.fach-titel h1 { margin: 0; font-size: 26px; font-weight: 300; line-height: 1.05; }
.fach-titel .meta { font-size: 12px; color: var(--leise); }
.schnell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.schnell button {
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--schrift); border-radius: 16px; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0;
}
.schnell button span { font-size: 11px; font-weight: 400; }
.schnell button.voll { background: var(--violett); color: #fff; border-color: var(--violett); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; }
.jahr { display: flex; flex-direction: column; gap: 8px; }
.jahr-kopf { font-size: 12px; font-weight: 500; }
.jahr-kopf small { color: var(--leise); font-weight: 400; font-size: 12px; }
.jahr-knopf {
  border: none; border-top: 1px solid var(--linie); background: none; padding: 0; min-height: 44px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; color: var(--schrift);
}
.jahr-knopf .auf { font-size: 12px; color: var(--violett); font-weight: 500; }
.epoche-zeile {
  text-decoration: none; color: var(--schrift); background: var(--flaeche); border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.epoche-zeile .strich { width: 4px; align-self: stretch; border-radius: 2px; background: var(--linie); flex-shrink: 0; }
.epoche-zeile .strich.laeuft { background: var(--violett); }
.epoche-zeile .mitte { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.epoche-zeile .n { font-size: 16px; font-weight: 400; overflow-wrap: anywhere; }
.epoche-zeile .m { font-size: 12px; color: var(--leise); }
.epoche-zeile.alt { opacity: 0.85; }
.leer-kasten {
  border: 1px dashed var(--linie-2); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.leer-kasten p { margin: 0; font-size: 14px; color: var(--leise); line-height: 1.5; }

/* ---------- Epoche ---------- */
.epoche-titel { display: flex; flex-direction: column; gap: 6px; }
.epoche-titel .zeile { display: flex; align-items: center; gap: 10px; }
.epoche-titel .kz { font-size: 30px; font-weight: 200; color: var(--violett); line-height: 1; }
.epoche-titel h1 { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.1; overflow-wrap: anywhere; }
.reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
.reiter button {
  border: none; background: none; min-height: 44px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reiter button[aria-selected="true"] { color: var(--violett); border-bottom-color: var(--violett); }

/* ---------- Blatt von unten ---------- */
.schleier {
  position: fixed; inset: 0; z-index: 50; background: rgba(23, 23, 23, 0.42);
  display: flex; align-items: flex-end; justify-content: center; animation: einblenden .15s ease-out;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.blatt {
  background: var(--grund); width: 100%; max-width: 560px; max-height: calc(100% - var(--oben) - 24px); overflow-y: auto;
  border-radius: 28px 28px 0 0; padding: 10px 20px calc(var(--unten) + 24px);
  display: flex; flex-direction: column; gap: 22px; animation: hoch .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes hoch { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.blatt .griff { display: flex; justify-content: center; }
.blatt .griff span { width: 40px; height: 4px; border-radius: 2px; background: var(--linie-2); }
.blatt-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.blatt-kopf .t { font-size: 16px; font-weight: 500; text-align: center; }
.blatt-kopf .zurueck { justify-self: start; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.eingabe {
  height: 52px; border: 1px solid var(--linie-2); border-radius: 14px; background: var(--flaeche); padding: 0 16px;
  font-size: 17px; font-weight: 300; color: var(--schrift); width: 100%; outline-color: var(--violett);
}
.eingabe::placeholder { color: var(--pfeil); }
.klassen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.klassen button {
  height: 44px; border-radius: 12px; font-size: 15px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--schrift); font-weight: 300; padding: 0;
}
.klassen button[aria-pressed="true"] { background: var(--violett); color: #fff; border-color: var(--violett); font-weight: 500; }
.zeitraum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zeitraum label { display: flex; flex-direction: column; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 14px; padding: 8px 14px; }
.zeitraum label span { font-size: 11px; color: var(--leise); }
.zeitraum input { border: none; padding: 0; font-size: 16px; font-weight: 300; background: transparent; color: var(--schrift); outline: none; width: 100%; }
.klein-grau { font-size: 12px; color: var(--leise); }
.fehler-text { font-size: 13px; color: #8f1f3f; margin: 0; }
.menue-liste { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Meldung (Toast) ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--leiste-h) + var(--absender-h) + var(--unten) + 22px);
  background: var(--schrift); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 14px;
  display: flex; align-items: center; gap: 16px; max-width: calc(100% - 40px); width: max-content;
  animation: einblenden .15s ease-out;
}
.toast button { border: none; background: none; color: #e6d6ee; font-weight: 500; padding: 4px 0; min-height: 32px; }

/* ---------- Platzhalter ---------- */
.platzhalter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 40px; }
.platzhalter img { width: 120px; height: 120px; }
.platzhalter p { margin: 0; color: var(--leise); line-height: 1.5; max-width: 300px; }
.ki-hinweis { font-size: 12px; color: var(--leise); line-height: 1.5; }
.ich-liste { display: flex; flex-direction: column; background: var(--flaeche); border-radius: 20px; overflow: hidden; }
.ich-liste > div { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; border-top: 1px solid var(--linie-3); gap: 12px; }
.ich-liste > div:first-child { border-top: none; }
.ich-liste .w { color: var(--leise); font-size: 14px; }

.laden { display: flex; justify-content: center; padding: 40px 0; }
.laden span { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--violett-hell); border-top-color: var(--violett); animation: drehen 0.8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.offline-band { font-size: 12px; text-align: center; color: var(--leise); background: var(--linie-3); border-radius: 10px; padding: 6px 10px; }

/* Kleine Bildschirme / Safari mit Adressleiste: PIN-Seite kompakter */
@media (max-height: 760px) {
  .anmelden { padding-top: calc(var(--oben) + 28px); }
  .anmelden .logo-hoch { height: 96px; }
  .wer-lernt { gap: 24px; }
  .pin { gap: 10px; }
  .pin-oben { gap: 10px; }
  .pin-oben .tier { width: 60px; height: 60px; }
  .pin-oben .namenslogo { height: 24px; }
  .pin-meldung { min-height: 20px; }
  .tasten { gap: 10px 24px; }
  .tasten button { height: 58px; border-radius: 29px; font-size: 24px; }
}

/* =====================================================================
   Etappe 10b · Kamera & Lernstoff
   ===================================================================== */
body.vollbild { overscroll-behavior: none; }
.violett { color: var(--violett) !important; }
.haupt-knopf.rot { background: #8f1f3f; }
.neben-knopf.ohne-rand { border: none; background: none; color: var(--violett); }
.text-knopf.gross { font-size: 15px; font-weight: 400; }
.rechts { justify-self: end; }
.klein-grau { font-size: 12px; color: var(--leise); line-height: 1.45; }

/* ---------- Kamera ---------- */
.kamera {
  position: fixed; inset: 0; background: var(--schrift); color: #fff; display: flex; flex-direction: column;
  padding-top: var(--oben); padding-bottom: var(--unten); user-select: none; -webkit-user-select: none;
}
.k-oben { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; }
.k-rund { width: 44px; height: 44px; border-radius: 50%; border: none; background: #2c2a28; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.k-rund[aria-pressed="true"] { background: #fff; color: var(--schrift); }
.k-rund.aus { opacity: 0.45; }
.k-pille { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; background: #2c2a28; border-radius: 16px; padding: 8px 14px; }
.k-bild { flex: 1 1 auto; min-height: 0; margin: 0 12px; border-radius: 20px; background: #3a3734; position: relative; overflow: hidden; }
.k-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.k-rahmen path { transition: d .12s linear, opacity .2s; }
.k-blitzlicht { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.k-blitzlicht.an { animation: blitzlicht .35s ease-out; }
@keyframes blitzlicht { 0% { opacity: .85; } 100% { opacity: 0; } }
.k-hinweis {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap;
  background: #fff; color: var(--schrift); border-radius: 20px; padding: 9px 16px 9px 12px; display: flex; align-items: center; gap: 8px; font-size: 14px;
}
.k-hinweis .punkt { width: 10px; height: 10px; border-radius: 50%; background: #c98a1c; }
.k-hinweis[data-art="gut"] .punkt { background: var(--violett); }
.k-ohne { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.k-ohne p { margin: 0; line-height: 1.5; color: #eadff0; max-width: 280px; }
.k-ohne .haupt-knopf { max-width: 260px; }
.k-mitte { padding: 12px 20px 4px; display: flex; justify-content: space-between; align-items: center; }
.k-text { border: none; background: none; color: #fff; font-size: 13px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; }
.schalter { width: 38px; height: 22px; border-radius: 11px; background: var(--leise); position: relative; display: inline-block; transition: background .15s; }
.schalter span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
[aria-pressed="true"] > .schalter { background: var(--violett); }
[aria-pressed="true"] > .schalter span { left: 18px; }
.k-unten { padding: 6px 20px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.k-stapel { justify-self: start; position: relative; width: 52px; height: 64px; text-decoration: none; }
.k-stapel .hinten { position: absolute; left: 6px; top: 2px; width: 44px; height: 56px; background: #d8d1c8; border-radius: 4px; transform: rotate(6deg); }
.k-stapel img { position: absolute; left: 0; top: 6px; width: 44px; height: 56px; object-fit: cover; border-radius: 4px; transform: rotate(-3deg); background: #ebe6dd; }
.k-stapel .zahl { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--violett); color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.k-ausloeser { justify-self: center; width: 78px; height: 78px; border-radius: 50%; border: 3px solid #fff; background: transparent; padding: 5px; }
.k-ausloeser span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.k-ausloeser:active span { transform: scale(.9); }
.k-ausloeser:disabled { opacity: .35; }
.kamera[data-auto="true"] .k-ausloeser span { box-shadow: inset 0 0 0 3px var(--violett-hell); }
.k-fertig { justify-self: end; text-decoration: none; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--violett); color: #fff; display: flex; align-items: center; font-size: 15px; font-weight: 500; }
.k-fertig[aria-disabled="true"] { background: #3a3734; color: #bdb6ae; }
@media (max-height: 700px) { .k-ausloeser { width: 66px; height: 66px; } .k-mitte { padding-top: 6px; } }

/* ---------- Ablauf-Seiten (Prüfen, Zuordnen, Was jetzt?) ---------- */
.ablauf-seite { min-height: 100%; height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding-top: var(--oben); }
.ablauf-kopf { padding: 10px 20px 6px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 56px; }
.ablauf-kopf .t { font-size: 16px; font-weight: 500; text-align: center; }
.ablauf-kopf.dunkel { color: #fff; padding-left: 0; padding-right: 0; }
.zurueck.hell { color: #fff; }
.pille-knopf { justify-self: end; border: none; color: #fff; background: var(--violett); border-radius: 18px; padding: 0 16px; min-height: 36px; font-size: 15px; font-weight: 500; }
.ablauf-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 18px; -webkit-overflow-scrolling: touch; }
.ablauf-fuss { padding: 12px 20px calc(var(--unten) + 18px); border-top: 1px solid var(--linie); background: var(--grund); display: flex; flex-direction: column; gap: 8px; }

/* Prüfen */
.pruefen { gap: 14px; }
.vorschau-gross { flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; }
.vorschau-gross img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 1px 0 var(--linie), 0 10px 30px rgba(23,23,23,0.08); }
.vorschau-gross .seitenlabel { position: absolute; top: 0; left: 0; }
.pruefen .vorschau-gross { max-height: 48vh; }
.pruefen .vorschau-gross img { max-height: 46vh; }
.werkzeuge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.werkzeuge > * {
  text-decoration: none; color: var(--schrift); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.werkzeuge span { font-size: 11px; }
.streifen-bereich { display: flex; flex-direction: column; gap: 8px; }
.streifen { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: none; touch-action: pan-x; }
.streifen::-webkit-scrollbar { display: none; }
.mini {
  width: 56px; height: 70px; border-radius: 8px; border: 1px solid var(--linie); background: #fff; padding: 0; position: relative; flex-shrink: 0;
  touch-action: none; transition: transform .1s;
}
.mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; pointer-events: none; }
.mini.an { border: 2px solid var(--violett); }
.mini.zieht { z-index: 3; box-shadow: 0 8px 20px rgba(23,23,23,0.2); transition: none; }
.mini .nr { position: absolute; bottom: 3px; right: 4px; font-size: 10px; color: var(--leise); background: rgba(255,255,255,.85); border-radius: 4px; padding: 0 3px; }
.mini .warn { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #c98a1c; color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.mini.plus { border: 1.5px dashed var(--violett); background: transparent; color: var(--violett); display: flex; align-items: center; justify-content: center; touch-action: manipulation; }

/* Zuschneiden */
.schnitt { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--grund); }
.schnitt-oben { background: var(--schrift); color: #fff; padding: calc(var(--oben) + 6px) 20px 0; display: flex; flex-direction: column; flex: 1 1 58%; min-height: 0; }
.schnitt-flaeche { flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.schnitt-gruppe { position: relative; transform-origin: 50% 50%; }
.schnitt-gruppe img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; pointer-events: none; }
.schnitt-gruppe svg { position: absolute; overflow: visible; touch-action: none; }
.schnitt-gruppe circle { cursor: grab; touch-action: none; }
.raster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.lupe { position: absolute; right: 6px; top: 6px; width: 84px; height: 84px; border-radius: 50%; border: 2px solid #fff; pointer-events: none; }
.lupe.links { right: auto; left: 6px; }
.schnitt-unten { flex: 0 0 auto; padding: 16px 20px calc(var(--unten) + 18px); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: 46%; }
.umschalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #e9e4dd; border-radius: 14px; padding: 4px; gap: 4px; }
.umschalter button { height: 40px; border: none; border-radius: 11px; background: transparent; font-size: 14px; color: var(--schrift); }
.umschalter button[aria-pressed="true"] { background: #fff; font-weight: 500; }
input[type="range"] { accent-color: var(--violett); width: 100%; height: 32px; margin: 0; }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.looks button { min-height: 44px; border-radius: 12px; border: 1px solid var(--linie); background: #fff; font-size: 13px; color: var(--schrift); }
.looks button[aria-pressed="true"] { border: 2px solid var(--violett); }
@media (max-height: 740px) { .schnitt .tipp { display: none; } }

/* Zuordnen */
.minis { display: flex; gap: 8px; align-items: center; }
.minis img { width: 40px; height: 50px; object-fit: cover; border-radius: 5px; border: 1px solid var(--linie); background: #fff; }
.minis .klein-grau { margin-left: 4px; font-size: 13px; }
.vorschlag { background: #fff; border: 1.5px solid var(--violett); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.vorschlag .oben, .vorschlag.leise { display: flex; gap: 10px; align-items: flex-start; }
.vorschlag img { width: 48px; height: 48px; flex-shrink: 0; }
.vorschlag .oben > div, .vorschlag.leise > div { display: flex; flex-direction: column; gap: 4px; }
.vorschlag .ziel { font-size: 17px; font-weight: 400; }
.vorschlag.leise { border: 1px dashed var(--linie-2); background: rgba(255,255,255,.6); }
.lesen-punkte { font-size: 15px; }
.lesen-punkte::after { content: ""; animation: punkte 1.4s steps(4) infinite; }
@keyframes punkte { 0% { content: ""; } 25% { content: " ·"; } 50% { content: " · ·"; } 75% { content: " · · ·"; } }
.passt { height: 44px; border-radius: 14px; border: none; background: var(--violett); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.passt.ok { background: #f3eef6; color: var(--violett); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--linie-2); background: #fff; color: var(--schrift); font-size: 13px; }
.chips button[aria-pressed="true"] { background: var(--violett); border-color: var(--violett); color: #fff; }
.chips.klein button { min-height: 34px; font-size: 12px; padding: 0 12px; }
.fach-wahl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fach-wahl button { height: 48px; border-radius: 12px; border: 1px solid var(--linie); background: #fff; color: var(--violett); font-size: 17px; font-weight: 200; padding: 0; }
.fach-wahl button[aria-pressed="true"] { background: var(--violett); border-color: var(--violett); color: #fff; }
.fach-wahl button:disabled { opacity: .35; cursor: default; }
.wahl-zeile { min-height: 52px; border-radius: 14px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-align: left; width: 100%; }
.wahl-zeile.hoch { min-height: 64px; align-items: flex-start; padding-top: 12px; }
.wahl-zeile[aria-pressed="true"] { border: 1.5px solid var(--violett); }
.wahl-zeile:disabled { opacity: .55; cursor: default; }
.wahl-zeile .kreis { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--violett); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wahl-zeile:disabled .kreis { border-color: var(--linie-2); }
.wahl-zeile .kreis span { width: 10px; height: 10px; border-radius: 50%; }
.wahl-zeile[aria-pressed="true"] .kreis span { background: var(--violett); }
.wahl-zeile .mitte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wahl-zeile .n { font-size: 15px; overflow-wrap: anywhere; }
.wahl-zeile .m { font-size: 12px; color: var(--leise); line-height: 1.4; }
.neu-gestrichelt { min-height: 48px; border-radius: 14px; border: 1.5px dashed var(--violett); background: transparent; color: var(--violett); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.label .frei { text-transform: none; letter-spacing: 0; font-weight: 400; }
.von-zeile { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 14px; padding: 10px 14px; }

/* Was jetzt? */
.abgelegt { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.abgelegt > div { display: flex; flex-direction: column; gap: 4px; }
.abgelegt .ziel { font-size: 20px; font-weight: 300; }
.wege { display: flex; flex-direction: column; gap: 10px; }
.weg { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 14px 16px; text-align: left; color: var(--schrift); width: 100%; position: relative; }
.weg .kz { font-size: 30px; font-weight: 200; color: var(--violett); width: 44px; flex-shrink: 0; line-height: 1; }
.weg .mitte { display: flex; flex-direction: column; gap: 3px; }
.weg .n { font-size: 16px; font-weight: 400; }
.weg .d { font-size: 12px; color: var(--leise); line-height: 1.4; }
.weg.tipp-an { background: var(--violett); border-color: var(--violett); color: #fff; }
.weg.tipp-an .kz { color: #fff; }
.weg.tipp-an .d { color: #eadff0; }
.tipp-marke { position: absolute; top: 10px; right: 12px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; padding: 2px 6px; }
.stempel-hinweis { margin: 0; font-size: 12px; color: var(--leise); text-align: center; }

/* ---------- Mac: Hochladen ---------- */
.ablage {
  border: 1.5px dashed var(--violett); border-radius: 24px; background: rgba(255,255,255,.6); min-height: 220px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
}
.ablage .gross { font-size: 19px; font-weight: 300; }
.ablage .klein { font-size: 12px; color: var(--leise); }
.ablage.drueber { background: #f3eef6; border-style: solid; }
.hinweis-text { margin: 0; font-size: 13px; color: var(--leise); min-height: 18px; }

/* ---------- Epoche: Fotos, Notizen, Gelernt ---------- */
.reiter button small { font-size: 10px; letter-spacing: 0; color: inherit; opacity: .7; margin-left: 2px; }
.reiter-inhalt { display: flex; flex-direction: column; gap: 18px; }
.reihe { display: flex; flex-direction: column; gap: 10px; }
.reihe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reihe-kopf .n { font-size: 14px; font-weight: 400; }
.reihe-kopf .m { font-size: 12px; color: var(--leise); white-space: nowrap; }
.foto-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.foto-kachel { position: relative; aspect-ratio: 3 / 4; background: #fff; border-radius: 6px; border: 1px solid var(--linie); overflow: hidden; display: block; }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.foto-kachel img.da { opacity: 1; }
.foto-kachel .marke { position: absolute; left: 6px; bottom: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #fff; background: var(--violett); border-radius: 6px; padding: 2px 6px; }
.foto-kachel .haken { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pfeil); background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.foto-kachel.an { border: 2px solid var(--violett); }
.foto-kachel.an .haken { background: var(--violett); border-color: var(--violett); }
.foto-kachel.blass { opacity: .75; }
.epoche-seite.waehlt { padding-bottom: calc(var(--unten) + 150px); }
.auswahl-titel { font-size: 16px; font-weight: 500; }
.auswahl-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--flaeche); border-top: 1px solid var(--linie); padding: 12px 20px calc(var(--unten) + 14px); display: flex; flex-direction: column; gap: 8px; }
.auswahl-leiste > * { max-width: 520px; margin: 0 auto; width: 100%; }
.auswahl-leiste .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auswahl-leiste .neben-knopf { height: 48px; font-size: 15px; gap: 6px; }
.auswahl-leiste .neben-knopf:disabled, .auswahl-leiste .haupt-knopf:disabled { opacity: .5; }
.notiz { background: #fff; border: none; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--schrift); width: 100%; }
.notiz .t { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.notiz .m { font-size: 12px; color: var(--leise); }
.textfeld { height: auto; min-height: 140px; padding: 12px 16px; line-height: 1.45; resize: vertical; font-family: inherit; }
.gelernt-zeile { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 16px; }
.gelernt-zeile .kz { font-size: 24px; font-weight: 200; color: var(--violett); width: 36px; }
.gelernt-zeile .mitte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gelernt-zeile .n { font-size: 15px; overflow-wrap: anywhere; }
.gelernt-zeile .m { font-size: 12px; color: var(--leise); }
.ablage-hinweis { display: none; }
.epoche-seite.drueber { position: relative; }
.epoche-seite.drueber .ablage-hinweis {
  display: flex; position: fixed; inset: 16px; z-index: 40; border: 2px dashed var(--violett); border-radius: 24px; background: rgba(243, 238, 246, .94);
  flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none;
}
.ablage-hinweis b { font-size: 20px; font-weight: 400; color: var(--violett); }
.ablage-hinweis small { font-size: 13px; color: var(--leise); }

/* ---------- Ein Foto ---------- */
.foto-titel { display: flex; flex-direction: column; gap: 4px; }
.foto-titel h1 { margin: 0; font-size: 24px; font-weight: 300; line-height: 1.15; overflow-wrap: anywhere; }
.foto-gross { position: relative; background: #fff; border-radius: 8px; min-height: 260px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 var(--linie), 0 10px 30px rgba(23,23,23,0.06); touch-action: pan-y pinch-zoom; }
.foto-gross img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity .2s; }
.foto-gross img.da { opacity: 1; }
.blaettern { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; color: var(--violett); }
.blaettern.links { left: 8px; }
.blaettern.rechts { right: 8px; }
@media (hover: none) { .blaettern { opacity: .8; } }
.aufklapp { background: #fff; border-radius: 16px; overflow: hidden; }
.aufklapp-kopf { width: 100%; border: none; background: none; min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--schrift); }
.aufklapp-kopf .auf { font-size: 12px; color: var(--violett); font-weight: 500; }
.aufklapp-inhalt { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.erkannt { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aktionen button { border: 1px solid var(--linie); background: #fff; border-radius: 16px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--schrift); padding: 0; }
.aktionen .kz { font-size: 24px; font-weight: 200; color: var(--violett); line-height: 1; }
.aktionen span:last-child { font-size: 11px; }

/* ================= Etappe 10c · Erklären & Korrigieren ================= */
.chat-seite { height: var(--sichtbar, 100dvh); min-height: 0; }
.chat-kopf { padding: 10px 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linie); }
.chat-titel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-titel .t { font-size: 19px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-titel .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lernstoff-pille { height: 44px; padding: 0 10px 0 6px; border-radius: 22px; background: #fff; border: 1px solid var(--linie); display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--schrift); flex-shrink: 0; }
.mini-stapel { display: flex; flex-shrink: 0; }
.mini-stapel img { width: 22px; height: 28px; object-fit: cover; background: #f7f5f2; border: 1px solid #cfc8bf; border-radius: 3px; transform: rotate(-5deg); }
.mini-stapel img + img { margin-left: -12px; transform: rotate(4deg); }
.ki-zeile { margin: 0; padding: 8px 16px 0; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.chat-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.chat-verlauf > :first-child { margin-top: auto; }
.msg.begl { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg.begl .gesicht { width: 34px; height: 34px; flex-shrink: 0; }
.blase-chat { background: #fff; border-radius: 18px 18px 18px 4px; padding: 11px 14px; max-width: min(300px, calc(100% - 42px)); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blase-chat .wer, .frage-an-dich .wer { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--violett); font-weight: 500; }
.blase-chat .inhalt { font-size: 15px; line-height: 1.45; font-weight: 300; overflow-wrap: anywhere; }
.blase-chat .inhalt p { margin: 0; }
.blase-chat .inhalt p + p, .blase-chat .inhalt ul + p, .blase-chat .inhalt p + ul { margin-top: 8px; }
.blase-chat .inhalt ul { margin: 0; padding-left: 18px; }
.frage-an-dich { border-top: 1px dashed #b9a6c4; padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.frage-an-dich p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 400; }
.msg.kind { align-self: flex-end; background: var(--violett); color: #fff; border-radius: 18px 18px 4px 18px; padding: 10px 14px; max-width: 80%; font-size: 15px; line-height: 1.4; font-weight: 300; display: flex; flex-direction: column; gap: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.kind.knopf { background: transparent; border: 1px solid var(--violett); color: var(--violett); padding: 7px 12px; font-size: 13px; }
.anhang-mini { display: flex; gap: 4px; }
.anhang-mini img { width: 44px; height: 56px; object-fit: cover; border-radius: 4px; background: #f7f5f2; }
.tippt { display: inline-flex; gap: 4px; padding: 6px 0 2px; }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--violett-hell); animation: tippen 1.1s infinite ease-in-out; }
.tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.stempel-plakette { align-self: center; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 20px; background: #fff; border: 1px solid var(--violett); font-size: 12px; color: var(--violett); font-weight: 500; animation: rein .3s ease-out; }
.ring-mini { width: 26px; height: 26px; border-radius: 50%; border: 1.4px solid var(--violett); display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); overflow: hidden; }
.ring-mini img { width: 22px; height: 22px; }
.chat-fehler { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px dashed #c9a3b1; border-radius: 14px; padding: 6px 12px; font-size: 13px; color: #8f1f3f; }
.neben-knopf.spaeter { text-decoration: none; height: 48px; font-size: 15px; }
.merksatz-zeile { align-self: stretch; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--violett-hell); border-radius: 14px; padding: 8px 12px; text-align: left; color: var(--schrift); }
.merksatz-zeile .kz, .gelernt-zeile .kz { font-weight: 200; }
.merksatz-zeile .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.merksatz-zeile .t { font-size: 13px; line-height: 1.35; }
.label.violett { color: var(--violett); }
.chat-unten { padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linie-3); background: var(--grund); }
.chat-knoepfe { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.chat-knoepfe::-webkit-scrollbar { display: none; }
.pille { height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--violett); background: #fff; color: var(--violett); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.pille.voll { background: var(--violett); color: #fff; }
.pille.ohne { border-style: dashed; }
.pille:disabled { opacity: .45; }
.chat-eingabe { display: flex; gap: 8px; align-items: flex-end; }
.chat-eingabe .rund-knopf:disabled { opacity: .45; }
.feld-rund { flex: 1 1 auto; min-height: 44px; border-radius: 22px; background: #fff; border: 1px solid var(--linie); display: flex; align-items: center; padding: 0 16px; }
.feld-rund:focus-within { border-color: var(--violett); }
.feld-rund textarea { border: none; outline: none; background: transparent; font: inherit; font-size: 16px; width: 100%; resize: none; padding: 11px 0; line-height: 1.35; max-height: 120px; color: var(--schrift); }
.senden { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--violett); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.senden:disabled { background: var(--linie-2); }
.anhang-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.anhang-zeile .text-knopf { margin-left: auto; min-height: 32px; }
.rest-hinweis { margin: 0; text-align: center; font-size: 12px; color: var(--leise); }
.rest-hinweis.leer { color: var(--violett); }
.chat-seite .absender { flex-shrink: 0; padding-bottom: var(--unten); height: calc(var(--absender-h) + var(--unten)); }

/* Hilfe-Karte (Sorgen) */
.hilfe-karte { background: #fff; border: 1px solid var(--violett); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hilfe-karte h2 { margin: 2px 0 0; font-size: 19px; font-weight: 300; }
.hk-zeile { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--leise); text-decoration: none; }
.hk-zeile b { color: var(--schrift); font-weight: 500; font-size: 14px; }
.hk-tel { flex-direction: row; align-items: center; gap: 10px; min-height: 48px; border: 1px solid var(--linie-2); border-radius: 14px; padding: 8px 12px; }
.hk-tel > span { display: flex; flex-direction: column; gap: 2px; }
.hk-papa { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--leise); line-height: 1.45; border-top: 1px solid var(--linie-3); padding-top: 10px; }
.hk-papa svg { flex-shrink: 0; margin-top: 1px; }

/* Auswahl-Blätter (Womit erklären?) */
.wahl-reihen { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.wahl-reihe { min-height: 56px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 8px 12px; text-align: left; color: var(--schrift); }
.wahl-reihe .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wahl-reihe .n { font-size: 15px; } .wahl-reihe .m { font-size: 12px; color: var(--leise); }

/* Merksatz-Blatt */
.merksatz-kopf { display: flex; align-items: center; gap: 10px; }
.merksatz-kopf > div { display: flex; flex-direction: column; gap: 2px; }
.merksatz-kopf .t { font-size: 20px; font-weight: 300; }
.feld-block { display: flex; flex-direction: column; gap: 6px; }
.merksatz-text { min-height: 110px; border: 1px solid var(--violett) !important; border-radius: 16px; font-size: 16px; line-height: 1.45; resize: none; padding: 14px; }
.stichworte { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stichwort { font-size: 13px; padding: 0 10px; min-height: 32px; border-radius: 16px; border: 1px solid var(--linie-2); background: #fff; color: var(--schrift); }
.stichwort span { color: var(--leise); margin-left: 2px; }
.stichwort-neu { font: inherit; font-size: 13px; min-height: 32px; width: 120px; border-radius: 16px; border: 1px dashed var(--linie-2); background: transparent; padding: 0 10px; color: var(--schrift); }
.schalter-zeile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px; text-align: left; color: var(--schrift); width: 100%; }
.schalter-zeile .mitte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.schalter-mini { width: 44px; height: 26px; border-radius: 13px; background: #c9c2b9; display: flex; align-items: center; padding: 3px; flex-shrink: 0; transition: background .15s; }
.schalter-mini i { width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.schalter-mini.an { background: var(--violett); } .schalter-mini.an i { transform: translateX(18px); }
.ablage-zeile { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--leise); }
.merksatz-laedt, .merksatz-fertig { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 12px 0 4px; }
.merksatz-laedt p { margin: 0; color: var(--leise); }
.merksatz-fertig .gross { font-size: 24px; font-weight: 300; }
.merksatz-fertig .klein-grau { max-width: 290px; font-size: 14px; }
.stempel-rund { width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid var(--violett); display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); }
.stempel-rund img { width: 66px; height: 66px; }
.stempel-rund.doppelt { width: 112px; height: 112px; box-shadow: inset 0 0 0 5px var(--grund), inset 0 0 0 6px var(--violett); transform: rotate(-7deg); }
.stempel-rund.doppelt img { width: 80px; height: 80px; }
.stempel-rund.leise { border-style: dashed; }

/* Korrigieren */
.korr-laedt { align-items: stretch; }
.minis-reihe { display: flex; gap: 8px; justify-content: center; padding-top: 12px; }
.minis-reihe img { width: 64px; height: 84px; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 1px 0 var(--linie); }
.minis-reihe img:nth-child(odd) { transform: rotate(-2deg); } .minis-reihe img:nth-child(even) { transform: rotate(1.5deg); }
.balken.lang i { transition: width .3s linear; }
.umschalter-klein { display: flex; background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 3px; flex-shrink: 0; }
.umschalter-klein button { height: 36px; padding: 0 12px; border-radius: 18px; border: none; background: transparent; font-size: 12px; color: var(--schrift); }
.umschalter-klein button[aria-pressed="true"] { background: var(--violett); color: #fff; }
.korr-inhalt { gap: 14px; padding-top: 12px; }
.gesicht.big { width: 40px !important; height: 40px !important; }
.korr-foto { position: relative; background: #fbfaf7; border-radius: 6px; box-shadow: 0 1px 0 var(--linie), 0 8px 24px rgba(23,23,23,.06); overflow: hidden; transform: rotate(-.4deg); flex-shrink: 0; }
.korr-foto img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.korr-foto img.da { opacity: 1; }
.korr-mark { position: absolute; background: rgba(102,36,131,.12); border-radius: 3px; pointer-events: none; }
.korr-punkt { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--violett); background: #fff; color: var(--violett); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.korr-punkt.voll { background: var(--violett); border-style: solid; color: #fff; }
.korr-punkt::after { content: ""; position: absolute; inset: -8px; }
.korr-punkt.inline { position: relative; transform: none; display: inline-flex; width: 22px; height: 22px; font-size: 11px; vertical-align: middle; margin: 0 2px; box-shadow: none; }
.nr-kreis { border-radius: 50%; border: 1.4px dashed var(--violett); background: #fff; color: var(--violett); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nr-kreis.voll { border-style: solid; background: var(--violett); color: #fff; }
.korr-legende { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--leise); }
.korr-legende .label { color: var(--schrift); }
.punkt-voll, .punkt-leer { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px 0 10px; vertical-align: -1px; }
.punkt-voll { background: var(--violett); } .punkt-leer { border: 1.2px dashed var(--violett); }
.korr-liste, .fertig-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.korr-liste a { min-height: 52px; background: #fff; border-radius: 14px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--schrift); }
.korr-liste .mitte, .fertig-liste .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.korr-liste .n, .fertig-liste .n { font-size: 14px; } .korr-liste .m, .fertig-liste .m { font-size: 12px; color: var(--leise); }
.fertig-liste { gap: 0; } .fertig-liste li { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--linie); }
.korr-text-box { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.korr-text p { margin: 0; font-size: 14px; line-height: 1.7; white-space: normal; }
.korr-text mark { background: rgba(102,36,131,.12); color: inherit; border-radius: 3px; padding: 0 1px; }
.korr-zitate { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linie-3); padding-top: 8px; }
.korr-zitate a { display: flex; gap: 8px; align-items: center; color: var(--schrift); text-decoration: none; font-size: 14px; }
.pruefen-knopf { height: 44px; padding: 0 16px; border-radius: 22px; border: none; background: var(--violett); color: #fff; font-size: 14px; flex-shrink: 0; }
.pruefen-knopf:disabled { background: var(--linie-2); }
.stelle-oben { padding: 10px 16px 4px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--linie-3); }
.ausschnitt { position: relative; height: 90px; background: #fbfaf7; border-radius: 6px; box-shadow: 0 1px 0 var(--linie); overflow: hidden; }
.ausschnitt img { position: absolute; max-width: none; opacity: 0; transition: opacity .2s; }
.ausschnitt img.da { opacity: 1; }
.zitat { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stufen li { display: flex; flex-direction: column; gap: 5px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--leise); }
.stufen li i { height: 3px; border-radius: 2px; background: #d6cfc6; }
.stufen li.an { color: var(--violett); } .stufen li.an i { background: var(--violett); }
.stufe-karte { margin-left: 42px; background: #fff; border: 1px solid var(--violett); border-radius: 16px; padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; animation: rein .2s ease-out; }
.stufe-karte .wer { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--violett); font-weight: 500; }
.stufe-karte p { margin: 0; font-size: 15px; line-height: 1.42; font-weight: 300; }
.stufe-karte.voll { background: var(--violett); color: #fff; }
.stufe-karte.voll .wer { color: #fff; }
.stufe-karte .warum { font-size: 13px; opacity: .9; }
.stufe-karte .frage { font-size: 14px; border-top: 1px dashed #b493c4; padding-top: 6px; font-weight: 400; }
.stelle-knoepfe { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stelle-knoepfe .pille { text-decoration: none; display: inline-flex; align-items: center; }
.stelle-knoepfe .text-knopf:disabled { color: var(--leise); }
.korr-fertig .fertig-oben { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.korr-fertig h1 { margin: 0; font-size: 26px; font-weight: 200; }
button.gelernt-zeile { width: 100%; border: none; text-align: left; color: var(--schrift); min-height: 56px; }
button.gelernt-zeile .mitte { flex: 1 1 auto; }
.gelernt-zeile .n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.daraus-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--schrift); border-bottom: 1px solid var(--linie-3); }
.daraus-zeile .kz { font-size: 20px; font-weight: 200; color: var(--violett); width: 28px; }
.daraus-zeile .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.daraus-zeile .n { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daraus-zeile .m { font-size: 12px; color: var(--leise); }

/* ---------- Test mit Auswertung (Chat 07, gebaut in 10d) ---------- */
.t-seite .absender { padding: 4px 0 calc(var(--unten) + 10px); display: flex; justify-content: center; }
.t-seite .ablauf-fuss .absender { padding: 2px 0 0; }
.t-kopf { padding: 10px 16px 6px; display: flex; align-items: center; gap: 10px; min-height: 60px; }
.t-kopf.rechts { justify-content: flex-end; }
.t-kopf-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-kopf-text .t { font-size: 22px; font-weight: 300; line-height: 1.2; overflow-wrap: anywhere; }
.t-segmente { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.t-segmente i { height: 4px; border-radius: 2px; background: #d6cfc6; }
.t-segmente i.voll { background: var(--violett); }
.t-segmente i.jetzt { background: #b493c4; }
.t-flagge { height: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid var(--linie); background: #fff; color: var(--leise); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.t-flagge.an { border-color: var(--violett); background: #efe7f3; color: var(--violett); }
.t-aufgabe { gap: 10px; padding-top: 14px; }
.t-frage { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 300; overflow-wrap: anywhere; }
.t-frage.klein { font-size: 19px; }
.t-eingabe { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.t-optionen, .t-wf { display: flex; flex-direction: column; gap: 8px; }
.t-wf { flex-direction: row; } .t-wf .t-option { flex: 1 1 0; justify-content: center; min-height: 64px; }
.t-option { min-height: 60px; border-radius: 16px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); text-align: left; padding: 10px 14px; display: flex; align-items: center; gap: 12px; width: 100%; }
.t-option .b { width: 28px; height: 28px; border-radius: 50%; border: 1.2px solid var(--violett); color: var(--violett); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-option .t { font-size: 15px; line-height: 1.4; font-weight: 300; overflow-wrap: anywhere; }
.t-option.mitte .t { font-size: 17px; font-weight: 400; }
.t-option.an { border-color: var(--violett); background: #efe7f3; }
.t-option.an .b { background: var(--violett); color: #fff; }
.t-option:disabled { cursor: default; }
.t-luecke { background: #fff; border-radius: 16px; padding: 18px 16px; font-size: 19px; font-weight: 300; line-height: 1.6; overflow-wrap: anywhere; }
.t-luecke > span { white-space: pre-wrap; }
.t-luecke-feld { display: inline-flex; border-bottom: 1.5px solid var(--violett); padding: 0 4px; margin: 0 4px; vertical-align: baseline; }
.t-luecke-feld input { border: none; outline: none; background: transparent; font: inherit; font-size: 19px; font-weight: 400; width: 9em; max-width: 60vw; color: var(--violett); padding: 2px 0; }
.t-formel { display: flex; flex-direction: column; gap: 6px; }
.t-formel-tasten { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.t-formel-tasten button { height: 44px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); font-size: 18px; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
.t-text { background: #fff; border-radius: 16px; border: 1px solid var(--violett); padding: 12px 14px; display: flex; }
.t-text textarea { border: none; outline: none; resize: vertical; background: transparent; font: inherit; font-size: 16px; line-height: 1.5; width: 100%; min-height: 140px; color: var(--schrift); }
.t-text:has(textarea:disabled) { border-color: var(--linie); }
.t-zuo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-zuo .sp { display: flex; flex-direction: column; gap: 8px; }
.t-zuo-k { min-height: 52px; border-radius: 14px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); font-size: 13px; line-height: 1.3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; text-align: left; }
.t-zuo-k.rechts { justify-content: flex-start; }
.t-zuo-k .t { overflow-wrap: anywhere; }
.t-zuo-k .mk { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed #cfc8bf; color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-zuo-k.gepaart { border-color: #b493c4; }
.t-zuo-k.gepaart .mk { border: none; background: var(--violett); }
.t-zuo-k.aktiv { border-color: var(--violett); background: #efe7f3; }
.t-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.t-reihe-z { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 6px 6px 6px 12px; }
.t-reihe-z .nr { font-size: 20px; font-weight: 200; color: var(--violett); width: 22px; flex-shrink: 0; }
.t-reihe-z .t { flex: 1 1 auto; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.t-reihe-z .pf { display: flex; flex-direction: column; gap: 2px; }
.t-reihe-z .pf button { width: 44px; height: 30px; border-radius: 8px; border: 1px solid var(--linie); background: var(--grund); color: var(--violett); display: flex; align-items: center; justify-content: center; padding: 0; }
.t-reihe-z .pf button:disabled { color: #c9c2b9; }
.t-fuss { padding: 10px 16px 6px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--linie); background: var(--grund); }
.t-fuss .rund-knopf:disabled { opacity: .4; }
.t-fuss .neben-knopf.schmal { width: auto; height: 48px; padding: 0 16px; font-size: 14px; color: var(--violett); border-color: var(--violett); }
.t-weiter { height: 52px; padding: 0 26px; border-radius: 26px; border: 1px solid var(--violett); background: #fff; color: var(--violett); font-size: 15px; flex-shrink: 0; }
.t-weiter.voll { background: var(--violett); color: #fff; }
.t-weiter:disabled { opacity: .5; }
.t-ergebnis { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; animation: rein .2s ease-out; }
.t-ergebnis .kopf { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.t-st { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.t-st.richtig { background: var(--violett); color: #fff; border: 1.4px solid var(--violett); }
.t-st.fast { background: #fff; color: var(--violett); border: 1.4px dashed var(--violett); }
.t-st.falsch { background: #fff; color: var(--schrift); border: 1.4px solid var(--schrift); }
.t-st.leer { background: #fff; color: var(--leise); border: 1.4px dotted var(--leise); }
.t-kasten { background: #fff; border-radius: 16px; border: 1px solid var(--linie); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.t-kasten.richtig { border-color: var(--violett); }
.t-kasten.loesung { border-color: var(--violett-hell); }
.t-kasten .w { font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-kasten .leise, .blase .was.leise { color: var(--leise); font-size: 13px; }
.t-warum .blase { display: flex; flex-direction: column; gap: 6px; }
.t-warum .blase .was b { font-weight: 400; }
.t-frage-an-dich { border-top: 1px dashed var(--violett-hell); padding-top: 8px; font-size: 13px; line-height: 1.45; }
.t-frage-an-dich b { font-weight: 500; color: var(--violett); }
.t-rueck { display: flex; gap: 8px; align-items: flex-start; animation: rein .2s ease-out; }
.t-rueck > .t-st { margin-top: 14px; }
.t-stufen { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.t-stufen li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--leise); }
.t-stufen li i { width: 22px; height: 4px; border-radius: 2px; background: #d6cfc6; }
.t-stufen li.an { color: var(--violett); } .t-stufen li.an i { background: var(--violett); }
/* Einstellen */
.t-einst { gap: 18px; }
.t-stoff { background: #fff; border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 12px; }
.t-stoff .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t-stoff .n { font-size: 15px; font-weight: 400; overflow-wrap: anywhere; }
.t-stoff .m { font-size: 12px; color: var(--leise); }
.mini-stapel.gross img { width: 38px; height: 52px; margin-left: 0; }
.mini-stapel.gross img + img { margin-left: -14px; }
.t-umfang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t-umfang button { height: 64px; border-radius: 14px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; }
.t-umfang .z { font-size: 22px; font-weight: 200; }
.t-umfang .k { font-size: 11px; }
.t-umfang button[aria-checked="true"], .t-niveau button[aria-checked="true"] { background: var(--violett); border-color: var(--violett); color: #fff; }
.t-niveau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t-niveau button { height: 44px; border-radius: 22px; border: 1px solid var(--linie); background: #fff; color: var(--schrift); font-size: 13px; }
.t-themen button[aria-pressed="true"] { background: #efe7f3; border-color: var(--violett); color: var(--violett); }
.t-seite .ablauf-fuss .tipp img { width: 40px; height: 40px; }
/* Vorbereiten, Bewerten */
.t-warte-kopf { padding: 24px 20px 0; display: flex; align-items: center; gap: 14px; }
.t-warte-kopf > div { display: flex; flex-direction: column; gap: 4px; }
.t-warte-kopf .t { font-size: 22px; font-weight: 300; line-height: 1.2; }
.t-fortschritt { margin: 18px 20px 0; height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.t-fortschritt i { display: block; height: 3px; width: 5%; background: var(--violett); transition: width 1s linear; }
.t-lesen { flex: 1 1 auto; min-height: 0; padding: 20px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.t-karussell { flex: 1 1 auto; min-height: 200px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; }
.t-karussell::-webkit-scrollbar { display: none; }
.t-blatt { flex: 0 0 100%; scroll-snap-align: center; background: #fff; border-radius: 16px; padding: 10px; overflow-y: auto; }
.t-blatt img { width: 100%; height: auto; border-radius: 8px; min-height: 120px; background: #f7f5f2; }
.t-punkte { display: flex; justify-content: center; gap: 6px; padding: 4px 0; }
.t-punkte i { width: 6px; height: 4px; border-radius: 2px; background: #cfc8bf; transition: width .2s; }
.t-punkte i.an { width: 18px; background: var(--violett); }
.t-warte-fuss { border-top: none; }
.t-bewerten { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.t-gross { margin: 0; font-size: 28px; font-weight: 200; line-height: 1.2; }
/* Abgeben */
.t-abgeben { padding-top: 32px; gap: 10px; }
.t-zaehl { font-size: 14px; color: #3d3935; }
.t-raster { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.t-feld { height: 62px; border-radius: 14px; border: 1px solid var(--violett); background: #fff; color: var(--schrift); font-size: 18px; font-weight: 300; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; }
.t-feld svg { position: absolute; right: 6px; top: 6px; color: var(--violett); width: 12px; height: 12px; }
.t-feld.offen { border: 1px dotted var(--leise); background: transparent; color: var(--leise); }
.t-feld.weiss { border-style: dashed; }
.t-legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; color: var(--leise); padding-top: 6px; }
.t-legende span { display: flex; align-items: center; gap: 6px; }
.t-legende svg { color: var(--violett); width: 11px; height: 11px; }
.t-legende .q { width: 12px; height: 12px; border-radius: 3px; background: #fff; border: 1px solid var(--violett); }
.t-legende .q.offen { background: none; border: 1px dotted var(--leise); }
/* Auswertung */
.t-auswertung { gap: 16px; }
.t-ring-zeile { display: flex; align-items: center; gap: 18px; }
.t-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.t-ring svg { position: absolute; inset: 0; }
.t-ring .z { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.t-ring .z b { font-size: 34px; font-weight: 200; line-height: 1; }
.t-ring .z small { font-size: 12px; color: var(--leise); }
.t-zaehler { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-zaehler-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.t-zaehler-reihe span { display: flex; align-items: center; gap: 6px; }
.t-stempel-klein { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--violett); font-weight: 500; }
.t-vergleich { margin: -6px 0 0; }
.t-zettel { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--violett-hell); border-radius: 16px; padding: 10px 12px; }
.t-zettel .aus { width: 24px; height: 24px; border-radius: 50%; border: 1.4px solid var(--violett); color: var(--violett); font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.t-zettel .mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.t-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.t-liste a { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none; }
.t-liste .nr { font-size: 13px; color: var(--leise); width: 18px; text-align: right; flex-shrink: 0; }
.t-liste .t { flex: 1 1 auto; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-liste .p { font-size: 12px; color: var(--leise); flex-shrink: 0; }
.ablauf-fuss .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ablauf-fuss .zwei .neben-knopf { height: 48px; font-size: 14px; }
.ablauf-fuss .neben-knopf:disabled { opacity: .6; }
a.neben-knopf { text-decoration: none; }
/* Detail */
.t-status-zeile { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.t-status-zeile b { font-weight: 400; }
.t-detail { gap: 12px; }
.t-nachlesen { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 8px 12px 8px 8px; text-decoration: none; color: var(--schrift); }
.t-nachlesen img { width: 54px; height: 54px; object-fit: cover; object-position: top; border-radius: 8px; background: #f7f5f2; flex-shrink: 0; }
.t-nachlesen .mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.t-blaettern { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-blaettern .t-punkte { flex-wrap: wrap; }
/* Fehlerrunde fertig */
.t-fertig { align-items: center; text-align: center; gap: 10px; }
.t-fertig .stempel-rund { margin-bottom: 4px; }
.t-fertig-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; align-self: stretch; text-align: left; }
.t-fertig-liste li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linie); padding: 4px 0; }
.t-fertig-liste .mitte { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.t-fertig .tipp { align-self: stretch; text-align: left; }
/* Start: laufende Tests · Üben */
.weiter-tests { display: flex; flex-direction: column; gap: 8px; }
.weiter-tests:empty { display: none; }
.weiter-test, .ueben-zeile { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 12px 14px; text-decoration: none; color: var(--schrift); border: 1px solid var(--violett-hell); }
.weiter-test .kz, .ueben-zeile .kz { font-size: 24px; font-weight: 200; color: var(--violett); width: 34px; flex-shrink: 0; }
.weiter-test .mitte, .ueben-zeile .mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.weiter-test .n, .ueben-zeile .n { font-size: 15px; overflow-wrap: anywhere; }
.weiter-test .m, .ueben-zeile .m { font-size: 12px; color: var(--leise); }
.weiter-test .rechts, .ueben-zeile .rechts { font-size: 13px; color: var(--violett); font-weight: 500; flex-shrink: 0; }
.ueben-zeile { border-color: transparent; }
.ueben-kopf { display: flex; align-items: baseline; gap: 12px; }
.ueben-teil { display: flex; flex-direction: column; gap: 8px; }
.ueben-kopf .zahl-gross { font-size: 60px; line-height: 1; font-weight: 200; color: var(--violett); }