/*!
 * form.css v4.2.0 (https://michael-debler.de/media/css/form.css)
 * Copyright 2025 Michael Debler
 */

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0; /* Sehr helles Grau */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .form-container-l {
            background-color: #ffffff; /* Weißer Hintergrund für den Kasten */
            padding: 30px;
            border-radius: 15px; /* Abgerundete Ecken für den Kasten */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Etwas stärkerer Schatten */
            width: 100%;
            max-width: 400px; /* Maximale Breite des Kastens */
            box-sizing: border-box;
            text-align: center; /* Zentriert den Inhalt des Kastens */
        }

        .form-container-l h2 {
    font-family: 'Trebuchet MS', sans-serif;
            text-align: center;
            color: #333333; /* Dunkelgrauer Titel */
            margin-bottom: 25px;
        }

        .form-group-l {
            margin-bottom: 20px; /* Abstand zwischen den Formulargruppen */
        }

        .form-group-l label {
            display: block; /* Label über dem Feld platzieren */
            margin-bottom: 8px;
            color: #555555; /* Mittelgraues Label */
            font-weight: bold;
            text-align: left; /* Label linksbündig */
        }

        .form-group-l input[type="text"],
        .form-group-l input[type="email"],
        .form-group-l input[type="password"] {
            width: 100%;
            padding: 12px 15px; /* Polsterung innerhalb der Input-Felder */
            border: 1px solid #cccccc; /* Heller grauer Rand */
            border-radius: 8px; /* Abgerundete Ecken für die Input-Felder */
            box-sizing: border-box;
            font-size: 16px;
            color: #333333; /* Textfarbe im Feld */
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .form-group-l input::placeholder {
            color: #aaaaaa; /* Helleres Grau für Platzhalter */
        }

        .form-group-l input[type="text"]:focus,
        .form-group-l input[type="email"]:focus,
        .form-group-l input[type="password"]:focus {
            border-color: #666666; /* Dunklerer grauer Rand beim Fokus */
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.2); /* Grauer Schatten beim Fokus */
            background-color: #f9f9f9; /* Sehr leicht grauer Hintergrund beim Fokus */
        }

        .button-group-l {
            margin-top: 25px;
            display: flex;
            gap: 15px;
        }

        .form-container-l button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        .form-container-l button.primary {
            background-color: #333333; /* Dunkelgrauer Button */
            color: white;
            border: 1px solid #333333;
        }

        .form-container-l button.primary:hover {
            background-color: #000000; /* Schwarzer Button beim Hover */
            border-color: #000000;
        }

        .form-container-l button.secondary {
            background-color: #ffffff; /* Weißer Button */
            color: #555555; /* Grauer Text */
            border: 1px solid #cccccc; /* Heller grauer Rand */
        }

        .form-container-l button.secondary:hover {
            background-color: #f0f0f0; /* Heller grauer Hintergrund beim Hover */
            color: #333333; /* Dunklerer Text beim Hover */
            border-color: #999999;
        }

        .register-link {
            margin-top: 25px;
            font-size: 14px;
        }

.register-link a {
    color: var(--text-color-medium, #69C9D0); /* Standard-Linkfarbe: Dezentes Grau */
    text-decoration: none; /* Standardmäßig kein Unterstrich */
    position: relative; /* Für die Unterstrich-Animation */
    transition: color 0.3s ease; /* Übergang für Farbänderung */
}
/* Unterstrich-Animation beim Hover */
.register-link a::after { /* Korrigiert */
    content: '';
    position: absolute;
    width: 0%; /* Startbreite: 0 */
    height: 1px; /* Dicke des Unterstrichs */
    display: block;
    margin-top: 2px; /* Abstand zum Text */
    left: 0;
    bottom: -2px; /* Position des Unterstrichs unter dem Text */
    background: var(--primary-color, #333); /* Farbe des Unterstrichs, kann deine Primärfarbe sein */
    transition: width 0.3s ease; /* Animation der Breite */
}

.register-link a:hover { /* Korrigiert */
    color: var(--primary-color, #010101); /* Linkfarbe beim Hover: Deine Primärfarbe */
    text-decoration: none; /* Immer noch kein Standard-Unterstrich */
}

.register-link a:hover::after { /* Korrigiert */
    width: 100%; /* Breite beim Hover: 100% */
}