 /* Zusätzliche Styles für Nachrichten im Login-Formular */
   .messages { margin-bottom: 20px; margin-top: -10px; }
   .message { padding: 10px 15px; border-radius: 4px; border: 1px solid transparent; text-align: center; font-size: 0.95em; opacity: 1; transition: opacity 0.5s ease-out; }
   .message.success { background-color: rgba(46, 204, 113, 0.15); color: #b2f0d0; border-color: #2ecc71; }
   .message.error { background-color: rgba(231, 76, 60, 0.15); color: #f5b7b1; border-color: #e74c3c; }
   /* Style für Captcha Container */
   .captcha-container { display: flex; justify-content: center; margin-bottom: 20px; margin-top: 5px; transform: scale(0.95); transform-origin: center;}
   .g-recaptcha>div{ margin: auto; } /* Zentriert das eigentliche Widget */
    /* Visuell verstecken für Screenreader */
   .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

   /* --- START: Styles für Passwort-Toggle --- */
   /* Container für das Passwortfeld + Icon */
   .password-container {
    position: relative; /* Ermöglicht absolute Positionierung des Icons */
   }
   /* Anpassung des Input-Feldes, um Platz für das Icon zu schaffen */
   .password-container input#password { /* Spezifischer Selektor */
    padding-right: 45px; /* Platz rechts für das Icon, Wert ggf. anpassen */
    box-sizing: border-box; /* Stellt sicher, dass Padding die Gesamtbreite nicht beeinflusst */
    width: 100%; /* Stelle sicher, dass das Feld weiterhin volle Breite hat */
   }
   /* Styling und Positionierung des Icons */
   .password-toggle-icon {
    position: absolute;
    top: 50%; /* Vertikal zentrieren */
    right: 15px; /* Abstand vom rechten Rand, Wert ggf. anpassen */
    transform: translateY(-50%); /* Feinanpassung der vertikalen Zentrierung */
    cursor: pointer;
    color: #ccc; /* Farbe des Icons, an Design anpassen */
    font-size: 1.2em; /* Größe des Icons, anpassen */
    z-index: 2; /* Stellt sicher, dass das Icon über dem Input liegt (falls nötig) */
   }
   .password-toggle-icon:hover {
    color: #fff; /* Farbe beim Hovern */
   }
   /* --- END: Styles für Passwort-Toggle --- */

.contact-button {
      background-color: #1abc9c;
      border: none;
      padding: 20px;
      border-radius: 8px;
      color: #2c3e50;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      min-height: 60px;
      width: 100%;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

:root {
            --bg-color: #2c3e50;
            --form-bg: #34495e;
            --input-bg: #2b3e50; /* Etwas dunklerer Input-Hintergrund */
            --primary-color: #1abc9c;
            --primary-hover: #16a085;
            --text-color: #ecf0f1; /* Etwas weicher als reines Weiß */
            --text-secondary: #bdc3c7; /* Sekundäre Textfarbe (grau) */
            --error-color: #e74c3c;
            --success-color: #2ecc71;
            --border-color: #4a6078; /* Hellerer Rand */
            --border-focus: var(--primary-color);
            --border-radius: 6px; /* Etwas kleinerer Radius */
            --link-color: var(--primary-color);
            --link-hover: #ffffff;
            --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        *, *::before, *::after { box-sizing: border-box; }

        .container {
            width: 100%;
            max-width: 40vw;
            margin-left: 30vw;
        } /* Etwas breiter */
        



@media (max-width: 1000px) {
    .container {

        min-width: 90vw;
        margin-left: 5vw;
    }
    
    .titleOfSite {
        max-width: 900px;
    }
}



        
        .login-box {
            background: var(--form-bg);
            padding: 40px; /* Mehr Innenabstand */
            border-radius: var(--border-radius);
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            text-align: center;
            border-top: 4px solid var(--primary-color); /* Akzent oben */
        }
        .login-box h2 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 35px; /* Mehr Abstand */
            font-size: 2em; /* Größer */
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        /* Formular Layout */
        .login-box form { display: flex; flex-direction: column; gap: 18px; } /* Etwas mehr Abstand */

        /* Input Felder */
        .input-group { position: relative; } /* Für eventuelle Icons */
        .login-box input[type="text"],
        .login-box input[type="password"] {
            width: 100%;
            padding: 14px 18px; /* Mehr Padding */
            font-size: 1em;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            background-color: var(--input-bg);
            color: var(--text-color);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .login-box input[type="text"]:focus,
        .login-box input[type="password"]:focus {
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.3); /* Weicherer Fokus-Glow */
        }
        /* Placeholder Styling */
        .login-box input::placeholder {
            color: var(--text-secondary);
            opacity: 0.8;
        }
         /* Visuell verstecktes Label für Barrierefreiheit */
         .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0;
            margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
            white-space: nowrap; border-width: 0;
        }

        /* Button Style */
        .button {
            padding: 14px 25px;
            font-size: 1.05em; /* Etwas größer */
            border-radius: var(--border-radius);
            border: none;
            cursor: pointer;
            background: var(--primary-color);
            color: white;
            font-weight: 600; /* Etwas fetter */
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background-color .2s ease, transform 0.1s ease, box-shadow 0.2s ease;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
            margin-top: 15px; /* Mehr Abstand nach oben */
        }
        .button:hover { background: var(--primary-hover); box-shadow: 0 4px 8px rgba(0,0,0,0.3); transform: translateY(-2px); }
        .button:active { transform: translateY(0px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

        /* Links unter dem Formular */
        .login-links { margin-top: 30px; font-size: 0.9em; } /* Mehr Abstand, kleinere Schrift */
        .login-links p { margin: 12px 0; color: var(--text-secondary); }
        .login-links a {
            color: var(--link-color);
            text-decoration: none;
            font-weight: 500; /* Nicht mehr fett */
            transition: color 0.2s ease;
        }
        .login-links a:hover { color: var(--link-hover); text-decoration: underline; }

        /* Meldungen */
        .messages { margin-top: 25px; margin-bottom: -10px; /* Näher an Formular */ min-height: 2.2em; }
        .message {
            padding: 10px 15px; margin-bottom: 15px; border-radius: var(--border-radius);
            font-weight: 500; border: 1px solid transparent; font-size: 0.95em;
            animation: fadeIn 0.4s ease-out;
        }
        .message.success { background-color: var(--success-color); color: white; border-color: rgba(255,255,255,0.2); }
        .message.error { background-color: var(--error-color); color: white; border-color: rgba(255,255,255,0.2); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 480px) {
            .login-box { padding: 30px 25px; }
            .login-box h2 { font-size: 1.8em; margin-bottom: 30px;}
        }