*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Jost", sans-serif;
}


body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1e1f26;
  background-size: cover;
  backdrop-filter: blur(11px);
  background-position: center;
  -webkit-backdrop-filter: blur(11px)!important;
        
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
  }
  
  .shake {
    animation: shake 0.5s; /* Adjust the duration (0.5s) as needed */
    animation-iteration-count: 1;
  }
  

.wrapper{
  width: 420px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 12px;
  padding: 30px 40px;
}
.wrapper h1{
  font-size: 36px;
  text-align: center;
}
.wrapper .input-box{
  position: relative;
  width: 100%;
  height: 50px;
  
  margin: 30px 0;
}
.input-box input{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
  color: #fff;
}
.input-box i{
  position: absolute;
  right: 20px;
  top: 30%;
  transform: translate(-50%);
  font-size: 20px;

}
.wrapper .remember-forgot{
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0 15px;
}
.remember-forgot label input{
  accent-color: #fff;
  margin-right: 3px;
  

}
.remember-forgot a{
  color: #fff;
  text-decoration: none;

}
.remember-forgot a:hover{
  text-decoration: underline;
}

.remember-forgot label {
  user-select: none;

}
.wrapper .btn{
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.wrapper .register-link{
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0 15px;

}
.register-link p a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.register-link p a:hover{
  text-decoration: underline;
}

/* --- ATP7 Logo: kompakt über der Login-Box --- */
.wrapper {
  position: relative;         /* Referenz fürs schwebende Logo */
  padding-top: 90px;          /* extra Platz oben für das Logo */
}

/* --- ATP7 Logo: etwas größer & höher über der Login-Box --- */
#throne-logo {
  position: absolute;
  top: -200px;                 /* weiter nach oben */
  left: 50%;
  transform: translateX(-50%);
  width: 230px;               /* größer, aber noch elegant */
  height: auto;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.45));
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #throne-logo { width: 180px; top: -80px; }
}

@media (max-width: 420px) {
  #throne-logo { width: 120px; top: -70px; }
}

:root{
  --air-bg: #16181d;
  --air-card: rgba(28,31,38,.55);
  --air-stroke: rgba(255,255,255,.12);
  --air-primary: #8ec9ff;     /* Sky blue */
  --air-primary-2:#bfe0ff;    /* soft highlight */
  --air-accent:  #30e5ff;     /* cyan glow */
  --air-white: #f5f7ff;
}

/* Deep cockpit background + vignette + runway glow */
body{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(142,201,255,.12), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(48,229,255,.10), transparent 60%),
    var(--air-bg);
  color: var(--air-white);
  overflow: hidden; /* für Deko-Layer */
}

/* dezent bewegte Lichtreflexe */
body::before,
body::after{
  content:"";
  position: fixed; inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(1000px 200px at 50% -10%, rgba(48,229,255,.12), transparent 40%) no-repeat,
    radial-gradient(800px 180px at 50% 110%, rgba(142,201,255,.10), transparent 40%) no-repeat;
  animation: skyroll 16s ease-in-out infinite alternate;
  opacity:.7;
}
@keyframes skyroll{ 
  from{ transform: translateY(-2%) } 
  to{   transform: translateY(2%)  } 
}

/* Glass card + glow rim */
.wrapper{
  background: var(--air-card);
  border: 1px solid var(--air-stroke);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}

/* Lichtkante oben (dezent) */
.wrapper::before{
  content:"";
  position:absolute; left:12px; right:12px; top:-2px; height:2px;
  background: linear-gradient(90deg, transparent, var(--air-primary-2), transparent);
  opacity:.7; border-radius: 999px;
}

/* Headline mit „Runway underline“ */
.wrapper h1{
  letter-spacing:.6px;
  text-shadow: 0 2px 16px rgba(142,201,255,.25);
}
.wrapper h1::after{
  content:"";
  display:block; width:88px; height:4px; margin:14px auto 0;
  background: linear-gradient(90deg, transparent, var(--air-accent), transparent);
  filter: drop-shadow(0 0 8px rgba(48,229,255,.6));
  border-radius:3px;
}

/* Inputs: cockpit glow + soft fill */
.input-box input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.input-box input:focus{
  background: rgba(255,255,255,.10);
  border-color: rgba(142,201,255,.9);
  box-shadow: 
    0 0 0 4px rgba(142,201,255,.18),
    0 10px 24px rgba(0,0,0,.35) inset;
}
.input-box i{
  color: #b5c9e7;
  transition: filter .2s, color .2s;
}
.input-box:focus-within i{
  color: var(--air-primary);
  filter: drop-shadow(0 0 8px rgba(142,201,255,.6));
}

/* Button: turbine glow + light sweep */
.wrapper .btn{
  background: linear-gradient(180deg, #fff, #eaf2ff);
  color:#0f1115;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wrapper .btn::before{ /* sweep */
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-120%);
  mix-blend-mode: soft-light;
}
.wrapper .btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0,0,0,.28); }
.wrapper .btn:hover::before{ animation: sweep 1.1s ease; }
@keyframes sweep{ to{ transform: translateX(120%) } }

/* Links subtil leuchten */
.remember-forgot a, .register-link a{
  color: var(--air-primary-2);
  text-decoration: none;
  transition: text-shadow .2s, color .2s, opacity .2s;
  opacity:.9;
}
.remember-forgot a:hover, .register-link a:hover{
  color: var(--air-accent);
  text-shadow: 0 0 10px rgba(48,229,255,.7);
  opacity:1;
}

/* Logo: zarter Cyan-Glow + sanftes Schweben */
#throne-logo{
  filter: drop-shadow(0 0 10px rgba(48,229,255,.55))
          drop-shadow(0 8px 20px rgba(0,0,0,.45));
  animation: logoFloat 7s ease-in-out infinite;
}
@keyframes logoFloat{
  0%,100%{ transform: translateX(-50%) translateY(0) }
  50%{    transform: translateX(-50%) translateY(-6px) }
}

/* kleine Beacons (runway lights) oben links & unten rechts der Card */
.wrapper .beacon{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: var(--air-accent);
  filter: drop-shadow(0 0 12px rgba(48,229,255,.9));
  animation: beacon 2s ease-in-out infinite;
}
.wrapper .beacon.b1{ top:10px; left:10px; animation-delay:.1s; }
.wrapper .beacon.b2{ bottom:10px; right:10px; animation-delay:.9s; }
@keyframes beacon{ 
  0%,100%{ opacity:.3; transform: scale(.9) } 
  50%{ opacity:1; transform: scale(1.2) } 
}

/* Autofill dunkel */
input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset;
}

/* === FOOTER === */
.footer-dark {
  width: 100%;
  background-color: #1e212e;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: center;
  padding: 25px 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links li {
  display: inline-flex;
  align-items: center;
}

.footer-links li::before {
  content: "·";
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.4);
}

.footer-links li:first-child::before {
  content: "";
  padding: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
/* --- Autofill Dark Fix --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .06) inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-color: transparent !important;
  caret-color: #fff !important;
}

/* === FIX: Login-Button bleibt korrekt eingefärbt bei Fehler === */
.btn.error-state {
    background: #ff3838 !important;   /* rotes Error-Rot */
    color: #fff !important;           /* weiße, gut lesbare Schrift */
    box-shadow: 0 0 14px rgba(255, 56, 56, .45) !important;
    border: none !important;
}

.btn.softban {
    background: #ff3838 !important;
    color: #fff !important;
}

/* iPad Hoch/Quer – Logo nicht abschneiden */
@media (min-width: 768px) and (max-width: 1180px) {
  #throne-logo {
    top: -120px;   /* vorher -200px */
    width: 200px;  /* minimal kleiner, wirkt perfekt */
  }
}
@media (min-width: 768px) and (max-width: 1180px) {
  body {
    align-items: flex-start;
    padding-top: 12vh; /* schiebt alles nach unten */
  }
}