/* ==========================================================================
   Registrieren (/registrieren) – zentrierte Konto-Karte.
   Nutzt das gemeinsame Seiten-Designsystem (pages.css): phero, pcard, pform,
   pfield, pcontrol. Hier nur die schmale, zentrierte Spalte + Feinheiten.
   ========================================================================== */
.pcontainer.reg-wrap { max-width: 33rem; }

.reg-card { display: grid; gap: 1.15rem; }

.reg-intro {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.reg-form { display: grid; gap: 1rem; margin-top: .2rem; }

.pfield__hint {
    display: block;
    margin-top: .4rem;
    color: var(--text-muted);
    font-size: .82rem;
}

.reg-submit { width: 100%; justify-content: center; margin-top: .3rem; }
/* „Passwort vergessen?" – dezenter, rechtsbündiger Link unter dem Passwortfeld. */
.reg-forgot { margin: -.35rem 0 .1rem; text-align: right; }
.reg-forgot a { color: var(--gold); font-weight: 600; font-size: .9rem; text-decoration: none; }
.reg-forgot a:hover { text-decoration: underline; }

.reg-alt {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: .95rem;
}
.reg-alt a { color: var(--gold); font-weight: 600; text-decoration: none; }
.reg-alt a:hover { text-decoration: underline; }

/* Mobil: etwas weniger Innenabstand, Felder gestapelt (prow--2 bricht über
   pages.css bereits um). */
@media (max-width: 560px) {
    .reg-card { gap: 1rem; }
}

/* Google-Login: Schaltfläche + „oder"-Trenner ----------------------------
   Nach Google-Markenrichtlinie: feste weiße Fläche (funktioniert auf jedem
   Hintergrund, auch der dunklen Karte), dunkle Schrift #1f1f1f, neutraler
   grauer Rahmen #dadce0, heller Hover-State #f7f8f8 – KEINE Markenfarbe auf
   der Fläche, Logo unverändert. Feste Farben (nicht Theme-Token), damit der
   4-farbige „G" immer korrekten Kontrast hat und die Schrift nie – wie zuvor
   über .btn:hover – auf Weiß umschlägt. */
.btn--google {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%;
    min-height: 44px;
    padding: .7rem 1rem;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: .98rem;
    text-decoration: none;
    transition: background var(--transition, .15s ease), border-color var(--transition, .15s ease);
}
.btn--google:hover {
    background: #f7f8f8;
    border-color: #d2d5da;
    color: #1f1f1f;                       /* verhindert weißen Text aus .btn:hover */
}
.btn--google:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.btn--google__logo { display: inline-flex; }
.btn--google__logo svg { display: block; }

.reg-or {
    position: relative; text-align: center; margin: .3rem 0;
    color: var(--text-muted); font-size: .85rem;
}
.reg-or::before, .reg-or::after {
    content: ""; position: absolute; top: 50%; width: calc(50% - 1.6rem); height: 1px;
    background: var(--color-divider);
}
.reg-or::before { left: 0; }
.reg-or::after { right: 0; }
.reg-or span { background: transparent; padding: 0 .2rem; }