/* =====================================================================
   HEMDOMANIA — ANMELDESEITE   anmelden.css
   ---------------------------------------------------------------------
   Gehoert zur neuen index.php. Benutzt die Variablen aus
   hemdo-design.css. index-neu.css wird nicht mehr gebraucht und kann
   geloescht werden.
   ===================================================================== */

.an-body {
    margin: 0;
    min-height: 100dvh;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(252,110,81,.16), transparent 60%),
        var(--hm-bg);
    color: var(--hm-text);
}

.an-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--hm-space-6) var(--hm-space-4)
             calc(var(--hm-space-7) + env(safe-area-inset-bottom));
    display: grid;
    gap: var(--hm-space-6);
    align-items: center;
    min-height: 100dvh;
}

@media (min-width: 900px) {
    .an-wrap { grid-template-columns: 1.1fr .9fr; gap: var(--hm-space-8); }
}

/* ===== Linke Seite ================================================= */

.an-logo { height: 46px; width: auto; margin-bottom: var(--hm-space-5); }

.an-intro {
    margin: 0 0 var(--hm-space-4);
    color: var(--hm-text-dim);
    font-size: var(--hm-size-lg);
    line-height: var(--hm-leading);
}
.an-intro strong { color: var(--hm-orange); font-weight: var(--hm-weight-bold); }

.an-motto {
    margin: 0 0 var(--hm-space-5);
    font-size: var(--hm-size-lg);
    font-weight: var(--hm-weight-medium);
}

.an-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hm-space-2); }
.an-liste li {
    position: relative; padding-left: var(--hm-space-5);
    color: var(--hm-text-dim); font-size: var(--hm-size-sm);
}
.an-liste li::before {
    content: '👔'; position: absolute; left: 0; font-size: 14px;
}

@media (max-width: 899px) {
    .an-liste { display: none; }     /* auf dem Handy zaehlt die Anmeldung */
    .an-intro { font-size: var(--hm-size-base); }
    .an-logo  { height: 38px; }
}

/* ===== Karte ======================================================= */

.an-karte {
    background: var(--hm-bg-card);
    border: 1px solid var(--hm-border);
    border-radius: var(--hm-radius-lg);
    box-shadow: var(--hm-shadow-lg);
    padding: var(--hm-space-6) var(--hm-space-5);
    display: grid;
    gap: var(--hm-space-4);
    align-content: start;
}

.an-form { display: grid; gap: var(--hm-space-2); }
.an-form .hm-label { margin-top: var(--hm-space-2); }
.an-voll { width: 100%; margin-top: var(--hm-space-3); }

.an-merken {
    display: flex; align-items: center; gap: var(--hm-space-2);
    margin-top: var(--hm-space-3);
    color: var(--hm-text-dim); font-size: var(--hm-size-sm);
    cursor: pointer;
}
.an-merken input {
    width: 20px; height: 20px; accent-color: var(--hm-orange);
}

.an-fehler {
    margin: 0;
    padding: var(--hm-space-3) var(--hm-space-4);
    background: rgba(255, 90, 90, .12);
    border: 1px solid rgba(255, 90, 90, .4);
    border-radius: var(--hm-radius-sm);
    color: #ffb4b4;
    font-size: var(--hm-size-sm);
}

.an-trenner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--hm-space-3);
    color: var(--hm-text-faint); font-size: var(--hm-size-sm);
}
.an-trenner::before,
.an-trenner::after {
    content: ''; height: 1px; background: var(--hm-border);
}

.an-klein { font-size: var(--hm-size-sm); color: var(--hm-text-dim); margin: 0; }
.an-klein a { color: var(--hm-orange); }

.an-admin summary {
    cursor: pointer; color: var(--hm-text-faint);
    font-size: var(--hm-size-sm); padding: var(--hm-space-2) 0;
}
.an-admin[open] summary { color: var(--hm-text-dim); }

.an-fuss {
    margin: 0; padding-top: var(--hm-space-3);
    border-top: 1px solid var(--hm-border);
    font-size: var(--hm-size-xs); color: var(--hm-text-faint);
}
.an-fuss a { color: var(--hm-text-dim); }

/* ===== Wiedererkannt / Wartet ====================================== */

.an-bekannt { display: grid; gap: var(--hm-space-3); justify-items: start; }
.an-bild {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--hm-orange);
}
.an-bekannt span { color: var(--hm-orange); }

.an-warten { display: grid; gap: var(--hm-space-3); justify-items: start; }
.an-zeichen { font-size: 40px; }
.an-warten p { margin: 0; color: var(--hm-text-dim); font-size: var(--hm-size-sm); }