body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-container {
    position: relative;
    width: 700px;  /* an dein Bild anpassen */
    height: 600px; /* an dein Bild anpassen */
    margin: 0 auto;
    background: url('assets/login004.jpg') no-repeat top center;
    background-size: contain; /* Bild proportional skalieren */
}

.login-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Eingabefelder genau über die Stellen im Bild legen */
.login-form input[name="username"] {
    position: absolute;
    top: 243px;   /* anpassen */
    left: 210px;   /* anpassen */
    width: 230px; /* anpassen */
    height: 22px;
    background: transparent;
    border: none;
    border-bottom: 0px solid #ccc; /* optional Linie */
    font-size: 16px;
    color: #000;
}

.login-form input[name="password"] {
    position: absolute;
    top: 368px;   /* anpassen */
    left: 215px;
    width: 220px; /* anpassen */
    height: 22px;
    background: transparent;
    border: none;
    border-bottom: 0px solid #ccc;
    font-size: 16px;
    color: #000;
}

.login-form button {
    position: absolute;
    top: 435px;   /* anpassen */
    left: 205px;
    width: 240px; /* anpassen */
    height: 45px; /* anpassen */
    background: transparent;
    border: none;
    cursor: pointer;
}

.error {
    position: absolute;
    top: 480px;   /* über den Eingabefeldern */
    left: 0;
    width: 100%;
    text-align: center;
    color: red;
}