/* Clubfans Reunited – Passwort neu setzen
   Bewusst karg: eine einfarbige rote Flaeche, zwei Felder, ein Knopf.
   Kein Hero, kein Foto, kein Fussbereich – wer hier ist, hat genau eine
   Aufgabe und soll nicht abgelenkt werden. */

body {
    /* einfarbig, ohne die diagonale Struktur der uebrigen Seiten */
    background: var(--rot);
    color: var(--weiss);
    /* anmeldung.css stellt den Body auf Spalte, damit der Footer unten
       klebt. Hier gibt es keinen – stattdessen mittig ausrichten. */
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.seite-psw main {
    width: 100%;
    max-width: 26rem;
    /* anmeldung.css setzt hier grosszuegige Innenabstaende fuer lange
       Seiten – die braucht diese kurze nicht. */
    padding: 0;
    flex: none;
}

.seite-psw h1 {
    margin: 0 0 1.75rem;
    text-align: center;
    font-family: var(--schrift-schlag);
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--weiss);
}

.seite-psw label {
    color: var(--weiss);
}

.seite-psw input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    /* dunkel gefuellt, damit die Felder sich vom Rot abheben */
    background: rgba(0, 0, 0, 0.28);
    color: var(--weiss);
    font-size: 1.05rem;
}

.seite-psw input:focus {
    outline: none;
    border-color: var(--weiss);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* Stimmen die beiden Felder nicht ueberein, faerbt das Skript sie ein.
   Die Klasse sitzt am Feld, nicht an der Meldung – so sieht man sofort,
   worum es geht. */
.seite-psw input.stimmt-nicht {
    border-color: #ffb3c1;
    background: rgba(0, 0, 0, 0.4);
}

/* ---- Auge zum Sichtbarmachen ------------------------------------------- */
/* Die Huelle traegt die Positionierung, damit der Knopf im Feld sitzt und
   nicht daneben. */

.psw-huelle {
    position: relative;
}

/* Platz rechts, damit lange Passwoerter nicht unter das Auge laufen. */
.psw-huelle input {
    padding-right: 3rem;
}

.seite-psw .auge {
    position: absolute;
    top: 0;
    right: 0;
    /* volle Feldhoehe: ein grosszuegiges Ziel, gerade auf dem Handy */
    height: 100%;
    width: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;

    /* anmeldung.css gibt jedem Knopf Flaeche und Farbe – hier soll nur das
       Zeichen zu sehen sein. */
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.15s;
}

.seite-psw .auge:hover { color: var(--weiss); background: none; }

.seite-psw .auge:focus-visible {
    outline: none;
    color: var(--weiss);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.seite-psw .auge svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Welches der beiden Zeichen zu sehen ist, entscheidet die Klasse am Knopf.
   Nicht ueber das Attribut "hidden": das gibt es nur bei HTML-Elementen,
   bei SVG bliebe es wirkungslos. */
.seite-psw .auge .auge-zu           { display: none; }
.seite-psw .auge.sichtbar .auge-auf { display: none; }
.seite-psw .auge.sichtbar .auge-zu  { display: block; }

.psw-hinweis {
    margin: -0.6rem 0 1.4rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.seite-psw button:not(.auge) {
    width: 100%;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: var(--radius);
    /* Weiss auf Rot – der staerkste verfuegbare Kontrast */
    background: var(--weiss);
    color: var(--rot-tief);
    font-family: var(--schrift-akzent);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.06s;
}

.seite-psw button:not(.auge):hover:not(:disabled),
.seite-psw button:not(.auge):focus-visible {
    background: var(--schwarz);
    color: var(--weiss);
}

.seite-psw button:not(.auge):active:not(:disabled) { transform: translateY(1px); }

.seite-psw button:not(.auge):disabled { opacity: 0.6; cursor: default; }

/* Meldungen: dunkel gefuellt statt der hellen Kaesten aus anmeldung.css,
   die auf dem roten Grund verschwinden wuerden. */
.seite-psw .meldung {
    margin: 1.2rem 0 0;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.seite-psw .meldung.fehler  { border-color: rgba(255, 179, 193, 0.7); color: #ffd9e0; }
.seite-psw .meldung.erfolg  { border-color: rgba(180, 240, 200, 0.7); color: #d6f5e2; }

.psw-zurueck {
    margin: 1.6rem 0 0;
    text-align: center;
    font-size: 0.92rem;
}

.psw-zurueck a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.psw-zurueck a:hover,
.psw-zurueck a:focus-visible { color: var(--weiss); }