:root{--brand-primary: #e2061a;--brand-primary-dunkel: #b30514;--brand-accent: #1a1a1a;--ink: #1d1d1f;--paper: #ffffff;--grund: #f4f4f2;--linie: #e2e2de;--grau: #8a8a86;--gedimmt: #5f5f5b;--ok: #2e7d32;--warn: #f9a825;--bad: #c62828;--font-body: "Barlow", system-ui, "Segoe UI", Roboto, sans-serif;--font-titel: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--radius: 10px;color-scheme:light}*{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}@media (min-width: 900px){html.buehne{font-size:21px}}body{margin:0;background:var(--grund);color:var(--ink);font-family:var(--font-body);line-height:1.45}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}.app{min-height:100vh;display:flex;flex-direction:column}.inhalt{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:20px 16px 40px}html.buehne .inhalt{max-width:1600px}.kopf{background:var(--paper);border-bottom:4px solid var(--brand-primary);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;position:sticky;top:0;z-index:5}.logo-btn{background:none;border:0;padding:0;display:flex}.logo{height:48px;width:auto;display:block}.kopf-rechts{display:flex;align-items:center;gap:12px}.status{font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}.status.ki{background:#e7f3e8;color:var(--ok)}.status.lokal{background:#fff4d6;color:#7a5600}.karte{background:var(--paper);border:1px solid var(--linie);border-radius:var(--radius);padding:18px}.titel{font-family:var(--font-titel);font-style:italic;font-weight:800;font-size:2.1rem;line-height:1.05;margin:6px 0 14px;text-transform:none}.klein-titel{font-size:1.6rem;margin:2px 0 0}.ueber{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-primary)}.unter{margin:-6px 0 16px;color:var(--gedimmt)}.klein{font-size:.88rem}.gedimmt{color:var(--gedimmt)}h2{font-family:var(--font-titel);font-weight:700;font-size:1.35rem;margin:0 0 10px;display:flex;align-items:center;gap:8px}h3{font-size:.95rem;margin:16px 0 4px}.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--brand-accent);background:var(--paper);border-radius:8px;padding:10px 16px;font-weight:600}.knopf.primaer{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}.knopf.primaer:hover:not(:disabled){background:var(--brand-primary-dunkel)}.link{background:none;border:0;padding:6px 0;color:var(--brand-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-align:left}.zurueck{background:none;border:0;padding:4px 0;display:inline-flex;align-items:center;gap:4px;color:var(--gedimmt);font-weight:600}.schalter{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none}.schalter input{width:18px;height:18px;accent-color:var(--brand-primary)}.schalter span{display:inline-flex;align-items:center;gap:4px}.badge-erfunden{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.06em;background:#fff4d6;color:#7a5600;border:1px solid #f0d58a;border-radius:4px;padding:1px 5px;vertical-align:middle}.start{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px}.hero{padding:28px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;background:var(--brand-primary);opacity:.07;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}.hero-titel{font-family:var(--font-titel);font-style:italic;font-weight:800;font-size:3rem;line-height:1;margin:8px 0 14px}.hero-titel span{color:var(--brand-primary)}.hero-text p:last-child{max-width:60ch}.modus-wahl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 16px}.modus{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--paper);border:2px solid var(--brand-accent);border-radius:var(--radius);padding:18px;transition:transform .12s,border-color .12s,box-shadow .12s}.modus:hover{border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:0 6px 18px #00000014}.modus svg{color:var(--brand-primary)}.modus strong{font-family:var(--font-titel);font-size:1.45rem;font-style:italic}.modus span{color:var(--gedimmt);font-size:.9rem}.start-optionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.weg h2 svg{color:var(--brand-primary)}.weg-liste{list-style:none;padding:0;margin:14px 0;counter-reset:s}.weg-liste li{counter-increment:s;position:relative;padding:0 0 16px 40px;display:flex;flex-direction:column;font-size:.92rem}.weg-liste li:before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--brand-accent);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.8rem}.weg-liste li:not(:last-child):after{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:var(--linie)}.weg-liste li.ziel:before{background:var(--brand-primary)}.weg-liste span{color:var(--gedimmt)}.schritte{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;padding:0;margin:10px 0 0;font-size:.78rem;color:var(--grau);font-weight:600}.schritte li.an{color:var(--brand-primary)}.schritte li.fertig{color:var(--ink)}.schritte li:not(:last-child):after{content:"›";margin-left:14px;color:var(--grau)}.raster-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.wahl{display:flex;flex-direction:column;gap:8px;text-align:left;border:2px solid var(--linie);transition:border-color .12s,transform .12s}.wahl:hover{border-color:var(--brand-primary);transform:translateY(-2px)}.wahl strong{font-size:1.1rem}.wahl-icon{font-size:2rem;line-height:1}.wahl .situation{background:var(--grund);border-radius:6px;padding:6px 8px}.wahl .hinweis{color:#7a5600}.wahl .fehler{border-left:3px solid var(--brand-primary);padding-left:8px}.avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;background:#fde7e9}.avatar[data-p=murat]{background:#e5eef9}.avatar[data-p=sabine]{background:#efeae2}.avatar.gross{width:56px;height:56px;font-size:2rem}.schwierigkeit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-weight:600}.seg{border:2px solid var(--linie);background:var(--paper);border-radius:99px;padding:6px 14px;font-weight:600}.seg.an{border-color:var(--brand-accent);background:var(--brand-accent);color:#fff}.unterricht-kopf,.auswertung-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}.timer{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-titel);font-weight:700;font-size:1.8rem;background:var(--brand-accent);color:#fff;border-radius:8px;padding:4px 14px;font-variant-numeric:tabular-nums}.timer.knapp{background:var(--brand-primary);animation:puls 1s infinite}@keyframes puls{50%{opacity:.75}}.unterricht-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}html.buehne .unterricht-raster{grid-template-columns:minmax(0,1fr) 380px}.chat{display:flex;flex-direction:column;padding:0;overflow:hidden;height:min(68vh,680px)}.situation-box{display:flex;gap:8px;align-items:flex-start;background:#fff4d6;padding:10px 14px;font-size:.9rem;border-bottom:1px solid #f0d58a}.lernziel-box{background:var(--grund);padding:8px 14px;font-size:.85rem;border-bottom:1px solid var(--linie)}.nachrichten{list-style:none;margin:0;padding:16px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.nachricht{display:flex;gap:8px;align-items:flex-end;max-width:85%}.nachricht.anwaerter{align-self:flex-end}.blase{background:var(--grund);border-radius:14px 14px 14px 4px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}.nachricht.anwaerter .blase{background:var(--brand-accent);color:#fff;border-radius:14px 14px 4px}.wer{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.65;margin-bottom:2px}.tippt{display:flex;gap:4px;padding:14px}.tippt span{width:7px;height:7px;border-radius:50%;background:var(--grau);animation:tipp 1s infinite}.tippt span:nth-child(2){animation-delay:.15s}.tippt span:nth-child(3){animation-delay:.3s}@keyframes tipp{50%{transform:translateY(-4px);opacity:.4}}.eingabe{display:flex;gap:8px;padding:10px;border-top:1px solid var(--linie);align-items:flex-end}.eingabe textarea{flex:1;resize:none;border:2px solid var(--linie);border-radius:8px;padding:8px 10px;font:inherit;min-height:48px}.eingabe textarea:focus{outline:none;border-color:var(--brand-accent)}.eingabe-knoepfe{display:flex;gap:6px}.rund{width:46px;height:46px;border-radius:50%;border:2px solid var(--linie);background:var(--paper);display:grid;place-items:center}.rund.primaer{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}.rund.aufnahme{background:var(--bad);border-color:var(--bad);color:#fff;animation:puls 1s infinite}.seite{display:flex;flex-direction:column;gap:12px}.persona-mini{display:flex;gap:12px;align-items:flex-start}.persona-mini p{margin:4px 0 0}.seite-knoepfe{display:flex;flex-direction:column;gap:10px;align-items:stretch}.seite-knoepfe .link{text-align:center}.meter-kopf{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}.meter-kopf strong{font-family:var(--font-titel);font-size:2rem;line-height:1;transition:color .3s}.meter-bahn{position:relative;height:14px;border-radius:99px;background:var(--grund);margin:8px 0;overflow:hidden}.meter-fuell{height:100%;border-radius:99px;transition:width .6s ease,background .3s}.meter-marke{position:absolute;top:0;bottom:0;width:2px;background:#00000040}.aufgeloest{margin:4px 0 8px;font-size:.85rem;color:var(--gedimmt);font-weight:600}.aufgeloest.ja{color:var(--ok)}.kurven{width:100%;height:auto;display:block}.kurven .gitter{stroke:var(--linie);stroke-width:1}.kurven .gitter.marke{stroke-dasharray:3 3;stroke:#c9c9c4}.kurven .achse{font-size:10px;fill:var(--grau);font-family:var(--font-body)}.aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.hinweis-band{background:var(--brand-accent);color:#fff;font-weight:600;padding:8px 14px;border-radius:8px;margin:0 0 14px}.laden{display:flex;align-items:center;gap:14px}.spinner{width:28px;height:28px;border:3px solid var(--linie);border-top-color:var(--brand-primary);border-radius:50%;animation:dreh .8s linear infinite}@keyframes dreh{to{transform:rotate(360deg)}}.fazit{margin-bottom:12px}.fazit-text{font-size:1.2rem;font-weight:600;margin:0 0 8px}.fazit-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem;color:var(--gedimmt)}.kriterien{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}.kriterium{display:flex;gap:14px;border-left-width:6px}.kriterium.gruen{border-left-color:var(--ok)}.kriterium.gelb{border-left-color:var(--warn)}.kriterium.rot{border-left-color:var(--bad)}.kriterium p{margin:4px 0;font-size:.92rem}.krit-kopf{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.ampel-text{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.ampel-text.gruen{color:var(--ok)}.ampel-text.gelb{color:#9a6a00}.ampel-text.rot{color:var(--bad)}.ampel{flex:none;display:flex;flex-direction:column;gap:4px;background:var(--brand-accent);padding:5px;border-radius:8px;height:fit-content}.ampel i{width:14px;height:14px;border-radius:50%;background:#444}.ampel.rot i:nth-child(1){background:var(--bad);box-shadow:0 0 8px var(--bad)}.ampel.gelb i:nth-child(2){background:var(--warn);box-shadow:0 0 8px var(--warn)}.ampel.gruen i:nth-child(3){background:var(--ok);box-shadow:0 0 8px var(--ok)}blockquote{margin:6px 0 0;padding:6px 10px;background:var(--grund);border-left:3px solid var(--brand-accent);font-style:italic;font-size:.88rem;overflow-wrap:anywhere}.feedback-unten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.tipps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.ermutigung p{margin:0}.vergleich{margin-bottom:12px;border:2px solid var(--brand-primary)}.vergleich-raster{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}.legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;font-weight:600;margin-bottom:4px}.strich{display:inline-block;width:22px;height:0;border-top:3px solid var(--brand-primary);vertical-align:middle;margin-right:4px}.strich.alt{border-top:3px dashed var(--grau)}.vergleich-tabelle{width:100%;border-collapse:collapse;font-size:.9rem}.vergleich-tabelle th,.vergleich-tabelle td{padding:6px 4px;border-bottom:1px solid var(--linie);text-align:center}.vergleich-tabelle th:first-child,.vergleich-tabelle td:first-child{text-align:left}.punkt{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--linie)}.punkt.gruen{background:var(--ok)}.punkt.gelb{background:var(--warn)}.punkt.rot{background:var(--bad)}.besser{color:var(--ok);font-weight:700}.schlechter{color:var(--bad);font-weight:700}.gleich{color:var(--grau)}.verlauf summary{cursor:pointer;font-weight:600}.nachrichten.statisch{max-height:none;overflow:visible;padding:12px 0 0}.fuss{background:var(--brand-accent);color:#ddd;font-size:.82rem;padding:14px 16px;text-align:center}.fuss-klein{display:block;opacity:.7;margin-top:2px}@media (max-width: 900px){.start,.unterricht-raster,html.buehne .unterricht-raster{grid-template-columns:1fr}.seite{order:-1;display:grid;grid-template-columns:1fr 1fr}.seite-knoepfe{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center}.feedback-unten,.vergleich-raster{grid-template-columns:1fr}}@media (max-width: 560px){.logo{height:38px}.kopf{padding:8px 12px}.hero{padding:18px}.hero-titel{font-size:2.2rem}.titel{font-size:1.7rem}.klein-titel{font-size:1.3rem}.modus-wahl,.raster-karten,.kriterien{grid-template-columns:1fr}.seite{grid-template-columns:1fr;position:sticky;top:58px;z-index:3;gap:8px;background:var(--grund);padding:4px 0}.persona-mini{display:none}.seite .karte{padding:10px 12px}.seite .kurven,.seite .karte>.klein{display:none}.meter-kopf strong{font-size:1.5rem}.meter-bahn{margin:4px 0}.aufgeloest{margin:0;font-size:.8rem}.seite-knoepfe{gap:4px 14px}.seite-knoepfe .knopf{padding:6px 12px}.chat{height:max(340px,calc(100svh - 300px))}.nachricht{max-width:94%}.timer{font-size:1.4rem}.kriterium{gap:10px;padding:14px}.aktionen .knopf{width:100%}}@media print{.kopf{position:static}.nicht-drucken,.kopf-rechts,.zurueck{display:none!important}body{background:#fff}.karte{break-inside:avoid;border-color:#bbb}.kriterien{grid-template-columns:1fr 1fr}.hinweis-band,.ampel,.punkt,.meter-fuell,.fuss{-webkit-print-color-adjust:exact;print-color-adjust:exact}}