/* =====================================================================
   HEMDOMANIA — REGISTRIERUNG IM NEUEN AUSSEHEN   register-neu.css
   ---------------------------------------------------------------------
   Neue Datei. Wird NACH dem eingebauten <style> von register.php
   geladen.

   Der Trick: register.php arbeitet durchgehend mit CSS-Variablen
   (--bg, --text, --border und so weiter). Es genuegt also, diese
   Variablen umzudefinieren — das ganze Formular zieht mit, ohne dass
   eine einzige Regel angefasst werden muss.

   Darunter stehen nur die wenigen Stellen, an denen register.php feste
   Farben statt Variablen benutzt.

   Zurueck zum alten Aussehen: die <link>-Zeile in register.php
   entfernen. Sonst nichts.
   ===================================================================== */

:root {
    --orange:      #fc6e51;
    --orange-dark: #e05a3f;
    --bg:          #0a0a0a;
    --text:        #ffffff;
    --muted:       rgba(255, 255, 255, 0.62);
    --border:      rgba(255, 255, 255, 0.10);
    --input-bg:    #1a1a1a;
    --radius:      14px;
}

html, body {
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(252,110,81,.16), transparent 60%),
        var(--bg);
    color: var(--text);
}


/* ===== Flaechen mit fest eingetragenem Weiss ========================
   Diese vier Regeln in register.php benutzen background: #fff statt
   einer Variablen. Deshalb blieben sie weiss, waehrend der Rest schon
   dunkel war — daher das gefleckte Bild.
   =================================================================== */

.text-side,
.visual-side,
.pending-wrap {
    background: transparent;
}

.form-side {
    background: #141414;
    border-left: 1px solid var(--border);
}

.visual-inner,
.pending-card {
    background: #141414;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Der Google-Knopf war ebenfalls fest weiss */
.btn-oauth,
a.btn-oauth {
    background: #1a1a1a !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn-oauth:hover { background: #202020 !important; }

/* Fett gesetzte Stellen im Fliesstext standen auf #111 */
.tl-bold { color: var(--text); }

.video-frame {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}


/* ===== Felder ====================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 16px;                 /* verhindert das Hineinzoomen auf iOS */
    min-height: 48px;
}

input::placeholder,
textarea::placeholder { color: rgba(255, 255, 255, 0.38); }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--orange);
    background: #202020;
    outline: none;
}

label { color: var(--muted); }

input[type="checkbox"] {
    accent-color: var(--orange);
    width: 18px; height: 18px;
    min-height: 0;
}


/* ===== Knoepfe ===================================================== */

button[type="submit"],
.btn-oauth {
    min-height: 48px;
    border-radius: 999px;
    font-size: 16px;
    cursor: pointer;
}

button[type="submit"] {
    background: var(--orange);
    border: 0;
    color: #fff;
    box-shadow: 0 8px 28px rgba(252, 110, 81, 0.28);
}
button[type="submit"]:hover { background: #ff8a70; }

.btn-oauth {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text);
}
.btn-oauth:hover { background: #202020; }


/* ===== Hinweise ==================================================== */

.alert {
    border-radius: 10px;
}
.alert-error {
    background: rgba(255, 90, 90, 0.12);
    border: 1px solid rgba(255, 90, 90, 0.4);
    color: #ffb4b4;
}
.alert-success {
    background: rgba(62, 207, 142, 0.12);
    border: 1px solid rgba(62, 207, 142, 0.4);
    color: #b6f0d5;
}

.divider-line,
.oauth-sep { border-color: var(--border); color: rgba(255, 255, 255, 0.38); }

.reg-title { color: var(--text); }
.reg-sub,
.vt-intro,
.vt-list,
.oauth-terms,
.desktop-copy,
.mobile-copy { color: var(--muted); }

.tl-orange, .vt-dot { color: var(--orange); }

a { color: var(--orange); }

.pending-icon { font-size: 40px; }
.pulse { background: var(--orange); }


/* ===== Fußzeile ====================================================
   Die Regeln dafuer stehen in register.php in einem <style>-Block weit
   UNTEN im Dokument — also nach dieser Datei. Bei gleicher Gewichtung
   gewinnt das Spaetere. Deshalb hier mit dem Koerper davor, das wiegt
   schwerer und gewinnt unabhaengig von der Reihenfolge.
   =================================================================== */

body.hm-registrierung .hm-page-footer {
    background: #0a0a0a;
    border-top: 1px solid var(--border);
    color: rgba(255, 255, 255, 0.38);
}

body.hm-registrierung .hm-page-footer-links a {
    color: rgba(255, 255, 255, 0.62);
}
body.hm-registrierung .hm-page-footer-links a:hover {
    color: var(--orange);
}

body.hm-registrierung .lang-btn {
    background: #1a1a1a;
    border: 1px solid var(--border);
    color: rgba(255, 255, 255, 0.62);
}
body.hm-registrierung .lang-btn:hover {
    background: #202020;
    border-color: var(--orange);
    color: var(--orange);
}

body.hm-registrierung .hm-page-footer-copy {
    color: rgba(255, 255, 255, 0.38);
}

body.hm-registrierung .reg-footer {
    color: rgba(255, 255, 255, 0.38);
}