:root {
  --bg: #faf8f5; --bg-alt: #f3efe9; --text: #3d3630; --text-light: #6b6158;
  --accent: #8fa584; --accent-light: #c4d4bc; --accent-dark: #6b8560; --rose: #c9a4a0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-alt); -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Outfit', 'Segoe UI', sans-serif; color: var(--text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.login {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background:
    radial-gradient(60rem 40rem at 15% 0%, rgba(196, 212, 188, 0.45), transparent 60%),
    radial-gradient(50rem 36rem at 100% 100%, rgba(232, 213, 210, 0.55), transparent 60%),
    var(--bg-alt);
}
.login-card {
  width: 100%; max-width: 420px; text-align: center; background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(143, 165, 132, 0.25); border-radius: 24px;
  padding: 2.5rem 1.75rem 2rem; box-shadow: 0 16px 48px rgba(61, 54, 48, 0.1);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.login-symbol { margin: 0 auto 0.9rem; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(181, 90, 74, 0.2)); }
.login-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-dark); }
.login-names { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.15; margin: 0.35rem 0 0; }
.login-names span { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--accent); }
.login-divider { display: flex; align-items: center; gap: 0.8rem; justify-content: center; margin: 1.1rem 0; color: var(--rose); font-size: 0.9rem; }
.login-divider::before, .login-divider::after { content: ''; width: 48px; height: 1px; background: var(--accent-light); }
.login-text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--text-light); line-height: 1.5; }

.login-form { margin-top: 1.6rem; }
.login-field { position: relative; }
.login-field input {
  width: 100%; height: 52px; padding: 0 3.2rem 0 1.25rem; font: inherit; font-size: 1rem; /* 16px: kein iOS-Zoom */
  color: var(--text); background: #fff; border: 1.5px solid var(--accent-light); border-radius: 50px;
  outline: none; text-align: center; transition: border-color 0.2s, box-shadow 0.2s;
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(143, 165, 132, 0.18); }
.login-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 44px; height: 44px;
  background: none; border: none; border-radius: 50%; cursor: pointer; font-size: 1.1rem; opacity: 0.55;
}
.login-toggle.on, .login-toggle:hover { opacity: 1; }
.login-toggle:focus-visible, .login-submit:focus-visible { outline: 3px solid rgba(143, 165, 132, 0.5); outline-offset: 2px; }
.login-error {
  margin-top: 0.9rem; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.9rem;
  color: #8b4c47; background: #fef2f2; border: 1px solid #e8d5d2; animation: shake 0.4s;
}
.login-submit {
  width: 100%; height: 52px; margin-top: 1rem; font: inherit; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: #fff; border: none; border-radius: 50px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); transition: transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) { .login-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107, 133, 96, 0.35); } }
.login-submit:active { transform: scale(0.98); }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }