:root{--primaer: #2563eb;--primaer-dunkel: #1d4ed8;--alice: #db2777;--bob: #2563eb;--eve: #d97706;--gefahr: #dc2626;--erfolg: #16a34a;--grau-50: #f8fafc;--grau-100: #f1f5f9;--grau-200: #e2e8f0;--grau-300: #cbd5e1;--grau-500: #64748b;--grau-700: #334155;--grau-900: #0f172a;--radius: 12px;--schatten: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06)}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--grau-100);color:var(--grau-900);line-height:1.6}.app{max-width:880px;margin:0 auto;padding:0 16px 80px}.kopf{text-align:center;padding:32px 0 16px}.kopf h1{margin:0;font-size:2rem}.untertitel{margin:4px 0 0;color:var(--grau-500)}.schritt-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:16px 0 24px}.nav-knopf{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--grau-200);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:.9rem;color:var(--grau-700);transition:all .15s}.nav-knopf:hover{border-color:var(--primaer)}.nav-knopf.aktiv{background:var(--primaer);color:#fff;border-color:var(--primaer)}.nav-knopf.erledigt .nav-nummer{background:var(--erfolg);color:#fff}.nav-nummer{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--grau-200);font-size:.8rem;font-weight:700}.nav-knopf.aktiv .nav-nummer{background:#ffffff4d}.inhalt{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:28px 32px}.schritt h2{margin-top:0;font-size:1.5rem}.schritt h3{margin-top:28px;font-size:1.15rem;color:var(--grau-700)}.rollen-hinweis{display:inline-block;padding:6px 14px;border-radius:999px;font-weight:600;font-size:.9rem;margin-bottom:12px}.rollen-hinweis.alice{background:#fce7f3;color:var(--alice)}.rollen-hinweis.bob{background:#dbeafe;color:var(--bob)}.rollen-hinweis.eve{background:#fef3c7;color:var(--eve)}.rollen{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.rolle{flex:1 1 160px;text-align:center;padding:18px;border-radius:var(--radius);display:flex;flex-direction:column;gap:4px;border:2px solid}.rolle span:last-child{font-size:.85rem;color:var(--grau-500)}.rolle-emoji{font-size:2.4rem}.rolle.alice{border-color:var(--alice);background:#fdf2f8}.rolle.bob{border-color:var(--bob);background:#eff6ff}.rolle.eve{border-color:var(--eve);background:#fffbeb}.merkkasten{background:var(--grau-50);border-left:4px solid var(--primaer);border-radius:8px;padding:16px 20px;margin:20px 0}.merkkasten.klein{font-size:.92rem}.merkkasten h4{margin:0 0 8px}.eingabe-gitter{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:20px 0}.eingabe-gitter label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:var(--grau-700)}.eingabe-gitter select,.eingabe-gitter input,.text-eingabe input{padding:9px 12px;border:1px solid var(--grau-300);border-radius:8px;font-size:1rem;min-width:90px}.text-eingabe{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--grau-700);margin:16px 0}.text-eingabe input{max-width:320px}.berechnung{background:var(--grau-50);border-radius:8px;padding:12px 18px;margin:16px 0;font-family:SF Mono,Menlo,monospace}.berechnung-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--grau-200)}.berechnung-zeile:last-child{border-bottom:none}.formel{color:var(--grau-700)}.gleich{color:var(--grau-300)}.resultat{font-weight:700;color:var(--primaer);font-size:1.05rem}.gefahr-text{color:var(--gefahr)}.anmerkung{font-family:system-ui,sans-serif;font-size:.82rem;color:var(--grau-500);margin-left:auto}.formel-gross{text-align:center;font-size:1.4rem;font-family:SF Mono,Menlo,monospace;background:var(--grau-900);color:#e2e8f0;padding:18px;border-radius:8px;margin:18px 0}.schluessel-anzeige{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0}.schluessel-karte{flex:1 1 240px;border-radius:var(--radius);padding:18px;border:2px solid}.schluessel-karte h4{margin:0 0 8px}.schluessel-karte.oeffentlich{border-color:var(--erfolg);background:#f0fdf4}.schluessel-karte.privat{border-color:var(--gefahr);background:#fef2f2}.gross-zahl{font-family:SF Mono,monospace;font-size:1.2rem;font-weight:700;margin:6px 0}.schluessel-info{font-size:.85rem;color:var(--grau-500);margin:4px 0 0}.zeichen-liste{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.zeichen-karte{border:1px solid var(--grau-200);border-radius:8px;padding:10px 14px;text-align:center;background:var(--grau-50);min-width:78px}.zeichen-karte.ungueltig{opacity:.5}.zeichen-gross{font-size:1.6rem;font-weight:700}.zeichen-zahl{font-size:.85rem;color:var(--grau-500)}.zeichen-pfeil{color:var(--grau-300)}.zeichen-geheim{font-weight:700;color:var(--primaer);font-family:SF Mono,monospace}.zeichen-fehler{font-size:.7rem;color:var(--gefahr)}.rechnung{margin:14px 0}.aufklapp{background:var(--grau-100);border:1px solid var(--grau-200);border-radius:8px;padding:10px 14px;width:100%;text-align:left;cursor:pointer;font-size:.95rem;font-family:SF Mono,monospace}.aufklapp:hover{background:var(--grau-200)}.rechnung-detail{padding:12px 4px}.hinweis-klein{font-size:.85rem;color:var(--grau-500)}.ergebnis-zeile{font-family:SF Mono,monospace;font-size:.9rem;background:var(--grau-50);padding:8px 12px;border-radius:6px}.tabelle{width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0}.tabelle th,.tabelle td{border:1px solid var(--grau-200);padding:7px 12px;text-align:left}.tabelle th{background:var(--grau-100)}.tabelle.vergleich td:last-child{color:var(--grau-700)}.geheim-ergebnis{background:var(--grau-900);color:#e2e8f0;border-radius:var(--radius);padding:18px 22px;margin:20px 0}.geheim-ergebnis h4{margin:0 0 8px}.geheim-zahlen{font-family:SF Mono,monospace;font-size:1.15rem;font-weight:700;letter-spacing:1px;margin:0;word-break:break-all}.geheim-ergebnis.erfolg{background:#f0fdf4;color:var(--grau-900);border:2px solid var(--erfolg)}.klartext-ergebnis{font-size:1.8rem;font-weight:700;letter-spacing:3px;color:var(--erfolg);margin:0}.angriff-box{border:2px solid var(--eve);background:#fffbeb;border-radius:var(--radius);padding:20px;margin:20px 0}.angriff-box h3{margin-top:0}.angriff-ergebnis{margin-top:12px}.quiz-frage{border:1px solid var(--grau-200);border-radius:var(--radius);padding:18px;margin:16px 0}.quiz-frage h3{margin-top:0}.quiz-optionen{display:flex;flex-direction:column;gap:8px}.quiz-option{text-align:left;padding:11px 16px;border:1px solid var(--grau-300);border-radius:8px;background:#fff;cursor:pointer;font-size:.95rem;transition:all .12s}.quiz-option:hover:not(:disabled){border-color:var(--primaer);background:var(--grau-50)}.quiz-option:disabled{cursor:default}.quiz-option.richtig{border-color:var(--erfolg);background:#f0fdf4;font-weight:600}.quiz-option.falsch{border-color:var(--gefahr);background:#fef2f2}.quiz-feedback{margin-top:10px;padding:10px 14px;border-radius:8px;font-size:.9rem}.quiz-feedback.ok{background:#f0fdf4;color:#166534}.quiz-feedback.nok{background:#fef2f2;color:#991b1b}.quiz-ergebnis{text-align:center;background:var(--grau-100);border-radius:var(--radius);padding:24px;margin-top:20px}.quiz-ergebnis.perfekt{background:#f0fdf4;border:2px solid var(--erfolg)}.quiz-ergebnis h3{margin-top:0}.echt-box{border:2px solid var(--primaer);background:#eff6ff;border-radius:var(--radius);padding:18px 22px;margin:18px 0}.echt-box h4{margin:14px 0 4px}.echt-box h4:first-child{margin-top:0}.riesen-zahl{font-family:SF Mono,Menlo,monospace;font-size:.82rem;line-height:1.5;word-break:break-all;background:var(--grau-900);color:#7dd3fc;padding:14px;border-radius:8px;max-height:220px;overflow-y:auto}.ablauf{margin:16px 0}.ablauf-schritt{display:flex;align-items:center;gap:12px;background:var(--grau-50);border:1px solid var(--grau-200);border-radius:8px;padding:12px 16px}.ablauf-nr{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--primaer);color:#fff;font-weight:700}.ablauf-pfeil{text-align:center;color:var(--grau-300);font-size:1.2rem;margin:2px 0}code{background:var(--grau-100);padding:1px 6px;border-radius:4px;font-size:.9em}.fehler{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin:12px 0}.hinweis{background:#eff6ff;color:#1e40af;border-radius:8px;padding:14px 18px;margin:12px 0}.knopf{border:none;border-radius:8px;padding:10px 20px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s}.knopf.primaer{background:var(--primaer);color:#fff}.knopf.primaer:hover:not(:disabled){background:var(--primaer-dunkel)}.knopf.sekundaer{background:var(--grau-200);color:var(--grau-700)}.knopf.sekundaer:hover:not(:disabled){background:var(--grau-300)}.knopf.gefahr{background:var(--gefahr);color:#fff}.knopf.gefahr:hover{background:#b91c1c}.knopf.gross{padding:14px 28px;font-size:1.05rem;margin-top:16px}.knopf:disabled{opacity:.4;cursor:not-allowed}.fuss{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:0 4px}.fortschritt{color:var(--grau-500);font-size:.9rem}@media (max-width: 600px){.inhalt{padding:20px 18px}.nav-text{display:none}.berechnung-zeile{font-size:.85rem}.anmerkung{margin-left:0;flex-basis:100%}}