html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: linear-gradient(135deg, #e0f7fa, #fce4ec);
}

/* Navbar fixiert oben */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* über dem Content */
}

/* Container für die Card zentrieren */
.content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 80px; /* Platz für die Navbar */
    box-sizing: border-box;
}

.card {
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background-color: #fff;
    width: 100%;
    max-width: 600px;
    transition: transform 0.2s;
}
.card:hover { transform: translateY(-5px); }

.form-label { font-weight: 600; }

#filenamePreview {
    background-color: #f8f9fa;
    font-family: monospace;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
    padding: 0.5rem;
    border-radius: 0.25rem;
}
#filenamePreview.updated { background-color: #d1e7dd; }

.btn-success {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
    border: none;
    transition: background 0.3s;
}
.btn-success:hover { background: linear-gradient(90deg, #43a047, #57a05b); }

.text-muted {
    font-size: 0.9rem;
}
.text-muted a {
    color: #0d6efd;
}
.text-muted a:hover {
    text-decoration: underline;
}