/* Anmeldeseite im Stil der Website masslos.me (Papier, Nebel, Didot, Grün) */
@font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gfs-didot-latin.woff2) format('woff2'); }
.login {
  --l-paper: #ECE3D3; --l-card: #F5EEE2; --l-white: #FBF7EF; --l-ink: #1A1C22; --l-muted: #56524A; --l-line: #CFC2AC;
  --l-green: #24493F; --l-green-d: #173129; --l-brass: #8A6A2E;
  --l-serif: 'GFS Didot', 'Didot', 'Bodoni 72', Georgia, serif;
  grid-template-columns: 1.1fr 1fr; background: var(--l-paper); color: var(--l-ink); font-family: var(--l-serif);
}
.login .login-brand {
  background: radial-gradient(120% 90% at 50% 30%, #E6E7E9 0%, #CFD1D5 55%, #B9BCC1 100%); color: var(--l-ink);
  padding: 36px clamp(24px, 4vw, 56px); isolation: isolate;
}
.login .login-brand::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 30% at 30% 62%, rgba(240,240,242,.75), transparent 70%), radial-gradient(55% 28% at 75% 70%, rgba(240,240,242,.6), transparent 70%); }
.login-logo img { height: 64px; width: auto; display: block; }
.login .login-claim { position: relative; z-index: 1; }
.login-eyebrow { font-size: 12.5px !important; letter-spacing: .26em; text-transform: uppercase; color: #4A4D54 !important; margin: 0 0 18px !important; }
.login .login-claim h1 { font-family: var(--l-serif); font-weight: 400; letter-spacing: -.01em; line-height: .98; font-size: clamp(44px, 5vw, 78px); color: var(--l-ink); }
.login .login-claim h1 em { font-style: italic; color: #3B3E44; }
.login .login-claim p:last-child { color: #2D3036; font-size: 18px; max-width: 420px; }
.login-photo { position: absolute; left: 50%; bottom: 0; width: 125%; max-width: none; transform: translateX(-50%); z-index: -2;
  filter: grayscale(1) contrast(1.05); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
.login .login-brand small { color: rgba(245,245,247,.85); letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.login .login-waves { display: none; }

.login .login-main { background: var(--l-paper); }
.login .login-card { max-width: 400px; background: var(--l-card); border: 1px solid var(--l-line); padding: 36px 32px; gap: 16px; }
.login .login-card h2 { font-family: var(--l-serif); font-weight: 400; font-size: 40px; letter-spacing: -.01em; }
.login .muted, .login .login-alt { color: var(--l-muted); font-family: var(--l-serif); font-size: 15.5px; }
.login .field > span { font-family: var(--l-serif); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--l-muted); }
.login input { font-family: var(--l-serif); font-size: 16px; background: var(--l-white); border: 1px solid var(--l-line); border-radius: 2px; color: var(--l-ink); }
.login input:focus { border-color: var(--l-green); box-shadow: 0 0 0 3px rgba(36,73,63,.15); outline: none; }
.login .pw { border-radius: 2px; }
.login .btn { font-family: var(--l-serif); border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; font-size: 14px; }
.login .btn-primary { background: var(--l-green); border-color: var(--l-green); color: #F5EEE2; }
.login .btn-primary:hover:not(:disabled) { background: var(--l-green-d); border-color: var(--l-green-d); }
.login .btn-ghost { background: transparent; border: 1px solid var(--l-ink); color: var(--l-ink); }
.login .link { color: var(--l-green); font-family: var(--l-serif); }
.login .login-forgot .link { color: var(--l-muted); font-size: 14px; }
.login .login-alt .link.strong { color: var(--l-brass); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.login .alert { border-radius: 2px; font-family: var(--l-serif); }
.login .login-sent-ic { background: var(--l-white); color: var(--l-green); border: 1px solid var(--l-line); }
.login .check { font-family: var(--l-serif); color: var(--l-muted); }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login .login-brand { min-height: 360px; padding: 24px 20px 70px; gap: 22px; }
  .login-logo img { height: 48px; }
  .login .login-claim h1 { font-size: 40px; }
  .login .login-claim p:last-child { font-size: 16px; }
  .login-photo { width: 150%; bottom: -18%; opacity: .55; }
  .login .login-brand small { display: none; }
  .login .login-main { padding: 0 0 32px; }
  .login .login-card { border-left: 0; border-right: 0; padding: 28px 20px; max-width: none; }
}

/* Aufbau: Vollbild-Bühne wie auf der Website, Karte mittig (kein Halb-halb) */
.login { display: block; position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; grid-template-columns: none; }
.login .login-brand { position: absolute; inset: 0; padding: 0; display: block; z-index: 0; }
.login .login-logo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 2; }
.login .login-logo img { height: 60px; }
.login .login-claim { display: none; }
.login .login-brand small { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; z-index: 2; }
.login .login-photo { width: min(1500px, 125%); bottom: -4%; opacity: .95; }
.login .login-main { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; background: transparent; padding: 120px 16px 64px; display: grid; place-items: center; }
.login .login-card { background: rgba(245, 238, 226, .93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 30px 70px rgba(20, 22, 28, .22); max-width: 420px; }
.login .login-card::before { content: 'Kundenkonto · Memberbereich'; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--l-muted); }
@media (max-width: 900px) {
  .login .login-brand { min-height: 0; padding: 0; }
  .login .login-logo { top: 18px; }
  .login .login-logo img { height: 46px; }
  .login .login-photo { width: 170%; bottom: 0; opacity: .8; }
  .login .login-brand small { display: none; }
  .login .login-main { padding: 92px 14px 40px; }
  .login .login-card { border: 1px solid var(--l-line); padding: 28px 22px; }
}