:root{--bg-color:#2c3e50;--form-bg:#34495e;--input-bg:#2b3e50;--primary-color:#1abc9c;--primary-hover:#16a085;--text-color:#ecf0f1;--text-secondary:#bdc3c7;--error-color:#e74c3c;--error-bg:rgba(231,76,60,0.15);--error-border:#c0392b;--success-color:#2ecc71;--border-color:#4a6078;--border-focus:var(--primary-color);--border-radius:6px;--link-color:var(--primary-color);--link-hover:#fff;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--color-valid:var(--success-color);--color-invalid:var(--error-color);--text-color-light: #d5dbdb;} /* text-color-light hinzugefügt */
   *,*::before,*::after{box-sizing:border-box;}
   body{background:var(--bg-color);color:var(--text-color);font-family:var(--font-sans);font-size:15px;margin:0;display:flex;justify-content:center;min-height:100vh;}
   .container{width:100%;max-width:480px; margin: 0 auto 0 auto;}
   .register-box{background:var(--form-bg);padding:35px 40px 40px 40px;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);}
   .register-box h2{color:var(--primary-color);margin-top:0;margin-bottom:30px;font-size:1.8em;font-weight:600;letter-spacing:.5px;}
   .register-box form{display:flex;flex-direction:column;gap:18px;margin-bottom:25px;}
   .input-group{position:relative;}
   .register-box input[type="text"],.register-box input[type="password"],.register-box input[type="email"]{width:100%;padding:14px 18px;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 .2s ease,box-shadow .2s ease;}
   .register-box input[type="text"]:focus,.register-box input[type="password"]:focus,.register-box input[type="email"]:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(26,188,156,.3);}
   .register-box input::placeholder{color:var(--text-secondary);opacity:.8;}
   .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;}
   #password-rules { font-size: 0.85rem; color: var(--text-secondary); margin: -10px 0 10px 5px; padding-left: 0; list-style: none; text-align: left; }
   #password-rules li { margin-bottom: 4px; transition: color 0.3s ease; position: relative; padding-left: 22px; line-height: 1.3; }
   #password-rules li::before { content: '✕'; color: var(--color-invalid); position: absolute; left: 0; top: 1px; font-weight: bold; transition: content 0.3s ease, color 0.3s ease; }
   #password-rules li.valid { color: var(--text-color-light); } /* Helleres Grau für validierte Regeln */
   #password-rules li.valid::before { content: '✓'; color: var(--color-valid); }
   .button{padding:14px 25px;font-size:1.05em;border-radius:var(--border-radius);border:none;cursor:pointer;background:var(--primary-color);color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:background-color .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 3px 6px rgba(0,0,0,.2);margin-top:10px;}
   .button:hover{background:var(--primary-hover);box-shadow:0 4px 8px rgba(0,0,0,.3);transform:translateY(-2px);}
   .button:active{transform:translateY(0px);box-shadow:0 1px 3px rgba(0,0,0,.2);}
   .captcha-container{display:flex;justify-content:center;margin-bottom:18px;transform:scale(0.95);transform-origin:center;}
   .error-list{list-style:none;padding:12px 18px;margin:-10px 0 20px 0;background-color:var(--error-bg);border:1px solid var(--error-border);border-radius:var(--border-radius);text-align:left;animation:fadeIn .4s ease-out;}
   .error-list li{color:#fadfdd;font-size:.9em;margin-bottom:6px;padding-left:20px;position:relative;}
   .error-list li::before{content:'⚠️';position:absolute;left:0;top:0px;font-size:.85em;}
   .error-list li:last-child{margin-bottom:0;}
   .login-link{margin-top:20px;font-size:.95em;color:var(--text-secondary);}
   .login-link a{color:var(--link-color);text-decoration:none;font-weight:500;transition:color .2s ease;}
   .login-link a:hover{color:var(--link-hover);text-decoration:underline;}

   /* --- START: Styles für Passwort-Toggle (wie im Login) --- */
   .password-container {
    position: relative;
   }
   /* Zielgenauer auf das Passwort-Inputfeld in diesem Container */
   .password-container input#password {
    padding-right: 45px; /* Platz für Icon */
   }
   .password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-secondary); /* Farbe an Theme anpassen */
    font-size: 1.2em;
    z-index: 2;
   }
   .password-toggle-icon:hover {
    color: var(--text-color); /* Hover-Farbe an Theme anpassen */
   }
   /* --- END: Styles für Passwort-Toggle --- */

   @keyframes fadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
   @media (max-width:480px){.register-box{padding:30px 25px 30px 25px;}.register-box h2{font-size:1.6em;}.captcha-container{transform:scale(.9);}}