/* Oberfläche des Passwort-Generators im abgeschotteten Rahmen (rechner.html).
   Eigenständig, weil der Rahmen keine Seitenstile der äußeren Seite erbt. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:22px;background:#fff;color:#0f1b2d;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
[hidden]{display:none!important}
button,input,select{font-family:inherit;font-size:1rem}
.calc-btn{border:1px solid #cfd9e6;background:#fff;color:#0f1b2d;padding:9px 16px;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;min-height:44px}
.calc-btn:hover{border-color:#1f6f7f;color:#17535f}
.calc-btn:disabled{opacity:.5;cursor:default}
.calc-btn-primary{background:#1f6f7f;border-color:#1f6f7f;color:#fff}
.calc-btn-primary:hover{background:#17535f;border-color:#17535f;color:#fff}
.calc-btn:focus-visible,.pg-modus label:focus-within,.pg-opt:focus-within,.pg-regler input:focus-visible,.pg-opt input:focus-visible,select:focus-visible,.pg-ausgabe:focus-visible{outline:3px solid #0d4f87;outline-offset:2px}
.pg-modus{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;padding:0;border:0;min-width:0}
.pg-modus legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pg-modus label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:2px solid #9db9d6;border-radius:10px;font-weight:700;cursor:pointer;background:#fff;text-align:center;margin:0}
.pg-modus input{position:absolute;opacity:0;width:1px;height:1px}
.pg-modus label:has(input:checked){background:#e8f1fb;border-color:#1f6f7f;color:#0f3c47}
.pg-ausgabe{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.3rem;line-height:1.5;font-weight:600;padding:14px 16px;min-height:2.6em;border:2px solid #1f6f7f;border-radius:10px;background:#f5f8fb;word-break:break-all;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.pg-ausgabe.pg-phrase,.pg-vorschlag-text.pg-phrase{word-break:normal;overflow-wrap:anywhere}
.pg-ausgabe.pg-leer{border-style:dashed;border-color:#9db9d6;font-weight:400;color:#5b6b7f}
.pg-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.pg-staerke{margin:14px 0 0}
.pg-staerke strong{font-size:1.15rem}
.pg-hinweise,.pg-rechenweg{margin:8px 0 0;padding-left:22px;font-size:.9rem}
.pg-hinweise li,.pg-rechenweg li{margin:0 0 4px}
.pg-rechenweg-titel{font-size:.9rem;font-weight:700;margin:12px 0 0}
.pg-status{margin:12px 0 0;font-size:.92rem;color:#0f3c47}
.pg-einst{margin-top:18px;padding-top:14px;border-top:1px solid #e2e8f0}
.pg-einst h2{margin:0 0 6px;font-size:1.05rem}
.pg-regler{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.pg-regler label{font-weight:600;font-size:.9rem}
.pg-regler input[type=range]{width:100%;min-height:44px;accent-color:#1f6f7f;margin:0}
.pg-feld{margin:0 0 12px}
.pg-feld label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.pg-feld select{width:100%;min-height:44px;padding:9px 13px;border:1px solid #cfd9e6;border-radius:10px;background:#fff;color:#0f1b2d;-webkit-appearance:none;appearance:none;height:44px;line-height:1.4;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,#0f1b2d 50%),linear-gradient(135deg,#0f1b2d 50%,transparent 50%);background-size:6px 6px,6px 6px;background-repeat:no-repeat;background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%}
.pg-opt{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:.95rem;cursor:pointer}
.pg-opt input{width:22px;height:22px;flex:0 0 22px;accent-color:#1f6f7f;margin:0}
.pg-opt-gruppe{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pg-vorschlaege{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pg-vorschlag{display:flex;align-items:center;gap:10px;border:1px solid #cfd9e6;border-radius:10px;padding:6px 6px 6px 12px;background:#fff;min-width:0}
.pg-vorschlag-text{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;word-break:break-all;overflow-wrap:anywhere;background:none;padding:0}
.pg-mini{flex:0 0 auto;padding:0 14px}
.pg-hinweis{color:#5b6b7f;font-size:.86rem;margin:14px 0 0}
@media(max-width:480px){body{padding:12px 16px 16px}.pg-opt-gruppe{grid-template-columns:1fr}.pg-ausgabe{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}