/* Theme 2026 — Auth-CSS Fundament (login / 2fa / reset gemeinsam) */
  :root{
    color-scheme:dark;
    --bg:#0a0c10; --bg-2:#0d1015;
    --panel:#14171d; --panel-2:#0f1217;
    --border:#22262e; --border-strong:#2e333c;
    --text:#e7eaef; --text-dim:#9aa2b0; --text-mute:#6a7280;
    --brand-pink:#a61250; --brand-pink-2:#c8265f;
    --radius:6px; --radius-panel:8px;
    --danger:#e0576e; --success:#2bb783;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  @font-face{ font-family:"Inter Fallback"; src:local("Arial"); ascent-override:90.2%; descent-override:22.48%; line-gap-override:0%; size-adjust:107.4%; }
  body{margin:0; font-family:"Inter","Inter Fallback",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--text);
    -webkit-font-smoothing:antialiased; background:var(--bg);
    display:flex; flex-direction:column; min-height:100%;}

  /* Browser-Autofill nicht weiß/gelb hinterlegen (dunkles Theme beibehalten) */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
    caret-color:var(--text);
    transition:background-color 9999s ease-out 0s;
  }

  /* ---- ambient background (very restrained) ---- */
  .bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .bg::before{content:""; position:absolute; inset:0;
    background:radial-gradient(90% 60% at 50% -10%, #13171e 0%, #0b0e13 48%, #090b0f 100%);}
  .bg::after{content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
    width:900px; height:420px;
    background:radial-gradient(closest-side, color-mix(in srgb, var(--brand-pink) 16%, transparent), transparent 72%);
    opacity:.55;}
  .grid{position:absolute; inset:0; opacity:.35;
    background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 70%);
            mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 70%);}

  /* ---- app chrome: top bar ---- */
  .chrome-top{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
    padding:0 22px; height:52px; flex:0 0 auto;
    border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter:blur(8px);}

  .brand-mark{display:flex; align-items:center; gap:11px;}
  .brand-mark .logo{height:22px; width:auto; display:block;}

  .top-right{display:flex; align-items:center; gap:18px; font-size:12.5px;}
  .top-link{color:var(--text-dim); text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
  .top-link:hover{color:var(--text);}
  .top-link svg{width:14px; height:14px;}
  .env{display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid var(--border-strong); border-radius:100px; color:var(--text-dim); font-size:11.5px; letter-spacing:.2px;}
  .env .dot{width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);}

  /* ---- centered auth stage ---- */
  .stage{position:relative; z-index:1; flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:44px 24px;}
  .authwrap{width:100%; max-width:420px; display:flex; flex-direction:column;}

  .hero{text-align:center; margin-bottom:38px;}
  .hero .name{position:relative; display:inline-block; font-family:"Montserrat","Jost","Futura","Century Gothic","URW Gothic",-apple-system,sans-serif;
    font-size:80px; font-weight:700; line-height:1; white-space:nowrap;}
  .hero .name .mark{letter-spacing:-.02em; background:linear-gradient(180deg,#ffffff 0%,#b6bdc9 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
  .hero .name .x{position:relative; background:linear-gradient(155deg,var(--brand-pink-2) 0%,var(--brand-pink) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
  .hero .name .erp{position:absolute; left:55%; top:49%; transform:translateY(-50%); font-size:.22em; font-weight:700; letter-spacing:.02em; white-space:nowrap;
    color:#f2f5f9; -webkit-text-fill-color:#f2f5f9;}
  .hero .claim{margin-top:14px; color:var(--text-mute); font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase;}

  .card{width:100%; min-height:495px; position:relative;
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, #fff 0%), var(--panel-2));
    border:1px solid var(--border-strong); border-radius:var(--radius-panel);
    padding:34px 32px 30px;
    box-shadow:0 1px 0 color-mix(in srgb,#fff 4%,transparent) inset, 0 2px 6px rgba(0,0,0,.4), 0 40px 80px -46px rgba(0,0,0,.9);}

  .badge-key{position:absolute; top:26px; right:26px; z-index:2; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--panel-2); border:1px solid var(--border-strong);}
  .badge-key svg{width:20px; height:20px; color:var(--text-dim);}

  /* Meldungsboxen (Fehler / Erfolg) im Card-Kopf */
  .alert{margin:0 0 18px; padding:10px 13px; border-radius:var(--radius); font-size:12.5px;}
  .alert-danger{background:color-mix(in srgb,var(--danger) 14%,transparent); border:1px solid color-mix(in srgb,var(--danger) 45%,transparent); color:var(--danger);}
  .alert-ok{background:color-mix(in srgb,var(--success) 14%,transparent); border:1px solid color-mix(in srgb,var(--success) 45%,transparent); color:var(--success);}

  /* ---- shared footer under the card ---- */
  .under{text-align:center; margin-top:22px;}
  .under .secure{display:inline-flex; align-items:center; gap:7px; color:var(--text-mute); font-size:12px; letter-spacing:.2px;}
  .under .secure svg{width:13px; height:13px;}
  .under .ver{margin-top:9px; font-size:11px; color:var(--text-mute); opacity:.7; letter-spacing:.4px;}

  @media (max-width:560px){
    .chrome-top .env,.top-link span{display:none;}
    .card{padding:28px 22px 26px;}
    .hero .name{font-size:60px; letter-spacing:-1px;}
    .hero .claim{font-size:10.5px; letter-spacing:1px;}
  }