/* Passwort vergessen / neu vergeben – Hiss IT Design System, Hintergrund: MyKal-Scanner */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/hissit/manrope-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hissit/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hissit/source-sans-3-latin-600-normal.woff2') format('woff2'); }

:root {
    /* MyKal-Orange aus dem Logo (mykal-order-logo-sm-blu.svg) */
    --mykal-orange: #F57F24;
    --mykal-orange-hover: #DE6A12;
    --orange-50: #FEF2E9;
    --orange-500: var(--mykal-orange);
    --orange-600: var(--mykal-orange);
    --orange-700: #B04F00;
    --neutral-0: #FFFFFF;
    --neutral-25: #FAFAF8;
    --neutral-100: #ECEBE7;
    --neutral-200: #DDDCD6;
    --neutral-400: #9A9992;
    --neutral-500: #72716B;
    --neutral-900: #171716;
    --red-50: #FCECEB;
    --red-500: #C9302C;
    --red-700: #8F1F1C;

    --brand-primary: var(--orange-500);
    --text-muted: var(--neutral-500);
    --border-subtle: var(--neutral-100);
    --border-default: var(--neutral-200);
    --surface-card: var(--neutral-0);

    --shadow-lg: 0 18px 40px -12px rgba(23,23,22,.16), 0 4px 10px rgba(23,23,22,.05);
    --shadow-brand: 0 10px 24px -8px rgba(245,127,36,.45);
    --focus-ring: 0 0 0 3px rgba(245,127,36,.30);
    --overlay-scrim: rgba(23,23,22,.48);
    --ease-out: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #777;
    background-image: url('../images/mt65-neu-01-klein.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Source Sans 3', Arial, sans-serif;
    color: var(--neutral-900);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--neutral-900); text-decoration: underline; }
a:hover { color: var(--orange-700); }

.pw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px;
}
.pw-brand { display: inline-flex; }
.pw-brand img { height: 52px; width: auto; display: block; }
@media (max-width: 480px) { .pw-brand img { height: 40px; } }
.pw-accent { color: var(--brand-primary); }

.pw-link-btn {
    padding: 0;
    font: inherit;
    color: var(--neutral-900);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}
.pw-link-btn:hover { color: var(--orange-700); }
.pw-link-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.pw-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 6vh, 64px) 16px;
}

.pw-card {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    padding: 40px;
}
@media (max-width: 480px) { .pw-card { padding: 28px 20px; } }


.pw-intro { display: flex; flex-direction: column; gap: 8px; }
.pw-intro h1 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}
.pw-intro p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.pw-intro strong { color: var(--neutral-900); font-weight: 600; }

.pw-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

.pw-field { display: flex; flex-direction: column; gap: 6px; }
.pw-field label { font-family: Manrope, sans-serif; font-weight: 800; font-size: 14px; }
.pw-input-wrap { display: flex; }
.pw-input-wrap input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: 17px;
    color: var(--neutral-900);
    background: var(--neutral-0);
    border: 1.5px solid var(--border-default);
    border-radius: 8px;
    outline: none;
    transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.pw-input-wrap input::placeholder { color: var(--neutral-400); }
.pw-input-wrap input:focus { border-color: var(--orange-500); box-shadow: var(--focus-ring); }

.pw-alert {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--red-50);
    color: var(--red-700);
    font-size: 15px;
    line-height: 1.5;
}

.pw-btn {
    margin-top: 8px;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--neutral-0);
    background: var(--orange-600);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.pw-btn:hover { background: var(--mykal-orange-hover); color: var(--neutral-0); box-shadow: var(--shadow-brand); }
.pw-btn:active { transform: translateY(1px) scale(.985); }
.pw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pw-btn[disabled] { opacity: .7; cursor: progress; }

.pw-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    font-size: 15px;
}
.pw-card-foot span { color: var(--text-muted); }


/* Hilfe-Overlay */
.pw-dialog {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    background: var(--surface-card);
    color: var(--neutral-900);
    box-shadow: var(--shadow-lg);
}
.pw-dialog[open] { display: flex; flex-direction: column; gap: 20px; animation: pw-dialog-in 200ms var(--ease-out); }
.pw-dialog::backdrop { background: var(--overlay-scrim); }
.pw-dialog .pw-btn { margin-top: 0; }
.pw-dialog-mail { font-weight: 600; color: var(--neutral-900); user-select: all; white-space: nowrap; }
@keyframes pw-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .pw-dialog { padding: 24px 20px; } }

/* Niedrige Fenster (Zoom, große Schrift, Querformat): Karte kompakter, damit der Footer sichtbar bleibt */
@media (max-height: 920px) {
    .pw-header { padding-top: 6px; padding-bottom: 6px; }
    .pw-brand img { height: 44px; }
    .pw-card { gap: 18px; padding: 28px 32px; }
    .pw-intro h1 { font-size: 26px; }
    .pw-intro p { font-size: 16px; line-height: 1.5; }
    .pw-form { gap: 12px; }
    .pw-card-foot { padding-top: 14px; }
    .pw-footer { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}