:root{
      --blue:#0A4DFF;
      --yellow:#FFD500;
      --ink:#0b1220;
      --radius-xl:28px;
    }

    * { box-sizing: border-box; }
    html,body { height: 100%; margin:0; }

    body{
      font-family: "Inter", system-ui, sans-serif;
      color: var(--ink);
      background: linear-gradient(-45deg, var(--yellow), white, var(--blue), var(--yellow));
      background-size: 400% 400%;
      animation: gradientMove 60s ease infinite;
      display:grid;
      place-items:center;
      padding: 24px;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .card{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 12px;
  background: rgba(255,255,255);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  overflow: hidden;
  text-align: center;
  padding: 0;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 10px; /* Randbreite */
  background: linear-gradient(270deg, var(--blue), var(--yellow), var(--blue));
  background-size: 400% 400%;
  animation: borderGradient 20s ease infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes borderGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.content{
  padding: clamp(20px, 4vw, 40px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  justify-items: center;
  position: relative;
  z-index: 1;
}

    .logo-img{
      width: 170px;
      height: 170px;
      object-fit: contain;
      background: var(--yellow);
      border-radius: 100%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    h1{
      font-size: clamp(1.5rem, 2.4vw + 1rem, 2.4rem);
      font-weight: 800;
      margin: 0;
    }

    p.lead{
      max-width: 60ch;
      font-size: clamp(1rem, .5vw + .9rem, 1.125rem);
      margin: 0;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:.6ch;
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(10,77,255,.15);
      box-shadow: 0 4px 12px rgba(10,77,255,.08);
      font-weight: 600;
    }
    .pill .dot{
      display:inline-block;
      inline-size:.65rem;
      block-size:.65rem;
      border-radius:999px;
      background: var(--yellow);
      position: relative;
      box-shadow: 0 0 0 3px rgba(255,213,0,.35);
      animation: innerGlow 2.2s ease-in-out infinite;
    }
    .pill .dot::after{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:inherit;
      background: radial-gradient(circle,
        rgba(255,213,0,.65) 0%,
        rgba(255,213,0,.35) 40%,
        rgba(255,213,0,0) 70%);
      transform: scale(0.85);
      opacity:.7;
      pointer-events:none;
      will-change: transform, opacity;
      animation: pulseGlow 1.8s ease-in-out infinite;
    }
    @keyframes pulseGlow{
      0%   { transform: scale(0.80); opacity:.45; }
      50%  { transform: scale(1.15); opacity:.95; }
      100% { transform: scale(0.80); opacity:.45; }
    }
    @keyframes innerGlow{
      0%,100% { box-shadow: 0 0 0 3px rgba(255,213,0,.35), 0 0 6px rgba(255,213,0,.35); }
      50%     { box-shadow: 0 0 0 3px rgba(255,213,0,.35), 0 0 12px rgba(255,213,0,.6); }
    }

    .btn{
      appearance:none;
      border:0;
      cursor:pointer;
      padding: 10px 16px;
      border-radius: 999px;
      font-weight:600;
      background: var(--blue);
      color: #fff;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.6ch;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.1s ease, box-shadow 0.2s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    }

    .ip-pill{
      display: inline-flex;
      align-items: center;
      gap: .6ch;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(10,77,255,.15);
      box-shadow: 0 2px 6px rgba(10,77,255,.08);
      font-size: 0.85rem;
      font-weight: 500;
    }
    .ip-pill .dot{
      inline-size: .55rem;
      block-size: .55rem;
      border-radius: 999px;
      background: var(--blue);
    }

    footer{
      font-size: .9rem;
      opacity: .8;
      padding: 18px 22px;
    }