/* passwort.css — /tools/passwort (05.10.2026). Baut auf werkzeug.css auf. */
.pw { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.pw .wz-reiter { margin-bottom: 0.2rem; }
@media (min-width: 761px) { .pw .wz-reiter { justify-content: center; } }

.pw-ausgabe { display: grid; grid-template-columns: 1fr auto; gap: 1rem 0.8rem; align-items: center; }
.pw-wert {
  display: block; min-width: 0; min-height: 2.4rem;
  font: 600 clamp(1.25rem, 4.4vw, 1.75rem) ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.02em; line-height: 1.35; color: var(--text); word-break: break-all;
}
.pw-wert.lang { font-size: clamp(1rem, 3.4vw, 1.3rem); }
.pw-wert .z { color: var(--pri2); }
.pw-wert .s { color: #d0662f; }
.pw-wert .l { display: inline-block; width: 0.5em; }
.pw-wert.neu span { animation: pwZeichen 0.38s var(--ease-out) backwards; }
.pw-wert.neu span:nth-child(4n+1) { animation-delay: 0ms; }
.pw-wert.neu span:nth-child(4n+2) { animation-delay: 25ms; }
.pw-wert.neu span:nth-child(4n+3) { animation-delay: 50ms; }
.pw-wert.neu span:nth-child(4n) { animation-delay: 75ms; }
@keyframes pwZeichen { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }
.pw-knoepfe { display: flex; gap: 0.5rem; }
#pwNeu.dreht svg { animation: pwDreh 0.5s var(--ease-out); }
@keyframes pwDreh { to { transform: rotate(360deg); } }

.pw-staerke { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.45rem; }
.pw-balken { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.pw-balken i { display: block; height: 100%; width: 10%; border-radius: inherit; background: #e05a47; transition: width 0.4s var(--ease-out), background 0.3s; }
.pw-staerke[data-stufe="1"] .pw-balken i { background: #f0a43a; }
.pw-staerke[data-stufe="2"] .pw-balken i { background: #3aa76d; }
.pw-staerke[data-stufe="3"] .pw-balken i { background: linear-gradient(90deg, #3aa76d, #1f9e8f); }
.pw-staerke-text { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; font-size: 0.84rem; color: var(--sub); }
.pw-staerke-text b { color: var(--text); font-size: 0.9rem; }

.pw-einst .wz-seite { display: flex; flex-direction: column; gap: 1.1rem; }
.pw-zeile { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--text2); }
.pw-zeile b { font: 800 1.3rem 'Sora', sans-serif; color: var(--pri); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.pw-zeile .wz-regler { grid-column: 1 / -1; }
.pw-zeile-frei { grid-template-columns: auto 1fr; }
.pw-zeile-frei .wz-segment { justify-self: end; }

.pw-sorten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.pw-sorte {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.7rem 0.3rem;
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--card2); color: var(--sub);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
.pw-sorte b { font: 700 1.05rem ui-monospace, Consolas, monospace; }
.pw-sorte span { font-size: 0.74rem; font-weight: 600; }
.pw-sorte[aria-pressed="true"] { background: var(--card); border-color: var(--pri3); color: var(--pri); box-shadow: 0 4px 12px rgba(26, 106, 170, 0.1); }
.pw-sorte:active { transform: scale(0.95); }
.pw-tipp { margin: 0; font-size: 0.84rem; color: var(--sub); line-height: 1.5; }

.pw-fuss { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--sub); }
.pw-fuss svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) {
  .pw-ausgabe { grid-template-columns: 1fr; }
  .pw-knoepfe { justify-content: stretch; }
  .pw-knoepfe .wz-primaer { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .pw-wert.neu span, #pwNeu.dreht svg { animation: none; } }