:root{
  /* Biorandevu Purple Theme */
  --acc:#8B5CF6;
  --acc2:#7C3AED;
  --acc3:#A78BFA;

  --text:#111827;
  --muted:#6B7280;
  --card:#FFFFFF;

  --ring: rgba(139,92,246,.25);
  --shadow: rgba(15,23,42,0.18);

  /* Background intensity */
  --bgDim: 0.30;
}

/* Dark tokens */
:root.dark{
  --text:#E5E7EB;
  --muted:#9CA3AF;
  --card: rgba(17,24,39,0.78);
  --ring: rgba(167,139,250,.28);
  --shadow: rgba(0,0,0,0.65);

  --bgDim: 0.50;
}

/* ===== Body ===== */
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(139,92,246, calc(.30 + var(--bgDim))), transparent 60%),
    radial-gradient(1100px 700px at 82% 18%, rgba(124,58,237, calc(.24 + var(--bgDim))), transparent 60%),
    radial-gradient(900px 650px at 35% 92%, rgba(167,139,250, calc(.20 + var(--bgDim))), transparent 62%),
    linear-gradient(180deg, #ebe6ff 0%, #e0d7ff 50%, #f7f6ff 100%);
}
:root.dark body{
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(139,92,246,.45), transparent 60%),
    radial-gradient(1100px 700px at 82% 18%, rgba(124,58,237,.38), transparent 60%),
    radial-gradient(900px 650px at 35% 92%, rgba(167,139,250,.30), transparent 62%),
    linear-gradient(180deg, #070816 0%, #090b1d 55%, #04050e 100%);
}

/* ===== Background wrapper ===== */
.bg-wrap{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;

  --px: 0px;
  --py: 0px;
}

/* ===== BIG animated BLOBS ===== */
.bg-wrap .blob{
  position:absolute;
  width:820px;
  height:820px;
  border-radius:50%;
  filter: blur(42px) saturate(1.35);
  opacity:.90;
  mix-blend-mode: screen;
  animation: floatBlob 14s ease-in-out infinite;
  will-change: transform;
}

.bg-wrap .blob.blob1{
  left:-240px;
  top:-260px;
  background:
    radial-gradient(circle at 30% 30%, rgba(139,92,246,.95), transparent 62%),
    radial-gradient(circle at 70% 55%, rgba(167,139,250,.75), transparent 64%),
    radial-gradient(circle at 45% 80%, rgba(124,58,237,.55), transparent 66%);
  animation-duration: 16s;
  transform: translate(calc(var(--px) * 0.12), calc(var(--py) * 0.12));
}

.bg-wrap .blob.blob2{
  right:-260px;
  top:-210px;
  width:920px;
  height:920px;
  background:
    radial-gradient(circle at 40% 35%, rgba(124,58,237,.90), transparent 64%),
    radial-gradient(circle at 70% 75%, rgba(139,92,246,.55), transparent 66%),
    radial-gradient(circle at 30% 80%, rgba(167,139,250,.55), transparent 68%);
  animation-duration: 18s;
  animation-delay: -6s;
  transform: translate(calc(var(--px) * 0.18), calc(var(--py) * 0.18));
}

.bg-wrap .blob.blob3{
  left:12%;
  bottom:-420px;
  width:980px;
  height:980px;
  background:
    radial-gradient(circle at 45% 35%, rgba(167,139,250,.80), transparent 64%),
    radial-gradient(circle at 70% 65%, rgba(139,92,246,.55), transparent 68%),
    radial-gradient(circle at 30% 70%, rgba(124,58,237,.55), transparent 68%);
  animation-duration: 20s;
  animation-delay: -10s;
  transform: translate(calc(var(--px) * 0.14), calc(var(--py) * 0.14));
}

/* ===== Aurora overlay ===== */
.bg-wrap::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(1100px 520px at 50% 8%, rgba(255,255,255,.75), transparent 72%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(139,92,246,.22),
      rgba(124,58,237,.18),
      rgba(167,139,250,.22),
      rgba(139,92,246,.22)
    );
  opacity:.70;
  filter: blur(26px) saturate(1.2);
  animation: slowRotate 22s linear infinite;
  pointer-events:none;
  transform: translate(calc(var(--px) * 0.08), calc(var(--py) * 0.08));
}
:root.dark .bg-wrap::before{
  opacity:.55;
  background:
    radial-gradient(1100px 520px at 50% 8%, rgba(255,255,255,.16), transparent 72%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(139,92,246,.22),
      rgba(124,58,237,.18),
      rgba(167,139,250,.22),
      rgba(139,92,246,.22)
    );
}

/* ===== Grid ===== */
.bg-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 50% 28%, rgba(0,0,0,.85), transparent 75%);
  opacity:.30;
  pointer-events:none;
}
:root.dark .bg-wrap::after{
  opacity:.14;
  background:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
}

/* ===== Noise ===== */
.noise{
  position:absolute;
  inset:0;
  opacity:.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events:none;
}
:root.dark .noise{ opacity:.08; }

/* Animations */
@keyframes floatBlob{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(90px,55px,0) scale(1.10); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}
@keyframes slowRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ===== Layout ===== */
.page{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:480px;
  border:1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  border-radius:18px;
  box-shadow: 0 26px 90px var(--shadow);
  overflow:hidden;
}
:root.dark .auth-card{
  border-color: rgba(255,255,255,0.10);
  background: var(--card);
}

/* ===== HERO HEADER (FINAL: Logo passt, kein Scroll) ===== */
.auth-head{
  position:relative;
  padding: 18px 18px 12px !important;
  min-height: 0 !important;
  border-bottom:1px solid rgba(17,24,39,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  background:
    radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.70), transparent 70%),
    linear-gradient(180deg, rgba(139,92,246,.40), rgba(139,92,246,.18) 55%, rgba(255,255,255,.06));
}
:root.dark .auth-head{
  border-bottom-color: rgba(255,255,255,0.08);
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(124,58,237,.55), rgba(124,58,237,.28) 55%, rgba(0,0,0,.12));
}

/* little moving light in header */
.auth-head::after{
  content:"";
  position:absolute;
  left:-40%;
  top:-30%;
  width:180%;
  height:180%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 60%);
  filter: blur(22px);
  opacity:.55;
  animation: headerSweep 8.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes headerSweep{
  0%{ transform: translateX(-6%) translateY(0%) rotate(0deg); opacity:.35; }
  50%{ transform: translateX(6%) translateY(2%) rotate(10deg); opacity:.65; }
  100%{ transform: translateX(-6%) translateY(0%) rotate(0deg); opacity:.35; }
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:900;
}
.brand.brand-vertical{
  margin-top: 0 !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px !important;
  z-index: 2;
}

.brand-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.3px;
}

.sub{
  color:rgba(17,24,39,0.62);
  font-size:12px;
  margin-top:4px;
}
:root.dark .sub{ color:rgba(229,231,235,0.68); }

/* ===== LOGO: passend zu deinem login.php (.logo-hero) ===== */
.logo-hero{
  width: 160px;
  height: 96px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-hero img{
  display:block;
  width:210px;
  height:240px;
  max-width: 100%;
  max-height: 140px;  /* verhindert Scrollen */
  object-fit: contain;

  filter:
    drop-shadow(0 18px 32px rgba(124,58,237,.45))
    drop-shadow(0 6px 0 rgba(255,255,255,.55));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-6px) scale(1.01); }
  100%{ transform: translateY(0px) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .logo-hero img{ animation:none; }
}

/* Tabs */
.auth-tabs{ display:flex; gap:8px; padding:12px 18px 0 18px; }
.tab-btn{
  flex:1;
  border:1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.74);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  text-align:center;
  user-select:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
:root.dark .tab-btn{
  border-color: rgba(255,255,255,0.10);
  background: rgba(17,24,39,0.50);
}
.tab-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(139,92,246,.18); }
.tab-btn:active{ transform: translateY(0px); }
.tab-btn.active{
  background: linear-gradient(135deg, rgba(167,139,250,.95), rgba(139,92,246,.92));
  border-color: rgba(139,92,246,0.40);
  color:#fff;
  box-shadow: 0 16px 40px rgba(139,92,246,.28);
}

/* Tab content */
.hide{ display:none; }

.auth-body{ padding:16px 18px 18px 18px; color:var(--text); }

label{ font-size:12px; color:rgba(17,24,39,0.72); font-weight:900; }
:root.dark label{ color:rgba(229,231,235,0.70); }

/* Inputs */
.form-control{
  border-radius:999px !important;
  height:40px;
  border:1px solid rgba(17,24,39,0.12);
  background: rgba(255,255,255,0.90);
  color:var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
:root.dark .form-control{
  border-color: rgba(255,255,255,0.10);
  background: rgba(17,24,39,0.45);
  color: var(--text);
}
.form-control::placeholder{ color:rgba(17,24,39,0.45); }
:root.dark .form-control::placeholder{ color:rgba(229,231,235,0.42); }

.form-control:focus{
  border-color: rgba(139,92,246,0.95);
  box-shadow:0 0 0 4px var(--ring);
  background: rgba(255,255,255,0.96);
  transform: translateY(-1px);
}
:root.dark .form-control:focus{ background: rgba(17,24,39,0.55); }

/* Buttons */
.btn-pill{ border-radius:999px; font-weight:900; }
.btn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(135deg, rgba(167,139,250,.95), rgba(139,92,246,.92));
  border:0;
  box-shadow: 0 16px 44px rgba(139,92,246,.26);
}
.btn-primary:hover{ box-shadow: 0 22px 65px rgba(139,92,246,.34); filter: brightness(1.03) saturate(1.05); }

.btn-success{
  background: linear-gradient(135deg, rgba(180,160,255,.95), rgba(139,92,246,.88));
  border:0;
  box-shadow: 0 16px 44px rgba(139,92,246,.22);
}
.btn-success:hover{ box-shadow: 0 22px 65px rgba(139,92,246,.30); filter: brightness(1.03) saturate(1.05); }

.btn:disabled,
.btn.disabled{
  opacity:.62;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
  cursor:not-allowed !important;
}

/* helper row */
.helper-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
  font-size:12px;
}
.helper-row a{
  color: color-mix(in srgb, var(--acc) 85%, #000);
  text-decoration:none;
  font-weight:900;
}
.helper-row a:hover{ text-decoration:underline; }

.alert{ border-radius:12px; }

.field-hint{
  margin-top:6px;
  font-size:11px;
  color:rgba(17,24,39,0.58);
  font-weight:700;
}
:root.dark .field-hint{ color:rgba(229,231,235,0.52); }

.foot{
  padding:12px 18px 16px 18px;
  border-top:1px solid rgba(17,24,39,0.08);
  color:rgba(17,24,39,0.55);
  font-size:11px;
  text-align:center;
  font-weight:800;
}
:root.dark .foot{
  border-top-color: rgba(255,255,255,0.08);
  color:rgba(229,231,235,0.55);
}

/* Segmented */
.seg{ display:flex; gap:8px; margin-top:6px; }
.seg .segbtn{
  flex:1;
  border:1px solid rgba(17,24,39,0.12);
  border-radius:999px;
  padding:8px 10px;
  background: rgba(255,255,255,0.78);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
:root.dark .seg .segbtn{
  border-color: rgba(255,255,255,0.10);
  background: rgba(17,24,39,0.50);
}
.seg .segbtn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(139,92,246,.18); }
.seg .segbtn.active{
  background: linear-gradient(135deg, rgba(180,160,255,.95), rgba(139,92,246,.88));
  border-color: rgba(139,92,246,0.40);
  color:#fff;
  box-shadow: 0 16px 44px rgba(139,92,246,.22);
}

.type-block{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px dashed rgba(17,24,39,0.14);
}
:root.dark .type-block{ border-top-color: rgba(255,255,255,0.10); }

/* Mobile */
@media (max-width:480px){
  .auth-head{ padding: 14px 14px 10px !important; }
  .logo-hero{ width: 140px; height: 82px; }
  .logo-hero img{ max-height: 82px; }
}