/* Zugangs-Seite (E-Mail-Gate) */
.zbody { min-height: 100vh; display: flex; flex-direction: column; }
.zmain { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px 64px; }
.zcard { width: min(520px, 100%); display: grid; gap: 8px; }
.zcard h2 { margin-bottom: 8px; }
.zcard form { display: grid; gap: 16px; margin-top: 16px; }
.zcard .field input { width: 100%; font-size: 16px; }
.btn--breit { width: 100%; justify-content: center; }
.zcode { font-family: var(--font-heading); font-size: 28px !important; letter-spacing: 0.35em; text-align: center; }
.zrecht { margin-top: 16px; font-size: 12px; line-height: 1.5; }
.zlink { background: none; border: 0; padding: 0; color: var(--color-primary); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.zfehler { background: rgba(153, 37, 50, 0.12); color: var(--color-error); font-weight: 600; font-size: 14px; padding: 12px 16px; border-radius: var(--radius-small); }
.zdev { font-size: 13px; }

/* Fragen */
.zfelder { display: grid; gap: 12px; }

.zfrage { border: 0; padding: 0; margin: 0; }
.zfrage legend { font-weight: 600; font-family: var(--font-heading); font-size: 18px; letter-spacing: 0.02em; margin-bottom: 8px; }
.zoptionen { display: flex; gap: 8px; }
.zoptionen--wrap { flex-wrap: wrap; }
.zoption {
  display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--color-secondary); border-radius: var(--radius-small);
  padding: 10px 16px; cursor: pointer; font-size: 15px; transition: border var(--transition), background var(--transition);
}
.zoption:hover { border-color: var(--color-primary); }
.zoption:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-tint-hover); }
.zoption--breit { width: 100%; align-items: flex-start; line-height: 1.5; }
.zoption input { accent-color: var(--color-primary); margin-top: 2px; }

/* Begrüßung für bekannte Kunden */
.zgruss { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 24px 0; animation: zgruss-rein 500ms ease both; }
.zgruss__logo { animation: zgruss-logo 900ms ease both; }
.zbalken { width: min(280px, 100%); height: 6px; border-radius: var(--radius-full); background: var(--color-disabled-surface); overflow: hidden; }
.zbalken span { display: block; height: 100%; width: 0; background: var(--color-action); animation: zbalken 4000ms 400ms ease-in-out forwards; }
@keyframes zgruss-rein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes zgruss-logo { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes zbalken { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .zgruss, .zgruss__logo, .zbalken span { animation-duration: 1ms; } }