/* Stil für den geschützten Bereich (rechner.html). Keine Schriften, keine Bilder von außen. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;padding:3px 3px 8px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;color:#0f1b2d;background:transparent;font-size:16px}
main{max-width:100%}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.feld{margin:0 0 12px}
.feld label{display:block;font-weight:600;font-size:.9rem;margin:0 0 6px}
.eingabe{position:relative;display:flex;align-items:center}
.eingabe input{width:100%;padding:11px 116px 11px 13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;font-size:1rem;color:#0f1b2d;background:#fff;min-height:48px}
.eingabe input:focus{outline:2px solid #2d8fa3;outline-offset:1px;border-color:#2d8fa3}
.eingabe input[readonly]{background:#f5f7fa}
.auge{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#1f6f7f;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn{min-height:44px;min-width:44px;padding:9px 16px;border:1px solid #cbd5e1;background:#fff;color:#0f1b2d;border-radius:10px;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer}
.btn:hover{border-color:#2d8fa3;color:#1f6f7f}
.btn-primaer{background:#1f6f7f;border-color:#1f6f7f;color:#fff}
.btn-primaer:hover{background:#17535f;border-color:#17535f;color:#fff}
.btn:disabled{opacity:.7;cursor:progress}
.btn:focus-visible,.auge:focus-visible,.eingabe input:focus-visible{outline:3px solid #0d4f87;outline-offset:2px}
.zweifel{font-size:.88rem;color:#5b6b7f;margin:14px 0 0}
.hint{font-size:.86rem;color:#5b6b7f;margin:16px 0 0}
.hint[hidden],.ergebnis[hidden]{display:none}
.ergebnis{margin-top:4px}
.warn{margin-top:14px;padding:11px 14px;border-radius:10px;background:#fef3f0;border:1px solid #f3c9bf;color:#8c3a26;font-size:.92rem}
.info{margin-top:14px;padding:11px 14px;border-radius:10px;background:#e8f1fb;border:1px solid #cfe0f3;color:#1e5a96;font-size:.92rem}
.schritte{margin:12px 0 0;padding-left:22px;font-size:.92rem}
.schritte li{margin:0 0 6px}
.nachsatz{font-size:.92rem;margin:12px 0 0}
.gesendet{margin-top:16px;border:1px dashed #9db9d6;border-radius:10px;padding:12px 14px;background:#f5f7fa}
.gesendet h2{margin:0 0 8px;font-size:.95rem}
.gesendet dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.88rem}
.gesendet dt{color:#5b6b7f}
.gesendet dd{margin:0;word-break:break-word;min-width:0}
.gesendet code{background:#fff;padding:1px 6px;border-radius:4px;font-weight:700}
@media(max-width:480px){.gesendet dl{grid-template-columns:1fr}.gesendet dd{margin-bottom:6px}.btn{flex:1 1 140px}}