/* MOON SHOT — wiederverwendbare Bausteine (seitenübergreifend, komponentenfrei) */

/* Kleines Label über Headlines */
.kicker {
  font-size: .75rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* Buttons. Liegt auf <a> und auf <button> — deshalb muessen background und
   font hier explizit stehen: ein <button> bekommt vom Browser sonst seine
   eigene helle Flaeche und seine eigene Schrift, ein <a> nicht. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: none;
  border: 1px solid var(--line-loud);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.btn--solid {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--void);
}

.btn--solid:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--lg {
  padding: 15px 26px;
}

/* Scroll-Einblendung — .is-in setzt js/universe.js per IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Icon-Sprite. Das <svg class="sprite"> am Anfang von <body> haelt nur die
   <symbol>-Definitionen und darf selbst nichts einnehmen. */
.sprite {
  display: none;
}

/* Icons erben die Textfarbe, darum faerben Hover-Regeln sie automatisch mit —
   mit den alten <img> vom CDN war das nicht moeglich. */
.icon {
  display: block;
  flex: none;
  fill: currentColor;
}