/* ====== 1. Basis: Hintergrund & Reset ====== */
html, body{
  height:100%;
  margin:0;
  overflow:hidden;
  background: linear-gradient(to bottom, #264b7a 0%, #3f74a6 60%, #7db1df 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nur Login-Seite */
body.page--index{
  position:relative;
}

/* ====== 2. Layout: Shell & Karte ====== */

/* Grundlayout: Shell zentriert */
body.page--index .shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
@supports (height:100svh){
  body.page--index .shell{ min-height:100svh; }
}

/* Desktop: Karte höher unter dem Anker parken */
@media (min-width:901px){
  body.page--index .shell{
    place-items:start center;           /* oben zentriert */
    padding-top:30px;                  /* <<< HÖHE KARTE: kleiner = höher, größer = tiefer */
  }
}

/* Mobile: Karte wirklich mittig */
@media (max-width:900px){
  body.page--index .shell{
    place-items:center;
    padding:16px;
  }
}

/* ====== 3. Glas-Karte (ruhig, 3D, maritim) ====== */

body.page--index .login-card{
  position:relative;
  width:min(720px, 92vw);
  padding:24px 24px 20px;
  border-radius:18px;

  /* satter Glasblau-Verlauf */
  background: linear-gradient(
    170deg,
    rgba(25,70,130,0.82) 0%,
    rgba(15,45,90,0.88) 100%
  );
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 28px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 30px rgba(255,255,255,.04);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  transform:none;
  animation:none;
  overflow:hidden;    /* Head sauber clippen */
}

/* leichte Reaktion beim Hover auf Desktop */
@media (hover:hover){
  body.page--index .login-card:hover{
    box-shadow:
      0 30px 70px rgba(0,0,0,.6),
      inset 0 2px 2px rgba(255,255,255,.12),
      inset 0 -10px 30px rgba(255,255,255,.07);
  }
}

/* ====== 4. Anker-Deko ====== */

/* Alte Anker-Elemente sicher abschalten */
#wm-anchor, #bg-map, .bg-map, #map, .map, .karte{
  display:none !important;
}

/* EIN Anker über ::before der Login-Seite */
body.page--index::before{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  background:url("/images/anker-bg.png") no-repeat center/contain;
  opacity:.20;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.18));
}
/* Desktop: Anker links oben + sanftes Schwingen */
@media (min-width:901px){
  body.page--index::before{
    top:6vh;
    left:6vw;
    width:clamp(220px, 23vw, 340px);
    aspect-ratio:1/1;

    /* NEU: Animation */
    transform-origin: top center;
    animation: anchorSwing 8s ease-in-out infinite alternate;
  }
}@keyframes anchorSwing{
  0%   { transform: rotate(-5deg); }
  50%  { transform: rotate(0deg);  }
  100% { transform: rotate(4deg);  }
}


/* Mobile: Anker unten mittig ODER ausblenden */
@media (max-width:900px){
  /* Variante A: klein unten mittig
  body.page--index::before{
    bottom:calc(env(safe-area-inset-bottom) + 10px);
    left:50%;
    transform:translateX(-50%);
    width:min(40vw, 180px);
    aspect-ratio:1/1;
    opacity:.16;
  }
  */

  /* Variante B: komplett ausblenden (wie zuletzt bei dir) */
  body.page--index::before{
    content:none;
  }
}

/* ====== 5. Typo & Text (Überschrift, Unterzeile, Hinweis) ====== */

.login-head h1{
  position:relative;
  margin:2px 0 10px;
  font-weight:900;
  font-size:clamp(1.9rem, 2.8vw, 2.3rem);
  letter-spacing:.3px;

  /* leicht glänzender Text, aber STABIL */
  background: linear-gradient(180deg, #ffffff 0%, #dbeaff 40%, #aac4ef 70%, #5b8ed4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:
    0 2px 3px rgba(0,0,0,.50),
    0 8px 18px rgba(30,70,140,.40);
}
.login-head h1::after{
  content:none; /* Reflex ausgeschaltet → nix flackert */
}

.login-head .muted{
  margin:0 0 18px;
  font-weight:500;
  font-size:1rem;
  color:#c8daee;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Hinweis unten */
.hint{
  margin:10px 2px 0;
  color:#dce7f7;
  background:rgba(255,255,255,.08);
  padding:10px 12px;
  border-radius:10px;
  font-size:.96rem;
  line-height:1.35;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 8px rgba(0,0,0,.18);
}

/* ====== 6. Schloss-Icon oben ====== */

.login-head::before{
  content:"🔒";
  font-size:2rem;
  display:block;
  margin-bottom:6px;
  position:relative;

  /* Gold-Schimmer */
  background: linear-gradient(180deg,
    #fff8b0 0%,
    #e6b53f 40%,
    #b38313 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.45))
    drop-shadow(0 8px 12px rgba(50,100,160,.35));
  opacity:.95;
}

/* kleines Seil */
.login-head::after{
  content:"";
  position:absolute;
  top:-6px;
  width:2px;
  height:6px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.25));
  border-radius:1px;
  opacity:.8;
}

/* ====== 7. Formular & Button ====== */

.login-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin:10px 0 14px;
}
.login-form label{
  grid-column:1 / -1;
  color:#dbeaff;
  font-weight:600;
  letter-spacing:.3px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}

/* bei schmalen Geräten einspaltig */
@media (max-width:820px){
  .login-form{
    grid-template-columns:1fr;
  }
}

.login-form input{
  height:46px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  background:#f2f7fc;
  color:#0e3a62;
  font-weight:700;
  letter-spacing:.4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
  outline:none;
  font-size:17px; /* iOS: kein Auto-Zoom */
}
.login-form input::placeholder{
  color:#8fb9e6;
  font-weight:600;
}
.login-form input:focus{
  outline:2px solid rgba(60,120,200,.5);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.25),
    0 0 0 3px rgba(60,120,200,.25);
}

/* Button maritim */
.login-form .btn,
.login-form button{
  height:46px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background: linear-gradient(180deg, #2b6fb1 0%, #1b4e87 100%);
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: 0 10px 20px rgba(27,78,135,.30),
              inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.login-form .btn:hover,
.login-form button:hover{
  background: linear-gradient(180deg, #3683ce 0%, #215ea0 100%);
}

/* Fehlermeldung */
.login-error{
  margin:12px 0 6px;
  padding:10px 12px;
  border-radius:10px;
  background:#ffd9d9;
  color:#7a1f1f;
  font-weight:700;
  border:1px solid #f5bcbc;
}.remember-token{
  display:flex;
  align-items:center;
  gap:6px;
  margin:10px 0 4px;
  font-size:0.9rem;
  opacity:0.95;
}
.remember-token input{
  transform:scale(1.2);
} /* Benutzername + Passwort nebeneinander (Desktop) */
    .login-form .login-row{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .login-form .login-row .field{
      flex:1 1 0;
    }

    /* Auf Handy untereinander */
    @media (max-width: 600px){
      .login-form .login-row{
        flex-direction:column;
      }
    }