body {
    background-color: #6F505D;
    margin-bottom: 2em;
    color: white;
}

.btn[name='back'] {
    margin-right: 1em;
}

.modal-dialog {
    max-width: 50%;
}

.text-darksalmon {
    color: darksalmon;
}

.logo {
    max-width: 500px;
    width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
}

@media (max-width: 768px) {
    .logo {
        max-width: 90%;
    }
}

.form-control {
    border-radius: 0;
    border: 1px solid #ced4da;
    padding: 0.75rem;
}
.btn-primary {
    background-color: #467886;
    border-color: #467886;
    border-radius: 0;
    padding: 0.75rem 2rem;
}
.btn-primary:hover {
    background-color: #385e69;
    border-color: #385e69;
}
h1, h4 {
    color: #BFEFFF;
}
.container {
    max-width: 800px;
    background: #6F505D;
    padding: 2rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}
.alert {
    width: 50%;              /* Breite auf 50% setzen */
    margin: 2rem auto;       /* Abstand oben und unten auf 2rem erhöht */
    border-radius: 15px;     /* Abgerundete Ecken */
    padding: 15px 25px;      /* Innenabstand */
    text-align: center;      /* Text zentrieren */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leichter Schatten */
    position: relative;      /* Relative Positionierung */
    top: 2rem;              /* Zusätzlicher Abstand von oben */
}


.alert-danger {
    background-color: #fff0f0;   /* Hellerer Hintergrund */
    border: 2px solid #dc3545;   /* Dunklerer Rand */
    color: #dc3545;              /* Textfarbe */
}

.alert-success {
    background-color: #f0fff0;   /* Hellerer Hintergrund */
    border: 2px solid #28a745;   /* Dunklerer Rand */
    color: #28a745;              /* Textfarbe */
}

/* Responsive Design für mobile Geräte */
@media (max-width: 768px) {
    .alert {
        width: 80%;              /* Breiter auf kleinen Bildschirmen */
    }
}