/* Ergänzungen zu hfmt.css für die Formulare von pwreset.
   Jost (SIL OFL) als selbst gehostete Ersatzschrift für Futura, siehe Design-Guide 3. */
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("fonts/jost-latin-700-normal.woff2") format("woff2"); }

/* Kachelfarben als Klassen (CSP erlaubt keine style-Attribute) */
.c-musik { --c: var(--hfmt-musik); }
.c-dekanat { --c: var(--hfmt-dekanat12); }
.c-wissenschaft { --c: var(--hfmt-wissenschaft); }

.pw-lead { font-size: var(--hfmt-lead); max-width: 46rem; margin-top: var(--hfmt-space-m); color: #222; }
.pw-lead .hfmt-second, .pw-suggest-intro .hfmt-second { display: block; margin-top: 4px; }
.pw-tiles { --cols: 2; max-width: 980px; }
.pw-tiles .hfmt-tile small[lang="en"] { font-size: var(--hfmt-small); margin-top: 2px; }

/* Formular links, Vorschläge rechts */
.pw-layout { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 28rem); gap: clamp(24px, 4vw, 72px);
             align-items: start; margin-top: var(--hfmt-space-m); }
.pw-form { display: flex; flex-direction: column; gap: 18px; max-width: 34rem; }
.pw-form-narrow { margin-top: var(--hfmt-space-m); }
.pw-form .hfmt-msg { margin: 0; }
.pw-field { display: flex; flex-direction: column; gap: 6px; }
.pw-field label { font-weight: 700; }
.pw-field label .hfmt-second { font-weight: 400; margin-left: 6px; }
.pw-field input { font: inherit; font-size: 1.15rem; padding: 12px 14px; border: 2px solid var(--hfmt-ink);
                  border-radius: 0; background: var(--hfmt-white); color: var(--hfmt-ink); width: 100%; }
.pw-field input:focus-visible { outline: none; box-shadow: inset 0 -4px 0 var(--hfmt-gold); }
.pw-field input::placeholder { color: #8a8a8a; }
.pw-form .hfmt-hint { margin: 0; }
.pw-chars { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .12em;
            color: var(--hfmt-ink); white-space: normal; word-break: break-all; }
.pw-show { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.pw-show input { width: 20px; height: 20px; accent-color: var(--hfmt-ink); }
.pw-submit { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 6px; }
.pw-btn { font-size: 1.15rem; padding: 14px 24px; min-height: 52px; }
.pw-link { font-weight: 700; }
.pw-back { margin-top: var(--hfmt-space-l); display: flex; }
.pw-back .hfmt-sidelink { padding-block: 12px; }

.pw-suggest { --c: var(--hfmt-gold); }
.pw-suggest-intro { margin: 0 clamp(14px, 1.6vw, 24px) 14px; color: var(--hfmt-muted); font-size: var(--hfmt-small); }
.pw-suggest .hfmt-list { padding: 0; list-style: none; }
/* Raster statt Flex: Knopf immer rechts, das Passwort bricht nur in seiner Spalte um
   (bevorzugt nach Bindestrichen) */
.pw-suggest .hfmt-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.pw-sugg { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace; font-size: 1rem; line-height: 1.35;
           overflow-wrap: break-word; min-width: 0; }
.pw-suggest .hfmt-btn { padding: 6px 12px; min-height: 40px; justify-self: end; }

/* Ohne JavaScript bleiben Übernehmen-Knöpfe und "anzeigen" verborgen */
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.js .pw-show.js-only { display: flex !important; }

@media (max-width: 900px) {
  .pw-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pw-tiles { --cols: 1 !important; }
}
/* Schmal: Passwort über die volle Breite, Knopf darunter – in jeder Zeile gleich */
@media (max-width: 560px) {
  .pw-suggest .hfmt-list > li { grid-template-columns: minmax(0, 1fr); }
  .pw-suggest .hfmt-btn { justify-self: start; }
}

.pw-nowrap { white-space: nowrap; }
/* Fließtext (Datenschutzhinweis) */
.pw-prose { max-width: 46rem; }
.pw-prose .hfmt-h2 { margin: var(--hfmt-space-m) 0 10px; }
.pw-prose h3 { font-size: 1.15rem; margin: 22px 0 6px; }
.pw-prose p { margin: 0 0 10px; }
.pw-prose .pw-lead { margin: var(--hfmt-space-m) 0 10px; }
.pw-prose a { font-weight: 700; }

/* Rechtliches rechts in der Fußzeile: klein, grau, nicht fett */
.hfmt-footer .pw-legal { display: flex; flex-wrap: wrap; gap: 6px 32px; }
.hfmt-footer .pw-legal a { font-weight: 400; font-size: var(--hfmt-small); color: var(--hfmt-muted); text-decoration: none; }
.hfmt-footer .pw-legal a:hover { color: var(--hfmt-ink); text-decoration: underline; }