body {
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    background-color: #FFF0F5; /* Zartes Pink */
    text-align: center;
    padding: 20px;
    color: #333;
}

.card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 400px;
    margin: 50px auto;
    border: 5px solid #FF69B4; /* Hot Pink Rand */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

h1 { color: #FF1493; margin-top: 0; }
p { font-size: 18px; color: #666; }

/* Eingabefelder */
input, select {
    display: block;
    width: 90%;
    padding: 12px;
    margin: 10px auto;
    font-size: 16px;
    border-radius: 10px;
    border: 2px solid #ccc;
    font-family: inherit;
}

/* Buttons */
button {
    font-size: 18px;
    padding: 12px 25px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 50px;
    border: none;
    font-weight: bold;
    transition: transform 0.2s;
    width: 100%;
}
button:active { transform: scale(0.95); }

#btn-login { background-color: #32CD32; color: white; } /* Grün */
#btn-register { background-color: #FFD700; color: #333; margin-top: 10px; } /* Gold */

.error { color: red; font-size: 14px; margin-top: 10px; font-weight: bold; }
.info-text { font-size: 14px; color: #888; margin-top: 20px; text-align: left; padding-left: 15px; }

/* RESPONSIVE FÜR HANDY */
@media (max-width: 600px) {
    .card {
        width: 90%; /* Karte fast so breit wie Bildschirm */
        padding: 20px; /* Weniger Polsterung */
        margin: 20px auto; /* Weniger Abstand oben */
        border-width: 3px;
    }

    h1 {
        font-size: 24px; /* Überschrift kleiner */
    }

    input, select, button {
        font-size: 16px; /* Gute Lesbarkeit */
        padding: 10px;
    }
}