/* Anmeldung „Roland Püllen GmbH · Business Software“ (Karsten 12.10.2026: freundlicher, mit Marke).
   Gilt für alle Seiten mit _LayoutSchmal: Anmelden, Abmelden, Fehler, Kein Zugriff, Gerät wartet, Ersteinrichtung. */
body.anmeldung {
    min-height: 100vh;
    background:
        radial-gradient(1200px 520px at 50% -140px, rgba(200, 0, 26, .16), transparent 70%),
        linear-gradient(180deg, #FBFBFC 0%, #EEF0F2 100%);
    display: block; padding: 0;
}
.anm-buehne {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.anm-karte {
    width: 100%; max-width: 420px; background: #FFFFFF; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(28, 31, 36, .06), 0 18px 48px rgba(28, 31, 36, .12);
    padding: 30px 32px 26px; position: relative; overflow: hidden;
}
.anm-karte::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
    background: linear-gradient(90deg, var(--rot) 0%, #E8323F 60%, var(--text) 100%);
}
.anm-marke { text-align: center; margin: -6px 0 22px; }
/* app-512.png hat rundum weißen Rand – darum größer als das sichtbare Logo */
.anm-marke img { height: 128px; width: auto; display: inline-block; margin-bottom: -10px; }
.anm-programm {
    margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grau);
}
.anm-karte h1 { font-size: 22px; margin: 0 0 4px; text-align: center; }
.anm-karte .anm-gruss { text-align: center; color: var(--grau); margin: 0 0 22px; }
.anm-karte .feld { margin-bottom: 14px; }
.anm-karte label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.anm-karte input[type=text], .anm-karte input[type=password], .anm-karte input[type=email] {
    width: 100%; height: 48px; padding: 0 14px; font-size: 16px; color: var(--text);
    background: #F7F8F9; border: 1px solid var(--linie); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.anm-karte input:focus { outline: none; background: #FFFFFF; border-color: var(--rot); box-shadow: 0 0 0 4px rgba(200, 0, 26, .12); }
.anm-karte .knopf, .anm-karte button[type=submit] {
    width: 100%; height: 50px; margin-top: 6px; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.anm-karte .knopf.rot, .anm-karte button[type=submit] {
    background: var(--rot); color: #FFFFFF; box-shadow: 0 6px 16px rgba(200, 0, 26, .25); transition: background .15s, transform .05s;
}
.anm-karte .knopf.rot:hover, .anm-karte button[type=submit]:hover { background: var(--rot-dunkel); }
.anm-karte .knopf.rot:active, .anm-karte button[type=submit]:active { transform: translateY(1px); }
.anm-karte .fehler { border-radius: 10px; margin-bottom: 16px; }
.anm-karte .hinweis { border-radius: 10px; }
.anm-karte p.klein { text-align: center; color: var(--grau); }
.anm-fuss { margin-top: 18px; font-size: 12.5px; color: var(--grau); text-align: center; }

@media (max-width: 480px) {
    .anm-buehne { justify-content: flex-start; padding-top: max(36px, env(safe-area-inset-top)); }
    .anm-karte { padding: 26px 20px 22px; border-radius: 16px; }
    .anm-marke img { height: 112px; }
}