/* ==========================================================
   EVERYONE ASSEMBLE
   MEMBER REGISTRATION – ONBOARDING RECORD
   Keine Schrift kleiner als 12px
   ========================================================== */

.eareg-page{
    --eareg-bg:#020d18;
    --eareg-deep:#010914;
    --eareg-panel:#04192b;
    --eareg-panel-soft:#08243a;
    --eareg-panel-light:#0b3150;

    --eareg-line:#1d5f8f;
    --eareg-line-light:#287db2;
    --eareg-line-soft:rgba(29,95,143,.32);
    --eareg-line-faint:rgba(29,95,143,.16);

    --eareg-accent:#218bd0;
    --eareg-accent-dark:#1674b5;
    --eareg-accent-light:#75d0ff;

    --eareg-text:#e1f1fa;
    --eareg-text-soft:#c4d8e4;
    --eareg-muted:#8fa9bc;

    --eareg-success:#72c9a6;
    --eareg-warning:#e7b56f;
    --eareg-danger:#e66c79;

    width:100%;
    max-width:1180px;
    margin:25px auto;

    color:var(--eareg-text-soft);

    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1.65;
}

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

.eareg-page a{
    color:var(--eareg-accent-light);
    text-decoration:none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.eareg-page a:hover{
    color:var(--eareg-text);
}

.eareg-page .smalltext,
.eareg-page small{
    font-size:12px !important;
}

.eareg-page img{
    max-width:100%;
}

/* ==========================================================
   VERSTECKTE SPAMFELDER
   ========================================================== */

.eareg-honeypot{
    position:absolute !important;
    left:-10000px !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    opacity:0 !important;
    pointer-events:none !important;
}

/* ==========================================================
   HAUPTKARTE
   ========================================================== */

.eareg-card{
    position:relative;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(33,139,208,.13),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            rgba(4,25,43,.99),
            rgba(1,9,20,.99)
        );

    border:1px solid var(--eareg-line-soft);

    box-shadow:
        0 22px 48px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.025);

    overflow:hidden;
}

.eareg-card::before{
    content:"";

    position:absolute;
    z-index:5;
    top:0;
    left:0;

    width:90px;
    height:3px;

    background:var(--eareg-accent-light);

    box-shadow:
        90px 0 0 var(--eareg-accent),
        180px 0 0 rgba(33,139,208,.32);
}

/* ==========================================================
   SEITENKOPF
   ========================================================== */

.eareg-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px;

    min-height:90px;
    padding:20px 23px 18px;

    background:
        linear-gradient(
            90deg,
            rgba(8,43,69,.78),
            rgba(1,9,20,.89)
        );

    border-bottom:1px solid var(--eareg-line-soft);
}

.eareg-hero-main{
    display:flex;
    align-items:center;
    gap:15px;

    min-width:0;
}

.eareg-hero-code{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;

    width:53px;
    height:53px;

    color:var(--eareg-accent-light);

    background:
        linear-gradient(
            145deg,
            rgba(33,139,208,.17),
            rgba(1,9,20,.82)
        );

    border:1px solid var(--eareg-line);

    font-size:12px;
    font-weight:800;
    line-height:1;

    letter-spacing:.6px;

    clip-path:polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
}

.eareg-hero-copy{
    min-width:0;
}

.eareg-hero-label{
    display:block;

    margin-bottom:3px;

    color:var(--eareg-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.eareg-title{
    margin:0;

    color:var(--eareg-text);

    font-family:"Arial Narrow",Arial,sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.eareg-hero-status{
    display:inline-flex;
    align-items:center;
    gap:7px;

    min-height:36px;
    padding:7px 11px;

    color:var(--eareg-muted);
    background:rgba(1,9,20,.42);

    border:1px solid var(--eareg-line-soft);

    font-size:12px;
    font-weight:700;

    letter-spacing:.6px;
    text-transform:uppercase;
}

.eareg-hero-status::before{
    content:"";

    width:8px;
    height:8px;

    background:var(--eareg-success);

    border-radius:50%;

    box-shadow:0 0 8px rgba(114,201,166,.65);
}

/* ==========================================================
   ZWEISPALTIGES REGISTERFORMULAR
   ========================================================== */

.eareg-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    align-items:start;
    gap:17px;

    padding:18px;
}

.eareg-column{
    display:grid;
    gap:15px;

    min-width:0;
}

/* ==========================================================
   ABSCHNITTE
   ========================================================== */

.eareg-section{
    min-width:0;

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.52),
            rgba(1,9,20,.57)
        );

    border:1px solid rgba(29,95,143,.23);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.018);

    overflow:hidden;
}

.eareg-section-head{
    position:relative;

    padding:12px 14px 11px;

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.11),
            rgba(1,9,20,.2)
        );

    border-bottom:1px solid var(--eareg-line-faint);
}

.eareg-section-head::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:50px;
    height:2px;

    background:var(--eareg-accent-light);

    box-shadow:50px 0 0 rgba(33,139,208,.45);
}

.eareg-section-title{
    display:block;

    color:var(--eareg-accent-light);

    font-size:13px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.eareg-section-description{
    display:block;

    margin-top:3px;

    color:var(--eareg-muted);

    font-size:12px;
    line-height:1.5;
}

.eareg-section-body{
    padding:14px;
}

/* ==========================================================
   TABELLEN INNERHALB DER FELDER
   ========================================================== */

.eareg-table,
.eareg-section table{
    width:100%;

    margin:0;

    border:0;
    border-collapse:separate;
    border-spacing:0 9px;
}

.eareg-table td,
.eareg-section table td{
    color:var(--eareg-text-soft);

    font-size:12px;
    line-height:1.55;

    vertical-align:top;
}

.eareg-table tr:first-child td,
.eareg-section table tr:first-child td{
    padding-top:0;
}

.eareg-table tr:last-child td,
.eareg-section table tr:last-child td{
    padding-bottom:0;
}

/* ==========================================================
   FELDBESCHRIFTUNGEN
   ========================================================== */

.eareg-label,
.eareg-page label{
    color:var(--eareg-text-soft);

    font-size:12px;
    line-height:1.5;
}

.eareg-field-label{
    display:block;

    margin:0 0 6px;

    color:var(--eareg-accent-light);

    font-size:12px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.45px;
    text-transform:uppercase;
}

.eareg-field-description{
    display:block;

    margin:3px 0 7px;

    color:var(--eareg-muted);

    font-size:12px;
    line-height:1.55;
}

/* ==========================================================
   EINGABEFELDER
   ========================================================== */

.eareg-page input[type="text"],
.eareg-page input[type="password"],
.eareg-page input[type="email"],
.eareg-page input[type="number"],
.eareg-page input[type="date"],
.eareg-page select,
.eareg-page textarea{
    width:100%;
    max-width:none;

    margin:0;
    padding:9px 11px;

    color:var(--eareg-text);

    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.98),
            rgba(4,25,43,.94)
        );

    border:1px solid var(--eareg-line);
    border-bottom-color:var(--eareg-line-light);
    border-radius:0;
    outline:0;

    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1.55;

    box-shadow:
        inset 0 4px 12px rgba(0,0,0,.2),
        0 1px 0 rgba(255,255,255,.02);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.eareg-page input[type="text"],
.eareg-page input[type="password"],
.eareg-page input[type="email"],
.eareg-page input[type="number"],
.eareg-page input[type="date"],
.eareg-page select{
    min-height:40px;
}

.eareg-page input:focus,
.eareg-page select:focus,
.eareg-page textarea:focus{
    border-color:var(--eareg-accent-light);

    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.99),
            rgba(8,43,69,.94)
        );

    box-shadow:
        inset 0 4px 12px rgba(0,0,0,.18),
        0 0 0 3px rgba(117,208,255,.08);
}

.eareg-page input::placeholder,
.eareg-page textarea::placeholder{
    color:var(--eareg-muted);
    opacity:.68;
}

.eareg-page select{
    cursor:pointer;
}

.eareg-page select option{
    color:var(--eareg-text);
    background:var(--eareg-deep);
}

/* ==========================================================
   ZWEI FELDER NEBENEINANDER
   ========================================================== */

.eareg-pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.eareg-field{
    min-width:0;
}

/* ==========================================================
   CHECKBOX-OPTIONEN
   ========================================================== */

.eareg-options{
    display:grid;
    gap:8px;
}

.eareg-option{
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    align-items:start;
    gap:8px;

    min-height:38px;
    padding:8px 9px;

    color:var(--eareg-text-soft);

    background:rgba(1,9,20,.32);

    border:1px solid rgba(29,95,143,.15);

    cursor:pointer;

    font-size:12px;
    line-height:1.5;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.eareg-option:hover{
    color:var(--eareg-text);

    background:rgba(33,139,208,.075);
    border-color:rgba(117,208,255,.26);
}

.eareg-option input[type="checkbox"],
.eareg-option input[type="radio"],
.eareg-page input[type="checkbox"],
.eareg-page input[type="radio"]{
    flex-shrink:0;

    width:17px;
    height:17px;
    margin:1px 0 0;

    accent-color:var(--eareg-accent-light);
    cursor:pointer;
}

.eareg-option-copy{
    min-width:0;

    color:inherit;

    font-size:12px;
    line-height:1.5;
}

/* ==========================================================
   STATUSMELDUNGEN DER VALIDIERUNG
   ========================================================== */

#username_status,
#password_status,
#email_status,
#answer_status,
#imagestring_status{
    padding:7px 9px;

    color:var(--eareg-muted);

    background:rgba(1,9,20,.32);

    border:1px solid var(--eareg-line-faint);

    font-size:12px;
    line-height:1.5;
}

.eareg-page label.error,
.eareg-page .error,
.eareg-page .error_message{
    display:block;

    margin-top:5px;

    color:#ffbcc5;

    font-size:12px;
    line-height:1.5;
}

.eareg-page .red_alert,
.eareg-page .error{
    padding:10px 12px;

    background:
        linear-gradient(
            90deg,
            rgba(230,108,121,.14),
            rgba(1,9,20,.4)
        );

    border:1px solid rgba(230,108,121,.38);
    border-left:3px solid var(--eareg-danger);
}

/* ==========================================================
   CAPTCHA
   ========================================================== */

.eareg-captcha-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 230px;
    gap:14px;

    align-items:center;
}

.eareg-captcha-image{
    display:grid;
    justify-items:center;
    gap:8px;

    padding:12px;

    background:rgba(1,9,20,.36);

    border:1px solid var(--eareg-line-faint);

    text-align:center;
}

.eareg-captcha-image img{
    display:block;

    max-width:100%;
    height:auto;

    border:1px solid var(--eareg-line);
}

.eareg-captcha-note{
    color:var(--eareg-danger);

    font-size:12px;
    line-height:1.5;
}

/* ==========================================================
   SICHERHEITSFRAGE
   ========================================================== */

.eareg-question{
    margin-bottom:10px;
    padding:9px 11px;

    color:var(--eareg-text);

    background:rgba(33,139,208,.07);

    border:1px solid var(--eareg-line-faint);
    border-left:2px solid var(--eareg-accent);

    font-size:12px;
    font-weight:700;
    line-height:1.55;
}

.eareg-question-answer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
}

/* ==========================================================
   SELECT2
   ========================================================== */

.eareg-page .select2-container{
    width:100% !important;
}

.eareg-page .select2-container .select2-choice{
    min-height:40px;
    padding:7px 10px;

    color:var(--eareg-text);

    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.98),
            rgba(4,25,43,.94)
        );

    border:1px solid var(--eareg-line);
    border-radius:0;

    font-size:12px;
    line-height:24px;

    box-shadow:none;
}

.eareg-page .select2-container .select2-choice .select2-arrow{
    background:var(--eareg-panel);
    border-left:1px solid var(--eareg-line);
}

/* ==========================================================
   ABSENDEBEREICH
   ========================================================== */

.eareg-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    min-height:76px;
    padding:15px 18px;

    background:
        linear-gradient(
            90deg,
            rgba(8,43,69,.75),
            rgba(1,9,20,.95)
        );

    border-top:1px solid var(--eareg-line-soft);
}

.eareg-page .button,
.eareg-page button,
.eareg-page input[type="submit"],
.eareg-page input[type="button"],
.eareg-page input[type="reset"]{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:auto;
    min-height:40px;
    padding:8px 14px;

    color:var(--eareg-deep) !important;
    -webkit-text-fill-color:var(--eareg-deep) !important;

    background:
        linear-gradient(
            180deg,
            #9cddff,
            var(--eareg-accent-light)
        ) !important;

    border:1px solid var(--eareg-accent-light) !important;
    border-radius:0;

    outline:0;
    cursor:pointer;

    font-family:Arial,sans-serif;
    font-size:12px !important;
    font-weight:800;
    line-height:1.35;

    letter-spacing:.4px;
    text-align:center;
    text-transform:uppercase;

    clip-path:polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );
}

.eareg-page .button:hover,
.eareg-page button:hover,
.eareg-page input[type="submit"]:hover,
.eareg-page input[type="button"]:hover,
.eareg-page input[type="reset"]:hover{
    color:var(--eareg-accent-light) !important;
    -webkit-text-fill-color:var(--eareg-accent-light) !important;

    background:
        linear-gradient(
            180deg,
            var(--eareg-panel-light),
            var(--eareg-panel)
        ) !important;

    border-color:var(--eareg-accent) !important;
}

/* ==========================================================
   VEREINBARUNG
   ========================================================== */

.eareg-agreement{
    padding:19px;
}

.eareg-agreement-content{
    padding:18px 20px;

    color:var(--eareg-text-soft);

    background:rgba(1,9,20,.36);

    border:1px solid var(--eareg-line-faint);

    font-size:13px;
    line-height:1.8;
}

.eareg-agreement-content p{
    margin:0 0 15px;
}

.eareg-agreement-content p:last-child{
    margin-bottom:0;
}

.eareg-agreement-content strong{
    color:var(--eareg-text);
}

.eareg-coppa-notice{
    margin-bottom:14px;
    padding:15px;

    color:var(--eareg-text-soft);

    background:
        linear-gradient(
            90deg,
            rgba(231,181,111,.11),
            rgba(1,9,20,.36)
        );

    border:1px solid rgba(231,181,111,.32);
    border-left:3px solid var(--eareg-warning);

    font-size:12px;
    line-height:1.7;
}

/* ==========================================================
   COPPA-GEBURTSDATUM
   ========================================================== */

.eareg-coppa-body{
    padding:18px;
}

.eareg-coppa-description{
    margin-bottom:17px;

    color:var(--eareg-text-soft);

    font-size:13px;
    line-height:1.75;
}

.eareg-birthday{
    max-width:650px;
    margin:0 auto;

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.55),
            rgba(1,9,20,.58)
        );

    border:1px solid var(--eareg-line-soft);
}

.eareg-birthday-head{
    padding:12px 14px;

    color:var(--eareg-accent-light);

    background:rgba(33,139,208,.08);

    border-bottom:1px solid var(--eareg-line-faint);

    font-size:13px;
    font-weight:700;

    letter-spacing:.6px;
    text-transform:uppercase;
}

.eareg-birthday-body{
    padding:15px;
}

.eareg-birthday-grid{
    display:grid;
    grid-template-columns:120px minmax(180px,1fr) 130px;
    gap:11px;
}

.eareg-birthday-field{
    min-width:0;
}

.eareg-birthday-note{
    margin-top:12px;

    color:var(--eareg-muted);

    font-size:12px;
    line-height:1.55;
    text-align:center;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width:900px){

    .eareg-grid{
        grid-template-columns:1fr;
    }
}

@media screen and (max-width:650px){

    .eareg-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .eareg-pair,
    .eareg-captcha-grid,
    .eareg-question-answer{
        grid-template-columns:1fr;
    }

    .eareg-captcha-image{
        justify-self:start;
    }

    .eareg-birthday-grid{
        grid-template-columns:1fr;
    }
}

@media screen and (max-width:480px){

    .eareg-page{
        margin:15px auto;
    }

    .eareg-hero{
        padding:17px 14px 15px;
    }

    .eareg-hero-code{
        width:45px;
        height:45px;
    }

    .eareg-title{
        font-size:20px;
    }

    .eareg-grid,
    .eareg-agreement,
    .eareg-coppa-body{
        padding:11px;
    }

    .eareg-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .eareg-actions .button,
    .eareg-actions input[type="submit"],
    .eareg-actions input[type="button"]{
        width:100%;
    }
}