Moin,
und zwar hab ich folgendes Problem. Um mein Panel ist diese weiße Linie... ich kann mir nicht erklären von wo sie stammt... leider finde ich auch nichts wenn ich im Browser die Elemente durchsuche...
html
HTML
<html lang="de">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-4">
<div class="card">
<div class="card-header text-center">
<h3 class="mt-3"><b>Login</b></h3>
</div>
<div class="card-body">
<form>
<div class="form-outline mb-4">
<label class="form-label" for="email"><b><i class="fa-solid fa-envelope"></i> E-Mail Adresse</b></label>
<input type="email" id="email" name="email" class="form-control" v-model="email" v-bind:disabled="loginWait" />
</div>
<div class="form-outline mb-4">
<label class="form-label" for="password"><b><i class="fa-solid fa-lock"></i> Passwort</b></label>
<input type="password" id="password" name="password" class="form-control" v-model="password" v-bind:disabled="loginWait" />
</div>
</form>
<div v-if="showError" class="error">
<div class="card-text"><i class="fa-solid fa-triangle-exclamation"></i> <b><a>Login fehlgeschlagen!</a><br><a>Überprüfe deine Anmeldedaten.</a></b></div>
</div>
<button v-if="!loginWait" v-bind:disabled="!isLoginDisabled()" @click="submitLogin()" class="btn btn-danger w-100" type="button">Login</button>
<button v-if="loginWait" class="btn btn-danger w-100" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Bitte warten ...
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>css
CSS
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
body {
font-family: 'Lato', sans-serif !important;
background-image: url('background.jpg');
background-size: cover;
color: white;
}
.form-control:focus {
border-color: #e03535;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5), 0 0 8px #e03535;
}
button:hover {
background-color: #e03535;
}
i.fa-solid {
color: #e03535
}
.card .card-header {
background-color: #e03535;
border-color: #15181b !important;
}
.card .card-body {
background-color: #15181b;
}
.card-error {
background-color: #23282d;
}
button {
background-color: #e03535 !important;
}Hoffe mir kann geholfen werden 
Gruß Marschl 