/* Entfernt das Standard-Logo über dem Login-Formular */
body.login div#login h1 a {
    display: none;
}

/* Heller Grauton als Hintergrund statt Hintergrundbild */
body.login {
    background-color: #f5f5f5; /* Sehr heller Grauton */
}

/* Formular Styling mit blauem Rahmen und runden Ecken */
body.login form {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 26px 24px 34px;
    font-weight: 400;
    background: #fff;
    outline: 5px solid #00a3dd; /* Blauer Rahmen */
    border: 3px solid #424242;
    border-radius: 10%;         /* Runde Ecken */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.80); /* Schatten */
    box-sizing: border-box;
}

/* Styling für die Domain-Anzeige über dem Login-Formular */
#custom-domain h2 {
    margin-top: 40px;
    color: #00a3dd;         /* Blaue Farbe */
    font-size: 2.5rem;      /* Schriftgröße in rem für flexibles Layout */
    text-align: center;
}

/* Telefon-Button Styling */
body.login #phone-contact {
    display: block;
    text-align: center;
    margin-top: 40px; /* Genügend Abstand zum Formular */
}

/* Telefon-Button */
body.login #phone-contact a {
    color: white;
    background-color: orange;
    padding: 10px 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;       /* Schriftgröße in rem für Flexibilität */
}

/* Verstecke Links 'Zurück zur Website' und die Navigation */
.login #backtoblog a,
.login #nav a {
    visibility: hidden;
}

/* Verstecke die Sprachumschaltung */
.language-switcher {
    visibility: hidden;
}

/* Sicherstellen, dass der Button und das Formular auch auf kleineren Bildschirmen gut aussehen */
@media (max-width: 600px) {
    body.login form {
        max-width: 90%;    /* Vergrößert die Breite auf kleineren Bildschirmen */
    }

    #custom-domain h2 {
        font-size: 1.2rem; /* Kleinere Schriftgröße für mobile Geräte */
    }

    body.login #phone-contact a {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}