/* ==========================================================================
   Components — wiederverwendbare Bausteine: Badge, Pill-Links, Button,
   Notify-Formular
   ========================================================================== */

/* ---------- parent pill ---------- */
.parent{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;
  padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.5);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.parent b{color:var(--ink);font-weight:700}
.parent .arr{transition:transform .2s ease}
.parent:hover{border-color:var(--violet);color:var(--ink);background:rgba(255,255,255,.85)}
.parent:hover .arr{transform:translate(2px,-2px)}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  padding:.5rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line-strong);
  margin:0 0 1.5rem;
}
.badge__dot{width:9px;height:9px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 0 0 rgba(255,46,139,.55);animation:pulse 2.4s ease-out infinite}

/* ---------- notify form ---------- */
.notify{margin:2.2rem 0 0;max-width:30rem}
.notify__row{display:flex;gap:.6rem;flex-wrap:wrap}
.notify__input{
  flex:1 1 14rem;min-width:0;
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);
  padding:.95rem 1.1rem;border:1.5px solid var(--line-strong);border-radius:14px;
  background:rgba(255,255,255,.72);transition:border-color .2s ease,background .2s ease;
}
.notify__input::placeholder{color:var(--ink-faint)}
.notify__input:focus{outline:none;border-color:var(--violet);background:#fff}
.btn{
  position:relative;overflow:hidden;cursor:pointer;
  font-family:var(--ff-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  color:var(--paper);background:var(--ink);
  border:none;border-radius:14px;padding:.95rem 1.4rem;
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  transition:transform .18s ease,box-shadow .25s ease;
}
.btn__grad{position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .25s ease;z-index:0}
.btn span{position:relative;z-index:1}
.btn .arr{position:relative;z-index:1;transition:transform .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(124,43,245,.6)}
.btn:hover .btn__grad{opacity:1}
.btn:hover .arr{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.notify__note{font-family:var(--ff-mono);font-size:.73rem;color:var(--ink-faint);margin:.85rem 0 0}

/* ---------- meanwhile link ---------- */
.meanwhile{
  display:inline-flex;align-items:center;gap:.5rem;margin:1.8rem 0 0;
  font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--line);padding-bottom:2px;
  transition:border-color .2s ease;
}
.meanwhile .arr{transition:transform .2s ease}
.meanwhile:hover{border-color:var(--pink)}
.meanwhile:hover .arr{transform:translate(3px,-3px)}