Collapse verification resend form

src/main/resources/static/css/auth.css

@@ -21,6 +21,8 @@
 .form-box .inner { width:100%; max-width:320px; }
 .form-box.login  { left:0; z-index:2; }
 .form-box.signup { left:0; opacity:0; z-index:1; }
+.form-box.signup { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
+.form-box.signup .inner { margin:auto; }
 
 .auth-container.active .form-box.login  { transform:translateX(100%); opacity:0; z-index:1; }
 .auth-container.active .form-box.signup { transform:translateX(100%); opacity:1; z-index:5; }
@@ -128,6 +130,19 @@
 .mobile-switch { display:none; text-align:center; margin-top:1.2rem; color:var(--muted); font-size:.84rem; }
 .mobile-switch a { color:var(--accent); font-weight:700; text-decoration:none; cursor:pointer; }
 
+/* Bestätigungs-E-Mail: Das Eingabefeld bleibt platzsparend eingeklappt. */
+.auth-resend { margin-top:1rem; }
+.auth-resend-toggle {
+    appearance:none; border:0; padding:0; background:none; color:var(--accent);
+    font:700 .82rem/1.4 inherit; cursor:pointer; text-decoration:underline;
+    text-underline-offset:.22rem;
+}
+.auth-resend-toggle:hover { color:var(--heading); }
+.auth-resend-toggle:focus-visible { outline:2px solid var(--accent-2); outline-offset:4px; border-radius:3px; }
+.auth-resend form { margin-top:.7rem; }
+.auth-resend-fields { display:flex; gap:.5rem; align-items:center; margin-top:.35rem; }
+.auth-resend-fields .mf-btn { flex:0 0 auto; }
+
 /* ---- Responsiv: gestapelt, ohne Overlay ---- */
 @media (max-width:760px) {
     .auth-container { max-width:420px; min-height:auto; }
@@ -140,4 +155,6 @@
     .auth-container.active .form-box.login  { display:none; }
     .auth-container.active .form-box.signup { display:flex; }
     .mobile-switch { display:block; }
+    .form-box.signup { overflow:visible; }
+    .auth-resend-fields { align-items:stretch; flex-direction:column; }
 }

src/main/resources/templates/index.html

@@ -92,13 +92,19 @@
             <button class="neon-btn" type="submit">Account erstellen</button>
           </form>
 
-          <form th:action="@{/verification/resend}" method="post" style="margin-top:1rem">
+          <div class="auth-resend">
-            <label class="mf-label" for="resend-email">Bestätigungslink erneut senden</label>
+            <button id="resend-toggle" class="auth-resend-toggle" type="button"
-            <div style="display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.35rem">
+                    aria-expanded="false" aria-controls="resend-form">
-              <input id="resend-email" class="mf-input" type="email" name="email" placeholder="E-Mail-Adresse" required>
+              Bestätigungslink erneut senden
-              <button class="mf-btn outline" type="submit">Link senden</button>
+            </button>
-            </div>
+            <form id="resend-form" th:action="@{/verification/resend}" method="post" hidden>
-          </form>
+              <label class="mf-label" for="resend-email">E-Mail-Adresse</label>
+              <div class="auth-resend-fields">
+                <input id="resend-email" class="mf-input" type="email" name="email" placeholder="E-Mail-Adresse" required autocomplete="email">
+                <button class="mf-btn outline" type="submit">Link senden</button>
+              </div>
+            </form>
+          </div>
 
           <p class="mobile-switch">Schon dabei? <a data-goto="login">Zum Login</a></p>
         </div>
@@ -146,6 +152,17 @@
     if (toSignup) toSignup.addEventListener('click', function () { c.classList.add('active'); });
     if (toLogin)  toLogin.addEventListener('click',  function () { c.classList.remove('active'); });
 
+    var resendToggle = document.getElementById('resend-toggle');
+    var resendForm = document.getElementById('resend-form');
+    if (resendToggle && resendForm) {
+      resendToggle.addEventListener('click', function () {
+        var expand = resendForm.hidden;
+        resendForm.hidden = !expand;
+        resendToggle.setAttribute('aria-expanded', String(expand));
+        if (expand) resendForm.querySelector('input').focus();
+      });
+    }
+
     document.querySelectorAll('[data-goto="signup"]').forEach(function (el) {
       el.addEventListener('click', function (e) { e.preventDefault(); c.classList.add('active'); });
     });