body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:6rem 1.5rem 3rem;
  position:relative;
  overflow-x:hidden;
}

/* türkiser Lichtkreis (Anlehnung ans Logo) + warmer Goldschein */
body::before{
  content:"";
  position:fixed;
  top:50%;left:50%;transform:translate(-50%,-58%);
  width:min(85vw,640px);aspect-ratio:1;
  background:radial-gradient(circle at center,
            rgba(72,178,172,.30), rgba(72,178,172,.10) 45%, transparent 68%);
  z-index:0;pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  top:-15%;right:-10%;
  width:60vw;height:60vh;max-width:560px;
  background:radial-gradient(circle at center,
            rgba(239,220,162,.45), rgba(194,154,69,.12) 45%, transparent 70%);
  z-index:0;pointer-events:none;
}

.card{
  position:relative;z-index:2;
  width:min(640px,100%);
  text-align:center;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.78rem;
  font-weight:600;
  color:var(--teal-deep);
  margin-bottom:1.6rem;
}

/* Wortmarke im Logo-Stil: Schreibschrift + gesperrte Versalien */
.brand{margin-bottom:.2rem;line-height:1;}
.brand .word{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(3rem,9vw,4.8rem);
  color:var(--teal-deep);
  letter-spacing:-.01em;
}
.brand .sub{
  display:block;
  margin-top:.5rem;
  font-family:var(--body);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5em;
  font-size:clamp(.9rem,2.6vw,1.25rem);
  padding-left:.5em;
}

/* goldener Schimmer-Effekt */
.shimmer{
  background:linear-gradient(100deg,
            var(--gold) 28%, var(--gold-light) 48%, #fff7e3 52%, var(--gold-light) 56%, var(--gold) 72%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 4.5s linear infinite;
}
@keyframes shimmer{to{background-position:-220% center;}}

.divider{
  width:72px;height:2px;border:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:1.9rem auto 2.4rem;
}

p{
  font-size:clamp(1.05rem,2.2vw,1.2rem);
  max-width:50ch;
  margin:0 auto 1.4rem;
  color:color-mix(in srgb,var(--ink) 90%, transparent);
}
p:last-of-type{margin-bottom:0;}

a.link{
  color:var(--teal-deep);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:600;
  transition:color .2s, text-decoration-color .2s;
}
a.link:hover,
a.link:focus-visible{
  color:var(--gold);
  text-decoration-color:var(--teal);
}

.social{margin-top:1.6rem;}
.social a{
  display:inline-flex;
  color:var(--teal-deep);
  transition:color .2s, transform .2s;
}
.social a:hover,
.social a:focus-visible{color:var(--gold);transform:translateY(-2px);}
.social svg{width:28px;height:28px;}

/* funkelnde Sterne */
.sparkle{
  position:absolute;
  color:var(--gold);
  font-size:1rem;
  z-index:1;
  pointer-events:none;
  text-shadow:0 0 8px rgba(239,220,162,.8);
  animation:twinkle 3.5s ease-in-out infinite;
}
.s1{top:-1.5rem;left:8%;font-size:1.4rem;animation-delay:0s;}
.s2{top:1rem;right:6%;font-size:.9rem;animation-delay:.6s;}
.s3{top:6.5rem;left:-0.5rem;font-size:1.1rem;animation-delay:1.2s;}
.s4{top:5rem;right:2%;font-size:1.5rem;animation-delay:.3s;}
.s5{bottom:3rem;left:12%;font-size:1rem;animation-delay:1.6s;}
.s6{bottom:-1rem;right:14%;font-size:1.25rem;animation-delay:.9s;}
.s7{top:8.5rem;right:18%;font-size:.8rem;animation-delay:2.1s;}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.7) rotate(0deg);}
  50%{opacity:1;transform:scale(1.15) rotate(35deg);}
}

/* dezentes Einblenden */
.fade{opacity:0;transform:translateY(14px);animation:rise .8s ease forwards;}
.fade.d1{animation-delay:.1s;}
.fade.d2{animation-delay:.2s;}
.fade.d3{animation-delay:.3s;}
@keyframes rise{to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;}
  .shimmer{color:var(--gold);}
  .sparkle{opacity:.7;}
}