/* ====== 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;
      }
    }/* =========================================================
   AUTH-CARDS: pro Seite eigene Höhe/Position (Desktop + Mobile)
   Voraussetzung: body hat ... page--*-only Klassen
   ========================================================= */

/* Grund-Layout: Shell darf zentrieren statt "an die Decke" */
body.page--auth .shell{
  min-height: 100vh;
  display: flex;
  justify-content: center;      /* horizontal */
  align-items: flex-start;      /* wir steuern Top-Offset selbst */
  padding: var(--card-top, 48px) 16px var(--card-bottom, 24px);
  box-sizing: border-box;
}

/* Karte bleibt wie gehabt */
body.page--auth .login-card{
  width: min(520px, 100%);
  margin: 0 auto;
}

/* ---------- DESKTOP Defaults ---------- */
body.page--index-only{ --card-top: 54px;  --card-bottom: 24px; }  /* Index höher */
body.page--login-only{ --card-top: 64px;  --card-bottom: 24px; }  /* Login etwas tiefer */
body.page--reset-only{ --card-top: 345px;  --card-bottom: 24px; }  /* Reset tiefer */
body.page--token-only{ --card-top: 345px;  --card-bottom: 24px; }  /* Token mittel */

/* ---------- MOBILE (iPhone) ---------- */
@media (max-width: 520px){
  body.page--auth .shell{
    padding-top: var(--card-top-m, 6px);
    padding-bottom: var(--card-bottom-m, 18px);
  }

  /* Mobile-Offsets pro Seite */
  body.page--index-only{ --card-top-m: 14px; --card-bottom-m: 8px; }
  body.page--login-only{ --card-top-m: 16px; --card-bottom-m: 10px; }
  body.page--reset-only{ --card-top-m: 18px; --card-bottom-m: 18px; }
  body.page--token-only{ --card-top-m: 16px; --card-bottom-m: 18px; }
}

/* ---------- Sehr kleine Geräte (iPhone SE) ---------- */
@media (max-width: 380px){
  body.page--index-only{ --card-top-m: 10px; }
  body.page--login-only{ --card-top-m: 10px; }
  body.page--reset-only{ --card-top-m: 12px; }
  body.page--token-only{ --card-top-m: 10px; }
}/* =========================================================
   AUTH-CARDS: pro Seite eigene Position (Desktop + Mobile)
   Voraussetzung: body hat page--auth + is-xxx
   ========================================================= */

body.page--auth .shell{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--card-top, 56px) 16px var(--card-bottom, 24px);
  box-sizing: border-box;
}

body.page--auth .login-card{
  width: min(520px, 100%);
  margin: 0 auto;
}

/* ---------- Desktop Offsets ---------- */
body.is-index    { --card-top: 56px; }
body.is-login    { --card-top: 70px; }
body.is-token    { --card-top: 86px; }
body.is-register { --card-top: 150px; }
body.is-reset    { --card-top: 120px; }  /* <- Reset tiefer */

/* ---------- Mobile (iPhone) ---------- */
@media (max-width: 520px){
  body.page--auth .shell{
    padding-top: var(--card-top-m, 18px);
    padding-bottom: var(--card-bottom-m, 18px);
  }
  body.is-index    { --card-top-m: 8px; }
  body.is-login    { --card-top-m: 18px; }
  body.is-token    { --card-top-m: 22px; }
  body.is-register { --card-top-m: 22px; }
  body.is-reset    { --card-top-m: 26px; } /* <- iPhone etwas tiefer */
}

/* iPhone SE */
@media (max-width: 380px){
  body.is-reset { --card-top-m: 20px; }
}/* Auth-Seiten: Anker dezenter */
body.page--auth #anchor-bg{
  opacity: .10 !important;
  width: min(180px, 55vw) !important;
  bottom: 60px !important;
}
@media (max-width:520px){
  body.page--auth #anchor-bg{
    width: min(140px, 60vw) !important;
    bottom: 40px !important;
  }
}/* ======================
   ANKER – Auth Seiten
   ====================== */

/* alte/andere Anker sicher aus */
#wm-anchor, #bg-map, .bg-map, #map, .map, .karte{ display:none !important; }

/* Anker auf ALLEN Auth-Seiten (login/reset/token/register/index) */
body.page--auth::before{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  background:url("/images/anker-bg.png") no-repeat center/contain;
  opacity:.14;
  width: clamp(180px, 18vw, 280px);
  aspect-ratio:1/1;
  left: 8vw;
  top: 7vh;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.16));
}

/* Desktop: leicht schwingen */
@media (min-width:901px){
  body.page--auth::before{
    transform-origin: top center;
    animation: anchorSwing 8s ease-in-out infinite alternate;
  }
}
@keyframes anchorSwing{
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(0deg);  }
  100% { transform: rotate(3deg);  }
}

/* Mobile/iPhone: unten mittig klein (NICHT ausblenden) */
@media (max-width:900px){
  body.page--auth::before{
    top: auto;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 18px);
    transform: translateX(-50%);
    width: min(44vw, 190px);
    opacity: .12;
    animation: none;
  }
}/* =========================================
   AUTH: Anker-Position + Link-Farben (OVERRIDES)
   ganz ans ENDE der fix.css
   ========================================= */

/* 1) Anker: weiter nach links (Desktop) */
@media (min-width:901px){
  body.page--index::before{
    left: 2vw !important;   /* war 6vw -> weiter nach links */
    top: 6vh !important;
  }
}

/* Optional: noch “mehr links” (falls du willst)
@media (min-width:901px){
  body.page--index::before{ left: 0.8vw !important; }
}
*/

/* 2) Links in der Auth-Karte wieder GOLD (auch :visited) */
body.page--auth .login-card a,
body.page--auth .login-card a:visited,
body.page--auth .login-card a:hover,
body.page--auth .login-card a:active{
  color: var(--whf-gold, #ffefc7) !important;
  text-shadow: var(--whf-gold-shadow, 0 1px 2px rgba(0,0,0,.55)) !important;
  text-decoration: underline !important;
}

/* Falls irgendwo harte Link-Farbe gesetzt wurde (Safari purple fix) */
body.page--auth .login-card a{
  -webkit-text-fill-color: var(--whf-gold, #ffefc7) !important;
}/* =========================================
   AUTH – Schrift minimal kräftiger
   ========================================= */

/* Grundtext in Auth-Karten */
body.page--auth .login-card{
  font-weight: 500; /* vorher meist 400 */
}

/* Überschriften */
body.page--auth .login-card h1,
body.page--auth .login-card h2{
  font-weight: 700; /* vorher 600 */
  letter-spacing: .2px;
}

/* Labels & Hinweise */
body.page--auth .login-card label,
body.page--auth .login-card .muted,
body.page--auth .login-card p{
  font-weight: 500;
}

/* Links (gold) etwas kräftiger */
body.page--auth .login-card a{
  font-weight: 600;
}

/* Buttons nicht zu fett – nur sauber */
body.page--auth .login-card .btn,
body.page--auth .login-card button{
  font-weight: 600;
}/* =========================================================
   AUTH MOBILE FIX (Login/Token/Register/Reset)
   - Design bleibt gleich
   - Scroll wieder möglich (Keyboard!)
   - Karte startet höher (oben), nicht "fest zentriert"
   ========================================================= */
@media (pointer: coarse) and (max-width: 520px){

  /* 1) Scroll auf Mobile wieder erlauben (überschreibt overflow:hidden) */
  html, body{
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) Auth-Seiten nicht mehr "hart zentriert" */
  body.page--auth .shell{
    min-height: 100svh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* 🔥 oben starten */
    padding: 14px 12px calc(22px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* 3) Karte bleibt optisch identisch, nur: wenn’s zu eng wird -> Karte scrollt innen */
  body.page--auth .login-card{
    margin: 0 auto !important;
    max-height: calc(100svh - 28px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* iPhone SE / Mini noch etwas höher */
@media (pointer: coarse) and (max-width: 380px){
  body.page--auth .shell{
    padding-top: 10px !important;
  }
}/* =========================================
   AUTH (Login/Token/Register/Reset) – Mobile Scroll + Top
   ========================================= */
body.page--auth{
  overflow-x: hidden;
}

/* iPhone/Touch: Scroll wieder an (Keyboard!) */
@media (pointer: coarse){
  html, body{
    overflow-x: hidden !important;
  }
  body.page--auth{
    overflow-y: auto !important;           /* 🔥 wichtig */
    -webkit-overflow-scrolling: touch;
  }

  /* Shell: oben starten statt hart zentrieren */
  body.page--auth .shell{
    min-height: 100svh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: var(--auth-top, 14px) 12px calc(22px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* Karte: wenn sehr klein → innen scrollen statt "unten weg" */
  body.page--auth .login-card{
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* sehr kleine Geräte (SE/mini) */
@media (pointer: coarse) and (max-width: 380px){
  body.page--auth .shell{ padding-top: 10px !important; }
}/* =========================================================
   AUTH SCROLL FIX (Login/Token/Register/Reset)
   - Design bleibt exakt gleich
   - Buttons verschwinden nicht mehr bei Fehlermeldung
   - iPhone Safari/Chrome: Scroll + Safe-Area
   ========================================================= */

/* Nur Auth-Seiten (deine Klassen sind vorhanden) */
body.page--auth{
  overflow-x: hidden;
}

/* 1) Wichtig: overflow:hidden aus dem Base nur für Auth wieder "aufheben" */
body.page--auth,
body.page--auth html,
body.page--auth body{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Fallback falls oben html,body global locked sind */
@supports (-webkit-overflow-scrolling: touch){
  body.page--auth{
    -webkit-overflow-scrolling: touch;
  }
}

/* 2) Mobile/Touch: Shell startet oben, damit Keyboard nicht alles killt */
@media (pointer: coarse){
  html, body{
    overflow-x: hidden !important; /* niemals seitlich */
  }

  body.page--auth .shell{
    /* nicht "hart center", sondern oben starten -> scrollbar */
    min-height: 100svh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    /* genug Luft unten für Safe-Area + damit Button erreichbar bleibt */
    padding: 14px 12px calc(26px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* 3) Wenn die Karte (durch Fehler/Keyboard) zu hoch wird -> innen scrollen */
  body.page--auth .login-card{
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* 4) Sehr kleine Geräte (iPhone SE/mini) minimal kompakter – ohne Designwechsel */
@media (pointer: coarse) and (max-width: 380px){
  body.page--auth .shell{
    padding-top: 10px !important;
  }
}

/* 5) Fehlermeldungen: brechen sauber um und "drücken" nicht breit */
body.page--auth .login-error,
body.page--auth .login-success{
  overflow-wrap: anywhere;
  word-break: break-word;
}/* =========================================================
   AUTH LAYOUT – Desktop hoch, Mobile scrollbar
   (überschreibt deine alten --card-top / padding-top Experimente)
   ========================================================= */

/* 1) Desktop/Allgemein: Karte nicht unten kleben */
body.page--auth .shell{
  min-height: 100vh;
  display: grid;
  place-items: center;              /* wieder normal zentriert */
  padding: 24px 16px;               /* statt riesige top offsets */
  box-sizing: border-box;
}

/* Desktop: leicht nach oben (optisch schöner) */
@media (min-width: 901px){
  body.page--auth .shell{
    place-items: start center;      /* oben zentriert */
    padding-top: 42px;              /* <- feinjustierbar: 26–70 */
  }
}

/* 2) Wichtig: alle alten Offset-Variablen neutralisieren */
body.page--index-only,
body.page--login-only,
body.page--token-only,
body.page--reset-only,
body.page--register-only,
body.is-index,
body.is-login,
body.is-token,
body.is-reset,
body.is-register{
  --card-top: unset !important;
  --card-top-m: unset !important;
  --auth-top: unset !important;
}

/* 3) Mobile/Touch: Scroll + oben starten (Button bleibt erreichbar) */
@media (pointer: coarse){
  html, body{
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.page--auth .shell{
    min-height: 100svh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 12px calc(26px + env(safe-area-inset-bottom)) !important;
  }

  body.page--auth .login-card{
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* 4) Fehlerboxen sprengen nichts */
body.page--auth .login-error,
body.page--auth .login-success{
  overflow-wrap: anywhere;
  word-break: break-word;
}/* =========================================================
   LOGIN ONLY: Anchor tiefer + kleiner
   wirkt nur auf login.php (body.page--login-only)
   ========================================================= */
body.page--login-only{
  --login-anchor-y: 140%;
  --login-anchor-size: min(140px, 74vw);
  --login-anchor-opacity: .16;
}

/* Fall A: Anchor als eigenes Element */
body.page--login-only #anchor-bg{
  background-position: 50% var(--login-anchor-y) !important;
  background-size: var(--login-anchor-size) !important;
  opacity: var(--login-anchor-opacity) !important;
}

/* Fall B: Anchor sitzt als Background/Pseudo auf body */
body.page--login-only{
  background-position: 50% var(--login-anchor-y) !important;
  background-size: var(--login-anchor-size) !important;
}

/* Optional: falls es ein body::before ist */
body.page--login-only::before{
  background-position: 50% var(--login-anchor-y) !important;
  background-size: var(--login-anchor-size) !important;
  opacity: var(--login-anchor-opacity) !important;
}


/* =========================================================
   REGISTER: Anchor komplett AUS
   ========================================================= */
body.page--register #anchor-bg{
  display: none !important;
}

body.page--register{
  background-image: none !important; /* falls Anchor als Body-Background kommt */
}

body.page--register::before{
  content: none !important; /* falls Anchor über Pseudo-Element kommt */
}/* =========================================
   DESKTOP: Login-Anker muss sichtbar bleiben
   (nur Desktop, keine Mobile-Nebenwirkungen)
   ========================================= */
@media (min-width: 901px){
  body.page--index::before{
    content:"" !important;
  }
}/* =========================================
   DESKTOP ANKER – Login = Token (einheitlich + größer)
   Mobile bleibt unberührt
   ========================================= */
@media (min-width: 901px){
  body.page--index::before,
  body.page--auth::before{
    /* Größe wie „früher“ etwas kräftiger */
    width: clamp(200px, 20vw, 300px) !important;
    aspect-ratio: 1 / 1 !important;

    left: 6vw !important;
    top: 6vh !important;

    opacity: .20 !important;
    background: url("/images/anker-bg.png") no-repeat center/contain !important;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.18)) !important;

    /* falls irgendwo weggenullt */
    content: "" !important;
    position: fixed !important;
    pointer-events: none !important;
    z-index: 0 !important;

    transform-origin: top center !important;
    animation: anchorSwing 8s ease-in-out infinite alternate !important;
  }
}/* =========================================
   MOBILE ANKER – Login = Token (kein Springen)
   gilt für alle Auth-Seiten + Login (page--index + page--auth)
   ========================================= */
@media (max-width: 900px){

  /* Token/Reset/Register/... */
  body.page--auth::before,
  /* Login ist oft page--index + page--auth */
  body.page--index.page--auth::before,
  /* Fallback falls Login nur page--index ist */
  body.page--index::before{

    content: "" !important;
    position: fixed !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background: url("/images/anker-bg.png") no-repeat center/contain !important;

    /* FESTE Größe => kein Springen */
    width: 190px !important;
    height: 190px !important;

    left: 50% !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 18px) !important;
    transform: translateX(-50%) !important;

    opacity: .12 !important;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.14)) !important;

    animation: none !important;
  }

  /* Karte sicher über dem Anchor */
  body.page--auth .shell,
  body.page--auth .login-card{
    position: relative;
    z-index: 2;
  }
}/* =========================================================
   LOGIN – Anker nur auf kleinen iPhones AUS
   - Desktop bleibt IMMER an (pointer:fine)
   - Pro Max bleibt an (>= 430px)
   ========================================================= */

/* Default: Anker ist an (falls irgendwo versehentlich aus) */
body.page--login #anchor-bg{ display:block !important; }
body.page--login::before,
body.page--login::after{ display:block !important; }

/* NUR Touch-Geräte + kleine Breite (SE/mini/16e etc.) -> AUS */
@media (max-width: 399px) and (pointer: coarse){
  body.page--login #anchor-bg{ display:none !important; }

  body.page--login::before,
  body.page--login::after{
    content: none !important;
    display: none !important;
  }
}/* REGISTER (kleine iPhones): Karte kompakter + Anker aus */
@media (max-width: 430px) and (pointer: coarse){

  /* Anker komplett aus */
  body.page--register #anchor-bg{ display:none !important; }
  body.page--register::before,
  body.page--register::after{ content:none !important; display:none !important; }

  /* Karte kompakter */
  body.page--register .login-card{
    width: min(92vw, 420px) !important;
    padding: 18px 16px !important;
    border-radius: 22px !important;
  }

  /* Headings etwas kleiner */
  body.page--register .login-head h1{
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
  body.page--register .login-head p{
    font-size: 16px !important;
  }

  /* Inputs/Buttons: weniger Höhe */
  body.page--register input,
  body.page--register select,
  body.page--register button{
    min-height: 44px !important;
  }
}