/* Grunddesign & Schriften */
:root {
    --bg-color: white;
    --card-bg: white;
    --accent-color: #e67e22; 
    --accent-hover: #e66e22;
    --text-main: black;
    --text-muted: grey;
    --border-color: darkgrey;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Hier wird das Hintergrundbild definiert */
    background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url('images/Griffith-Cut.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.navbar {
    padding: 20px 40px;
    background-color: rgba(20, 33, 45, 0.5);
    backdrop-filter: blur(10px);
}

.nav-back {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-back:hover {
    color: var(--text-main);
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 800px; /* Leicht erhöht für bessere Tabellen-Lesbarkeit */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.brand-header {
    text-align: center;
    margin-bottom: 35px;
}

.brand-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.brand-header h1 {
    margin: 0 0 10px 0;
    font-size: 2rem;
    letter-spacing: 1px;
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.vin-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.input-wrapper input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
}

.btn-submit {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-submit:hover {
    background-color: var(--accent-hover);
}

.btn-submit:active {
    transform: scale(0.98);
}

.extra-links {
    margin-top: 25px;
    text-align: center;
}

.link-gear {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.link-gear:hover {
    color: var(--accent-color);
}

/* Neue Styles für die Skript-Ausgabe */
.result-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.result-list p {
    margin: 0;
    padding: 10px 15px;
    background-color: rgba(11, 19, 26, 0.4);
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-main);
}

.result-list b, .result-list strong {
    color: #fff;
}

.explanation-box {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.explanation-box h3 {
    color: var(--text-main);
    margin-bottom: 15px;
}

.explanation-box p {
    margin-bottom: 15px;
}

.info-footer {
    max-width: 800px;
    margin-top: 30px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

.info-footer a {
    color: var(--accent-color);
    text-decoration: none;
}

.info-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .card {
        padding: 25px;
    }
    .navbar {
        padding: 15px 20px;
    }
}
?? Wichtigste Fehlerbehebungen im Skript:Kein Seiten-Crash: location.reload() und document.write wurden entfernt. Die Seite bleibt bestehen, das Ergebnis ploppt geschmeidig unten auf.Absturzschutz (Undefiniert-Fehler): Falls ein Nutzer eine ungültige VIN eingibt, deren Zeichen nicht im Array existieren (z. B. Modell "XX"), fängt das Skript das jetzt ab (indexOf == -1), statt mit einem Fehler komplett abzustürzen.Sicherheits-Umlaute: Die alten HTML-Entities (wie Ä) wurden direkt in lesbare Zeichen übersetzt, da modernes HTML5 das nativ ohne Codierung unterstützt.Wenn du möchtest, kann ich dir als Nächstes zeigen, wie wir eine Fehlermeldung direkt im Formular einblenden, anstatt das klassische Browser-alert()-Fenster zu nutzen. Wäre das für dich interessant?KI-Antworten können Fehler enthalten. Weitere Informationen