/* ====================================================================
   Vorlage „Raketenstart" · Weltraum, dunkel, mit Countdown

   Tiefer Nachtgrund, ein Sternenfeld, eine gezeichnete Rakete, und der
   Countdown als Hauptsache.

   DUNKEL IST NICHT SCHWARZ · dieselbe Regel wie bei der Lichterkette.
   Der Grund hat einen deutlichen Blaustich (#0e1330), die Flächen
   darüber einen Hauch mehr. Reines Schwarz sieht auf einem Telefon
   aus wie ein Ladefehler.

   DAS STERNENFELD IST EIN GRADIENT UND KEIN BILD. Vier
   radial-gradient mit unterschiedlicher Größe, gekachelt über zwei
   verschiedene Raster · das ergibt ein unregelmäßiges Feld aus zwei
   Regeln. Zweihundert Punkte als SVG wären zweihundert Formen, die
   ein altes Telefon zeichnen muss, damit im Hintergrund etwas
   glitzert.

   DER COUNTDOWN IST HIER DIE ÜBERSCHRIFT. .ev-countdown-zahl steht in
   Anzeigegröße, in der Monospace, mit einem Streifen darunter. Ohne
   JavaScript steht die vom Server gerechnete Zahl da · das Stylesheet
   macht sie groß, es rechnet sie nicht.

   DIE RAKETE FLIEGT NICHT. Nur der Zündstrahl wird langsam heller und
   dunkler, und nur ohne prefers-reduced-motion. Alles andere stünde
   dem Text im Weg.
   ==================================================================== */

@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

.ev--raketenstart {
  --grund: #0e1330;
  --grund-2: #171d3f;
  --schrift: #eef1ff;
  --schrift-2: #a9b1d8;
  --linie: #2a3160;

  --schrift-anzeige: "Figtree", system-ui, sans-serif;
  --schrift-text: "Figtree", system-ui, sans-serif;
  --schrift-mono: "Fragment Mono", ui-monospace, monospace;

  --ecke: 14px;
  --ecke-gross: 999px;
  --rand: clamp(1.25rem, 5vw, 3rem);

  --akzent: #2f5ecb;
  --akzent-text: #9db8f5;
  --auf-akzent: #eef1ff;

  /* Der Rumpf ist hell und nicht der Akzent: Eine Rakete in
     Himbeere auf dunklem Grund verschwindet, und eine in Kobalt auf
     Nachtblau erst recht. Der Akzent führt Fenster, Flamme und
     Etiketten. */
  --rumpf: #dfe4f7;
  --rumpf-2: #aeb6d8;
}

.ev--raketenstart.akzent-kobalt   { --akzent: #2f5ecb; --akzent-text: #9db8f5; --auf-akzent: #eef1ff; }
.ev--raketenstart.akzent-lagune   { --akzent: #2aa3ac; --akzent-text: #6ecbd4; --auf-akzent: #0e1330; }
.ev--raketenstart.akzent-sonne    { --akzent: #f0a92b; --akzent-text: #f2bd63; --auf-akzent: #0e1330; }
.ev--raketenstart.akzent-flieder  { --akzent: #9b7bd4; --akzent-text: #c1acef; --auf-akzent: #0e1330; }
.ev--raketenstart.akzent-himbeere { --akzent: #e0526f; --akzent-text: #f2909f; --auf-akzent: #0e1330; }

.rs-innen {
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.rs-innen--schmal { max-width: 44rem; }

/* == Kopfbereich ==================================================== */

.rs-kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}

/* Das Sternenfeld · zwei Raster, vier Punktgrößen, kein Bild.
   background-repeat kachelt sie, und weil die beiden Raster
   unterschiedlich groß sind, wiederholt sich das Muster erst nach
   sehr vielen Punkten. */
.rs-sternenfeld {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18px 24px, #ffffff 50%, transparent 55%),
    radial-gradient(1px 1px at 74px 58px, #cfd6ff 50%, transparent 55%),
    radial-gradient(2px 2px at 128px 16px, #ffffff 50%, transparent 55%),
    radial-gradient(1px 1px at 44px 104px, #9fb0ff 50%, transparent 55%);
  background-size: 160px 130px, 160px 130px, 210px 170px, 210px 170px;
  opacity: 0.75;
  /* Nach unten auslaufen · sonst hört das Feld an einer Kante auf, und
     eine Kante ist im Weltraum das Letzte, was man sehen will. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.rs-kopfinnen {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 54rem) {
  .rs-kopfinnen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; }
}

.rs-anlass {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 4px;
  border: 1.5px solid var(--akzent);
  color: var(--akzent-text);
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-titel {
  margin-top: 1rem;
  font-size: clamp(2.3rem, 1.3rem + 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rs-name {
  margin-top: 0.5rem;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 600;
  color: var(--akzent-text);
}

/* Der Countdown als Überschrift · mit Zündstreifen darunter. */
.rs-countdown { margin-top: 1.75rem; }
.rs-countdown .ev-countdown-zahl {
  font-family: var(--schrift-mono);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  line-height: 1;
  color: var(--akzent-text);
}
.rs-countdown .ev-countdown-wort,
.rs-countdown .ev-countdown-satz {
  font-family: var(--schrift-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-2);
}
.rs-countdown::after {
  content: "";
  display: block;
  width: min(100%, 16rem);
  height: 3px;
  margin-top: 0.9rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--akzent), transparent);
}

.rs-kopftext .ev-termin { margin-top: 1.25rem; }
.rs-kopftext .ev-termin-datum { font-family: var(--schrift-mono); font-size: 1.35rem; }
.rs-kopftext .ev-termin-tag,
.rs-kopftext .ev-termin-zeit { color: var(--schrift-2); }

/* == Die Rakete ===================================================== */

.rs-rakete { justify-self: center; }
.rs-rakete svg {
  display: block;
  width: clamp(9rem, 24vw, 15rem);
  height: auto;
  color: var(--rumpf-2);
}
.rs-rumpf   { fill: var(--rumpf); }
.rs-fluegel { fill: var(--rumpf-2); }
.rs-fenster { fill: var(--akzent); }
.rs-fenster-glas { fill: color-mix(in oklab, var(--akzent) 30%, #ffffff); }
.rs-flamme--aussen { fill: color-mix(in oklab, var(--akzent) 60%, #f0a92b); opacity: 0.55; }
.rs-flamme--innen  { fill: #f7d489; opacity: 0.85; }

/* == Abschnitte ===================================================== */

.rs-abschnitt { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.rs-ueberschrift {
  font-family: var(--schrift-mono);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 1rem;
}

.rs-gruss { background: var(--grund-2); }
.rs-grusstext {
  font-size: clamp(1.2rem, 1rem + 1.3vw, 1.7rem);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

.rs-fliess { color: var(--schrift-2); line-height: 1.65; max-width: 54ch; }

.rs-bild {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--ecke);
  overflow: hidden;
  border: 1px solid var(--linie);
}
.rs-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.rs-kachel {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ecke);
  background: var(--grund-2);
  border: 1px solid var(--linie);
}
.rs-kachel .ev-ort-name { font-size: 1.3rem; font-weight: 700; }
.rs-kachel .ev-ort-adresse { color: var(--schrift-2); }

/* == Ablauf als Startsequenz ========================================

   Die Uhrzeiten in Monospace und in einer eigenen Spalte · so stehen
   die Ziffern untereinander, und eine Liste von Uhrzeiten liest sich
   wie eine Sequenz und nicht wie ein Stundenplan. */

.rs-ablaufblock .ev-ablauf { display: grid; gap: 0; }
.rs-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.25rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--linie);
}
.rs-ablaufblock .ev-ablauf-punkt:last-child { border-bottom: 0; }
.rs-ablaufblock .ev-ablauf-zeit {
  grid-row: 1 / span 2;
  font-family: var(--schrift-mono);
  font-size: 1rem;
  color: var(--akzent-text);
  align-self: start;
  padding-top: 0.1rem;
}
.rs-ablaufblock .ev-ablauf-titel { font-size: 1.15rem; font-weight: 700; }
.rs-ablaufblock .ev-ablauf-satz { color: var(--schrift-2); }

/* == Hinweise ======================================================= */

.rs-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.rs-hinweisblock .ev-hinweis {
  padding: 1.25rem 1.4rem;
  border-radius: var(--ecke);
  border: 1px solid var(--linie);
  background: var(--grund-2);
}
.rs-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* == Galerie ======================================================== */

.rs-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.rs-galerieblock .ev-galerie-bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ecke);
  border: 1px solid var(--linie);
}
.rs-galerieblock figcaption { color: var(--schrift-2); }

/* == Zu- und Absage ================================================= */

.rs-rsvpblock { background: var(--grund-2); }
.rs-rsvpblock .ev-feld input,
.rs-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border-color: var(--linie);
  color: var(--schrift);
  border-radius: var(--ecke);
}
.rs-rsvpblock .ev-antwort-wahl label { background: var(--grund); border-color: var(--linie); }
.rs-rsvpblock .ev-knopf { font-weight: 700; }

/* == Kontakt ======================================================== */

.rs-kontaktblock .ev-kontakt {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ecke);
  border: 1px solid var(--linie);
}

/* == Auftritt ======================================================= */

@media (prefers-reduced-motion: no-preference) {
  .rs-anlass,
  .rs-titel,
  .rs-name,
  .rs-countdown {
    animation: rs-auf 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .rs-titel { animation-delay: 0.06s; }
  .rs-name { animation-delay: 0.12s; }
  .rs-countdown { animation-delay: 0.24s; }

  .rs-rakete { animation: rs-auf-rakete 1s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Der Strahl · vier Sekunden, damit es Glühen ist und kein Flackern.
     transform-origin oben, damit die Flamme unten länger wird und
     nicht in der Mitte wächst. */
  .rs-rakete-strahl {
    transform-origin: 100px 248px;
    animation: rs-glut 4s ease-in-out infinite;
  }
}

@keyframes rs-auf {
  from { opacity: 0; transform: translateY(0.9rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes rs-auf-rakete {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes rs-glut {
  0%, 100% { transform: scaleY(0.86); opacity: 0.75; }
  50%      { transform: scaleY(1.06); opacity: 1; }
}