/* ============================================================================
   MYSTERADO – auth.css
   Stylesheet für Anmeldung/Registrierung (login.php) + Link-Landeseite
   (verify.php). Nutzt die Farb-/Font-Variablen aus landing.css (:root) mit
   Fallbacks und ändert generals.css NICHT.
   ============================================================================ */

/* Attribut hidden muss IMMER verstecken – auch gegen .ms-auth-field{display:flex} */
[hidden]{ display:none !important; }

/* ── Seitengerüst: Kopf-Schriftzug · Karte · Footer ganz unten ─────────── */
.ms-auth-page{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
.ms-auth-wrap{
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2.4rem,7vh,5rem) 1.1rem 3rem;
    box-sizing:border-box;
}

/* Mysterado-Schriftzug ÜBER der Karte */
.ms-auth-brand{
    display:block;
    width:100%;
    margin:0;
    line-height:0;
    text-align:center;
}
.ms-auth-brand img{
    width:100%;
    height:auto;
    max-width:25rem;
    margin:0 auto;
    display:block;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}

/* ── Karte ─────────────────────────────────────────────────────────────── */
.ms-auth-card{
    position:relative;
    width:100%;
    max-width:440px;
    background:linear-gradient(180deg, rgba(22,22,34,.94) 0%, rgba(11,11,20,.97) 100%);
    border:1px solid var(--ms-border-gold,rgba(212,173,69,.35));
    border-radius:18px;
    padding:1rem 1.75rem 0.5rem;
    box-shadow:var(--ms-shadow-lg,0 12px 48px rgba(0,0,0,.7)),
               inset 0 1px 0 rgba(255,255,255,.05);
    text-align:center;
}

/* Signatur: Medaillon mit Mysterado-Icon am Kopf der Karte */
.ms-auth-crest{
    display:flex;
    align-items:center;
    justify-content:center;
    width:7.5rem; height:7.5rem;
    margin:0 auto 1rem;
    border-radius:50%;
    overflow:hidden;
    color:var(--ms-gold-light,#f0d27b);
    font-size:1.7rem;
    text-decoration:none;
    background:#000;
    border:1px solid var(--ms-border-gold,rgba(212,173,69,.45));
    box-shadow:0 0 26px rgba(212,173,69,.28);
    animation:ms-auth-seal 5.5s ease-in-out infinite;
}
.ms-auth-crest video{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
}
@keyframes ms-auth-seal{
    0%,100%{box-shadow:0 0 18px rgba(212,173,69,.22)}
    50%    {box-shadow:0 0 32px rgba(212,173,69,.42)}
}

.ms-icon{width:1.25em;height:1.25em;vertical-align:middle}
.ms-auth-mailicon{display:flex;justify-content:center;margin:0 auto 1.15rem}
.ms-auth-mailicon svg{width:3.6rem;height:3.6rem}

/* ── Überschriften & Fließtext (auf Lesbarkeit getrimmt) ───────────────── */
.ms-auth-title{
    font-family:var(--ms-font-heading,'Cinzel',serif);
    font-weight:700;
    font-size:1.6rem;
    line-height:1.15;
    margin:0 0 .4rem;
    background:linear-gradient(180deg,var(--ms-gold-light,#f0d27b),var(--ms-gold,#d4ad45));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.ms-auth-sub{
    color:var(--ms-text,#ececf4);
    font-family:'Spectral',Georgia,serif;
    font-size:1.02rem;
    font-weight:400;
    line-height:1.45;
    margin:0 0 1.6rem;
}
.ms-auth-text{
    color:var(--ms-text,#ececf4);
    font-family:'Spectral',Georgia,serif;
    font-size:1.02rem;
    line-height:1.55;
    margin:0 0 1.4rem;
}

/* ── Umschalter Anmelden / Registrieren ────────────────────────────────── */
.ms-auth-tabs{
    display:flex;
    gap:.3rem;
    background:rgba(0,0,0,.4);
    border:1px solid var(--ms-border,rgba(212,173,69,.2));
    border-radius:999px;
    padding:.28rem;
    margin:0 0 1.5rem;
}
.ms-auth-tab{
    flex:1;
    border:0;
    background:transparent;
    color:var(--ms-text-soft,#c2c2d0);
    font-family:var(--ms-font-heading,'Cinzel',serif);
    font-size:.76rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:.66rem .4rem;
    border-radius:999px;
    cursor:pointer;
    transition:color .2s ease, background .2s ease;
}
.ms-auth-tab:hover{ color:var(--ms-text,#ececf4); }
.ms-auth-tab.is-active{
    color:#171008;
    background:linear-gradient(180deg,var(--ms-gold-light,#f0d27b),var(--ms-gold,#d4ad45));
    font-weight:700;
}

/* ── Anbieter-Buttons ──────────────────────────────────────────────────── */
.ms-auth-providers{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.15rem}
.ms-auth-provider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    width:100%;
    padding:.82rem 1rem;
    border-radius:11px;
    font-family:var(--ms-font-heading,'Cinzel',serif);
    font-size:.84rem;
    letter-spacing:.03em;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.ms-auth-provider:hover{transform:translateY(-1px)}
.ms-auth-provider svg{width:18px;height:18px;display:block;flex:none}
.ms-auth-provider-apple{background:#f5f5f7;color:#0a0a0a;border-color:#f5f5f7}
.ms-auth-provider-google{background:#ffffff;color:#1f2328;border-color:#ffffff}

/* ── Trenner ───────────────────────────────────────────────────────────── */
.ms-auth-divider{
    display:flex;
    align-items:center;
    gap:.8rem;
    color:var(--ms-text-soft,#a6a6b6);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin:1.15rem 0;
}
.ms-auth-divider::before,
.ms-auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ms-border,rgba(212,173,69,.28)),transparent);
}

/* ── Formularfelder ────────────────────────────────────────────────────── */
.ms-auth-form{display:flex;flex-direction:column;gap:.9rem;text-align:left}
.ms-auth-field{display:flex;flex-direction:column;gap:.35rem}
.ms-auth-field label{
    font-family:var(--ms-font-heading,'Cinzel',serif);
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ms-gold,#d4ad45);
}
.ms-auth-field input[type="text"],
.ms-auth-field input[type="email"],
.ms-auth-field input[type="password"]{
    width:100%;
    box-sizing:border-box;
    background:rgba(0,0,0,.42);
    border:1px solid var(--ms-border,rgba(212,173,69,.24));
    border-radius:10px;
    padding:.8rem .95rem;
    color:var(--ms-text,#f2f2f8);
    font-family:'Spectral',Georgia,serif;
    font-size:1.02rem;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.ms-auth-field input::placeholder{color:#7f7f8e}
.ms-auth-field input:focus{
    outline:none;
    border-color:var(--ms-border-gold,rgba(212,173,69,.65));
    box-shadow:0 0 0 3px rgba(212,173,69,.16);
}

/* ── Datumswähler: drei dunkle Dropdowns (Tag/Monat/Jahr) ──────────────── */
.ms-auth-date{display:flex;gap:.5rem}
.ms-auth-date select{
    flex:1;
    min-width:0;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:rgba(0,0,0,.42);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23d4ad45' d='M2 4l4 4 4-4z'/></svg>");
    background-repeat:no-repeat;
    background-position:right .6rem center;
    background-size:.72rem;
    border:1px solid var(--ms-border,rgba(212,173,69,.24));
    border-radius:10px;
    padding:.8rem 1.7rem .8rem .8rem;
    color:var(--ms-text,#f2f2f8);
    font-family:'Spectral',Georgia,serif;
    font-size:1rem;
    color-scheme:dark;
    cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.ms-auth-date select.ms-date-month{flex:1.5}
.ms-auth-date select:focus{
    outline:none;
    border-color:var(--ms-border-gold,rgba(212,173,69,.65));
    box-shadow:0 0 0 3px rgba(212,173,69,.16);
}
.ms-auth-date select:invalid,
.ms-auth-date select option[value=""]{color:#7f7f8e}
.ms-auth-date select option{background:#000;color:#f2f2f8}
.ms-auth-date select option:checked{background:#1a1408;color:#f0d27b}

/* Zustimmung */
.ms-auth-check{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    color:var(--ms-text,#e6e6f0);
    font-family:'Spectral',Georgia,serif;
    font-size:.98rem;
    line-height:1.45;
    text-align:left;
    margin-top:.2rem;
}
.ms-auth-check input{margin-top:.28rem;accent-color:var(--ms-gold,#d4ad45);width:17px;height:17px;flex:none}
.ms-auth-check a{color:var(--ms-gold-light,#f0d27b)}

.ms-auth-form .ms-btn{width:100%;margin-top:.4rem;justify-content:center}

.ms-auth-hint{
    color:var(--ms-text-soft,#b6b6c6);
    font-family:'Spectral',Georgia,serif;
    font-size:.95rem;
    line-height:1.45;
    margin:.9rem 0 0;
}
.ms-auth-switchline{
    color:var(--ms-text-soft,#b6b6c6);
    font-size:.98rem;
    margin-top:1.25rem;
    font-family:'Spectral',Georgia,serif;
}
.ms-auth-switchline button{
    background:none;border:0;cursor:pointer;
    color:var(--ms-gold-light,#f0d27b);
    font-family:inherit;font-size:inherit;text-decoration:underline;
}

/* ── Meldungen ─────────────────────────────────────────────────────────── */
.ms-auth-msg{
    display:none;
    margin:0 0 1.15rem;
    padding:.75rem .95rem;
    border-radius:10px;
    font-family:'Spectral',Georgia,serif;
    font-size:1rem;
    line-height:1.45;
    text-align:left;
}
.ms-auth-msg.is-show{display:block}
.ms-auth-msg-error{background:rgba(204,51,51,.14);border:1px solid rgba(204,51,51,.45);color:#f4c4c4}
.ms-auth-msg-ok{background:rgba(45,138,78,.14);border:1px solid rgba(45,138,78,.45);color:#c6ead2}

/* Schritt-Umschaltung (nutzt Klassen statt hidden-Attribut) */
.ms-auth-step{display:none}
.ms-auth-step.is-active{display:block}

/* Statusseite (verify.php) */
.ms-auth-status .ms-auth-text{text-align:center}
.ms-auth-status .ms-btn{margin-top:.4rem}

/* ── Responsiv ─────────────────────────────────────────────────────────── */
@media (max-width:480px){
    .ms-auth-card{padding:1rem 1.1rem 0.5rem;border-radius:14px}
    .ms-auth-title{font-size:1.4rem}
    .ms-auth-brand img{height:auto;width:auto;max-width:12rem}
    .ms-auth-date{gap:.4rem}
    .ms-auth-date select{padding:.72rem 1.5rem .72rem .6rem;font-size:.95rem}
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
    .ms-auth-crest{animation:none}
    .ms-auth-provider:hover{transform:none}
}


/* ── Passwortfeld mit Augen-Toggle ─────────────────────────────────────── */
.ms-pw-wrap{ position:relative; }
.ms-pw-wrap input{ padding-right:3rem; }
.ms-pw-toggle{
    position:absolute; top:0; right:0; height:100%; width:2.9rem;
    display:flex; align-items:center; justify-content:center;
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--ms-gold,#d4ad45); transition:color .2s ease;
}
.ms-pw-toggle:hover{ color:var(--ms-gold-light,#f0d27b); }
.ms-pw-toggle svg{ width:1.35rem; height:1.35rem; display:block; }

/* ── Passwort-Stärke (vier Balken) ─────────────────────────────────────── */
.ms-pw-meter{ display:flex; gap:.34rem; margin-top:.5rem; }
.ms-pw-meter span{
    flex:1; height:4px; border-radius:2px;
    background:rgba(255,255,255,.1); transition:background .2s ease;
}
.ms-pw-meter[data-score="1"] span:nth-child(-n+1){ background:#cc5b3f; }
.ms-pw-meter[data-score="2"] span:nth-child(-n+2){ background:#d99a3b; }
.ms-pw-meter[data-score="3"] span:nth-child(-n+3){ background:#c8b850; }
.ms-pw-meter[data-score="4"] span:nth-child(-n+4){ background:#5bb67a; }
.ms-pw-hint{
    color:var(--ms-text-soft,#b6b6c6);
    font-family:'Spectral',Georgia,serif;
    font-size:.9rem; margin:.5rem 0 0;
}

/* ── „Angemeldet bleiben" + „Passwort vergessen?" ──────────────────────── */
.ms-auth-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:.8rem; flex-wrap:wrap; margin-top:.1rem;
}
.ms-auth-remember{
    display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
    color:var(--ms-text,#e6e6f0);
    font-family:'Spectral',Georgia,serif; font-size:.96rem;
}
.ms-auth-remember input{
    accent-color:var(--ms-gold,#d4ad45);
    width:16px; height:16px; flex:none; cursor:pointer;
}
.ms-auth-link{
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--ms-gold-light,#f0d27b);
    font-family:'Spectral',Georgia,serif; font-size:.96rem;
    text-decoration:underline;
}
.ms-auth-link:hover{ color:var(--ms-gold,#d4ad45); }