/* ===== BASIS ===== */
:root{
  --glass: rgba(255,255,255,.30);
  --glass-strong: rgba(255,255,255,.38);
  --stroke: rgba(255,255,255,.55);
  --shadow: 0 30px 90px rgba(0,0,0,.22);
  --text:#141414;
  --muted:#303030;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,
              "SF Pro Display","SF Pro Text",
              system-ui,sans-serif;
  color:var(--text);
  background:#f3f5fb;

  /* SCROLL ENABLED */
  overflow-x:hidden;
  overflow-y:auto;
}

/* ===== HINTERGRUND ===== */
.stage{
  position:fixed;
  inset:0;
  z-index:-5;
  background:linear-gradient(180deg,#fff,#eef2ff);
}

.mesh{
  position:fixed;
  inset:-20%;
  z-index:-4;
  background:
    radial-gradient(900px 700px at 10% 20%, rgba(0,255,215,.85), transparent 55%),
    radial-gradient(900px 700px at 40% 25%, rgba(120,135,255,.85), transparent 56%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,190,80,.85), transparent 58%),
    radial-gradient(900px 700px at 80% 80%, rgba(255,110,170,.85), transparent 58%),
    radial-gradient(900px 700px at 20% 85%, rgba(140,255,170,.80), transparent 58%);
  filter:saturate(1.35) blur(0.5px);
  animation:mesh 7s ease-in-out infinite;
  transform:translate3d(0,0,0);
  will-change:transform;
}

@keyframes mesh{
  0%{transform:translate(-3%,-2%) scale(1.05)}
  50%{transform:translate(3%,2%) scale(1.12)}
  100%{transform:translate(-3%,-2%) scale(1.05)}
}

/* ===== AURORA BLOBS ===== */
.blob{
  position:fixed;
  width:55vmax;
  height:55vmax;
  border-radius:50%;
  filter:blur(40px) saturate(1.55);
  opacity:.75;
  z-index:-3;
  will-change:transform;
}

.blob.b1{
  left:-12vmax; top:-14vmax;
  background:radial-gradient(circle at 30% 30%, rgba(0,255,230,.95), transparent 60%);
  animation:blob1 3.5s ease-in-out infinite;
}
.blob.b2{
  right:-18vmax; top:-12vmax;
  background:radial-gradient(circle at 40% 40%, rgba(160,120,255,.95), transparent 60%);
  animation:blob2 4s ease-in-out infinite;
}
.blob.b3{
  right:-20vmax; bottom:-18vmax;
  background:radial-gradient(circle at 35% 35%, rgba(255,170,70,.95), transparent 62%);
  animation:blob3 3.8s ease-in-out infinite;
}
.blob.b4{
  left:-15vmax; bottom:-18vmax;
  background:radial-gradient(circle at 35% 35%, rgba(255,110,170,.95), transparent 62%);
  animation:blob4 4.2s ease-in-out infinite;
}

@keyframes blob1{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10vmax,6vmax) scale(1.12)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes blob2{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12vmax,7vmax) scale(1.15)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes blob3{
  0%{transform:translate(0,0) scale(1.02)}
  50%{transform:translate(-10vmax,-8vmax) scale(1.18)}
  100%{transform:translate(0,0) scale(1.02)}
}
@keyframes blob4{
  0%{transform:translate(0,0) scale(1.02)}
  50%{transform:translate(12vmax,-9vmax) scale(1.16)}
  100%{transform:translate(0,0) scale(1.02)}
}

/* ===== SHIMMER / GRAIN ===== */
.shimmer{
  position:fixed;
  inset:-30%;
  z-index:-2;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(closest-side at 70% 60%, rgba(255,255,255,.16), transparent 62%);
  filter:blur(18px);
  animation:shimmer 5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shimmer{
  0%{transform:translate(-2%,-1%) rotate(0deg);opacity:.55}
  50%{transform:translate(2%,1%) rotate(3deg);opacity:.75}
  100%{transform:translate(-2%,-1%) rotate(0deg);opacity:.55}
}

.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:soft-light;
}

/* ===== LAYOUT ===== */
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--stroke);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(26px) saturate(1.35);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(700px 220px at 30% 0%,rgba(255,255,255,.75),transparent 55%);
  pointer-events:none;
}

/* ===== TYPO / UI ===== */
.hero{padding:38px}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  display:flex;
  gap:10px;
  font-weight:700;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg,#00ffd5,#ff6eb1);
}

/* Navigation / Language */
.links a{
  margin-left:12px;
  text-decoration:none;
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  color:#222;
  opacity:.75;
}

.links a:hover{
  background:rgba(255,255,255,.45);
  opacity:1;
}

/* AKTIVE SPRACHE */
.links a[aria-current="page"]{
  font-weight:700;
  text-decoration:underline;
  opacity:1;
}

h1{
  font-size:clamp(38px,4.8vw,60px);
  letter-spacing:-.045em;
}

.sub{
  color:var(--muted);
  max-width:58ch;
}

/* ===== PILLS / CTA ===== */
.pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.pill{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.10);
  font-size:12px;
  text-decoration:none;
  color:#000;
  transition:.2s ease;
}

.pill:hover{
  background:rgba(255,255,255,.85);
  transform:translateY(-1px);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  .mesh,.blob,.shimmer{animation:none}
}