/* --- Card / Layout --- */
.cfl-wrap { z-index: 1000; display:flex; align-items:center; justify-content:center; min-height: 100svh; padding: 24px; }
.cfl { 
  width: 100%; max-width: 520px;
  padding: 36px 28px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Headline / Copy --- */
.cfl-title { margin: 0 0 6px; font-size: 28px; font-weight: 650; letter-spacing: .2px; }
.cfl-subtitle { margin: 0 0 24px; opacity: .85; font-size: 16px; font-weight: 100 }

/* --- Felder --- */
.cfl-field { position: relative; margin-bottom: 16px; }
.cfl-field input {
  width: 100%; height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: #fff; font-size: 1rem;
  padding: 0 44px 0 14px;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .06s;
}
.cfl-field input::placeholder { color: rgba(255,255,255,.60); }
.cfl-field input:focus {
  outline: none;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}

/* Passwort anzeigen/ausblenden */
.cfl-pass .cfl-eye{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}
.cfl-pass .cfl-eye:hover{ background: rgba(255,255,255,0.12); }
.cfl-pass .cfl-eye:focus-visible{ outline: 3px solid rgba(255,255,255,.25); }
.cfl-pass .cfl-eye::before{ content: "👁︎"; font-size: 18px; line-height: 1; }
.cfl-pass .cfl-eye.on::before{ content: "🙈"; }

/* Remember + Links */
.cfl-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 4px; }
.cfl-check{ display:flex; align-items:center; gap: 10px; font-size:.95rem; opacity:.95; }
.cfl-check input{ width: 18px; height: 18px; accent-color: #fff; }

/* Button */
.cfl-btn{
  margin: 20px 0 0 0;
  padding: 15px 50px 15px 20px;
  border: none; border-radius: 14px; cursor: pointer;
  background: #071c39;
  color: #FFF; font-weight: 700; letter-spacing:.2px;
  transition: all 0.3s ease-in-out;
  position: relative;
}

/* Pfeil als maskiertes SVG, färbt sich mit currentColor */
.cfl-btn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 1.5em;
  height: 1.5em;
  transform: translateY(-50%) translateX(-4px);
  opacity: .9;
  background: currentColor;
  /* Mask (für Safari + Chrome) */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24"><path d="M4 12h12m0 0-5-5m5 5-5 5" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24"><path d="M4 12h12m0 0-5-5m5 5-5 5" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hover/Focus: Pfeil gleitet nach rechts und wird minimal heller */
.cfl-btn:hover::after,
.cfl-btn:focus-visible::after{
  transform: translateY(-50%) translateX(4px) scale(1.25);
  opacity: 1;
}

/* Active: kurzer “Tap”-Effekt */
.cfl-btn:active{ transform: translateY(0); }
.cfl-btn:active::after{ transform: translateY(-50%) translateX(2px); }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .cfl-btn::after{ transform: translateY(-50%); }
  .cfl-btn:hover::after,
  .cfl-btn:focus-visible::after{ transform: translateY(-50%); }
}


/* Fehlerbox */
.cfl-error{
  background: rgba(255, 59, 48, .14);
  border: 1px solid rgba(255, 59, 48, .45);
  color: #fff;
  padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem;
}

/* Mobile Feinschliff */
@media (max-width: 420px){
  .cfl{ padding: 28px 20px; }
  .cfl-title{ font-size: 1.6rem; }
}