/* ====================================================================
   Vorlage „Konfetti" · laut und zum Anfassen

   Beim Öffnen fällt Konfetti über die Seite. Danach bleibt eine Seite
   aus kräftigen Bändern, sehr fetter Grotesk und Knöpfen, die wie
   Bonbons aussehen.

   DER UNTERSCHIED ZUR SOMMERWIESE ist nicht die Farbe, sondern die
   Härte. Sommerwiese ist gewachsen und gerundet · alles organisch,
   nichts symmetrisch. Konfetti ist gestanzt: gerade Kanten, volle
   Flächen, Versalien, harte Farbwechsel zwischen den Bändern. Beide
   sind fröhlich, aber keine ist die andere in Bunt.
   ==================================================================== */

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

.ev--konfetti {
  --grund: #fffdf9;
  --grund-2: #fff2dd;
  --schrift: #1d1a24;
  --schrift-2: #58515f;
  --linie: #e6d9c4;

  --schrift-anzeige: "Figtree", system-ui, sans-serif;
  --schrift-text: "Figtree", system-ui, sans-serif;

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

  --akzent: #e0526f;
  --akzent-text: #a52840;
  --auf-akzent: #fffdf9;

  /* Die fünf Konfettifarben. Sie stehen fest und wechseln NICHT mit
     dem Akzent: Konfetti in fünf Tönen einer Farbe ist kein Konfetti,
     sondern ein Farbverlauf. Der Akzent kommt als sechste Farbe dazu
     und bindet den Regen an die Seite. */
  --schnipsel-1: #e0526f;
  --schnipsel-2: #f0a92b;
  --schnipsel-3: #2aa3ac;
  --schnipsel-4: #63ad3c;
  --schnipsel-5: #9b7bd4;
}

.ev--konfetti.akzent-himbeere { --akzent: #e0526f; --akzent-text: #a52840; --auf-akzent: #fffdf9; }
.ev--konfetti.akzent-lagune   { --akzent: #2aa3ac; --akzent-text: #1c6f76; --auf-akzent: #fffdf9; }
.ev--konfetti.akzent-sonne    { --akzent: #f0a92b; --akzent-text: #8a5a03; --auf-akzent: #1d1a24; }
.ev--konfetti.akzent-flieder  { --akzent: #9b7bd4; --akzent-text: #6a4aa3; --auf-akzent: #fffdf9; }
.ev--konfetti.akzent-wiese    { --akzent: #63ad3c; --akzent-text: #3f6f24; --auf-akzent: #1d1a24; }

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

/* == Der Konfettiregen ==============================================

   EIN RASTER STATT VIERUNDDREISSIG EINZELWERTEN. Jeder Schnipsel
   braucht eine eigene Spalte, und die käme sonst aus einer Stilangabe
   im Markup · die verwirft die Sicherheitsrichtlinie. Zwölf
   Rasterspalten geben sie geschenkt, und drei Reihen darüber machen
   aus 36 Schnipseln eine Wolke statt einer Linie.

   Alles Weitere kommt aus nth-child mit teilerfremden Schrittweiten:
   Form aus 3, Fallweg aus 4, Tempo aus 5, Farbe aus 6, Verzug aus 7.
   So wiederholt sich innerhalb von 36 Schnipseln keine Kombination.

   pointer-events: none ist keine Feinheit, sondern die Bedingung
   dafür, dass das hier überhaupt sein darf: Der Regen liegt über der
   ganzen Seite, und niemand soll drei Sekunden lang gegen eine
   unsichtbare Scheibe tippen.
   ================================================================== */

.kf-konfetti {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1.5rem;
  justify-items: center;
  pointer-events: none;
  overflow: hidden;
  height: 100vh;
}

.kf-schnipsel {
  width: 0.65rem;
  height: 0.95rem;
  background: var(--akzent);
  opacity: 0;
  will-change: transform, opacity;
}

/* Form · drei Sorten, aus der 3er-Reihe */
.kf-schnipsel:nth-child(3n+1) { border-radius: 2px; }
.kf-schnipsel:nth-child(3n+2) { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.kf-schnipsel:nth-child(3n)   { width: 0.3rem; height: 1.2rem; border-radius: 2px; }

/* Farbe · aus der 6er-Reihe, die sechste ist der Akzent der Seite */
.kf-schnipsel:nth-child(6n+1) { background: var(--schnipsel-1); }
.kf-schnipsel:nth-child(6n+2) { background: var(--schnipsel-2); }
.kf-schnipsel:nth-child(6n+3) { background: var(--schnipsel-3); }
.kf-schnipsel:nth-child(6n+4) { background: var(--schnipsel-4); }
.kf-schnipsel:nth-child(6n+5) { background: var(--schnipsel-5); }
.kf-schnipsel:nth-child(6n)   { background: var(--akzent); }

/*
 * Der Fall selbst · nur wenn niemand um Ruhe gebeten hat.
 *
 * Der Anfangszustand steht auf opacity: 0 und bleibt es ohne
 * Animation. Wer prefers-reduced-motion gesetzt hat, bekommt gar
 * nichts zu sehen · und zusätzlich schaltet die Abfrage ganz unten
 * den Regen komplett ab, damit er nicht als unsichtbare Schicht
 * stehen bleibt.
 */
@media (prefers-reduced-motion: no-preference) {
  .kf-schnipsel:nth-child(4n+1) { animation: kf-fall-a 3.4s cubic-bezier(0.35, 0, 0.7, 1) forwards; }
  .kf-schnipsel:nth-child(4n+2) { animation: kf-fall-b 3.4s cubic-bezier(0.35, 0, 0.7, 1) forwards; }
  .kf-schnipsel:nth-child(4n+3) { animation: kf-fall-c 3.4s cubic-bezier(0.35, 0, 0.7, 1) forwards; }
  .kf-schnipsel:nth-child(4n)   { animation: kf-fall-d 3.4s cubic-bezier(0.35, 0, 0.7, 1) forwards; }

  .kf-schnipsel:nth-child(5n+1) { animation-duration: 2.9s; }
  .kf-schnipsel:nth-child(5n+2) { animation-duration: 3.6s; }
  .kf-schnipsel:nth-child(5n+3) { animation-duration: 4.3s; }
  .kf-schnipsel:nth-child(5n+4) { animation-duration: 3.2s; }
  .kf-schnipsel:nth-child(5n)   { animation-duration: 3.9s; }

  .kf-schnipsel:nth-child(7n+1) { animation-delay: 0s; }
  .kf-schnipsel:nth-child(7n+2) { animation-delay: 0.12s; }
  .kf-schnipsel:nth-child(7n+3) { animation-delay: 0.28s; }
  .kf-schnipsel:nth-child(7n+4) { animation-delay: 0.41s; }
  .kf-schnipsel:nth-child(7n+5) { animation-delay: 0.55s; }
  .kf-schnipsel:nth-child(7n+6) { animation-delay: 0.7s; }
  .kf-schnipsel:nth-child(7n)   { animation-delay: 0.86s; }
}

/* Vier Fallwege. Sie unterscheiden sich in der seitlichen Drift und
   in der Drehachse · ein Schnipsel, der senkrecht fällt und sich um
   sich selbst dreht, sieht aus wie ein Ladebalken.

   Am Ende steht opacity: 0 UND eine Position unterhalb des Fensters.
   forwards hält beides · so bleibt nach dem Regen nichts stehen,
   auch nicht durchsichtig. */
@keyframes kf-fall-a {
  0%   { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0deg); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(3.5rem, 105vh, 0) rotate(540deg); }
}
@keyframes kf-fall-b {
  0%   { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0deg) scaleX(1); }
  8%   { opacity: 1; }
  50%  { transform: translate3d(-2rem, 45vh, 0) rotate(-260deg) scaleX(-1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-4.5rem, 105vh, 0) rotate(-620deg) scaleX(1); }
}
@keyframes kf-fall-c {
  0%   { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(15deg); }
  8%   { opacity: 1; }
  40%  { transform: translate3d(2.5rem, 36vh, 0) rotate(200deg); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-1.5rem, 105vh, 0) rotate(760deg); }
}
@keyframes kf-fall-d {
  0%   { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(-20deg) scaleY(1); }
  8%   { opacity: 1; }
  55%  { transform: translate3d(-3rem, 52vh, 0) rotate(180deg) scaleY(-1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(1rem, 105vh, 0) rotate(430deg) scaleY(1); }
}

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

.kf-kopf {
  position: relative;
  padding-top: clamp(2.5rem, 7vw, 4.5rem);
  background: var(--grund-2);
}

.kf-anlass {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  rotate: -1.5deg;
}

.kf-titel {
  margin-top: 1.1rem;
  font-size: clamp(2.8rem, 1rem + 8vw, 6rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.kf-name {
  margin-top: 0.8rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 800;
  color: var(--akzent-text);
}

/* Termin und Countdown nebeneinander in einem weissen Streifen. */
.kf-terminband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.4rem;
  background: var(--grund);
  border: 3px solid var(--schrift);
  border-radius: var(--ecke);
}
.kf-terminband .ev-termin-tag { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }
.kf-terminband .ev-termin-datum { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.kf-terminband .ev-countdown-zahl { font-weight: 900; }

.kf-kopfbild {
  max-width: 68rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding-inline: var(--rand);
}
.kf-kopfbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 6px solid var(--grund);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 3px var(--schrift);
}

/* Die Zacken schliessen den Kopf ab wie eine ausgeschnittene
   Girlande · und nicht wie eine Kante. */
.kf-zacken {
  display: block;
  width: 100%;
  height: clamp(1.6rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  color: var(--grund-2);
  background: var(--grund);
}

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

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

.kf-ueberschrift {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.kf-gruss { background: var(--akzent); color: var(--auf-akzent); }
.kf-grusstext {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1.32;
  text-wrap: pretty;
}

.kf-fliess { color: var(--schrift-2); max-width: 54ch; font-size: 1.0625rem; }

.kf-block {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 3px solid var(--schrift);
  border-radius: var(--ecke);
  background: var(--grund-2);
}
.kf-block--ort .ev-ort-name { font-size: 1.4rem; font-weight: 800; }

/* == Ablauf =========================================================
   Eine Kette: die Uhrzeit in einem vollen Kreis, daneben der Punkt.
   Die gestrichelte Linie liegt als Rand am Listenelement und wächst
   deshalb mit der Schriftgröße mit. */

/*
 * EINE DURCHGEHENDE KETTE, kein Strich je Punkt.
 *
 * Die gestrichelte Linie liegt an der Liste und läuft von der Mitte
 * des ersten Kreises bis zur Mitte des letzten. Die Kreise sind
 * undurchsichtig und liegen darüber · so sieht man die Kette nur in
 * den Lücken, und die Striche stehen über alle Punkte hinweg im
 * selben Rhythmus.
 *
 * Ein Strich JE Punkt wäre der naheliegende Weg gewesen und sah
 * nachgemessen falsch aus: Er bekommt nur die Lücke zwischen zwei
 * Kreisen, das sind knapp anderthalb Zeilen, und darin ist eine
 * gestrichelte Linie kaum als solche zu erkennen.
 */
.kf-ablaufblock .ev-ablauf { position: relative; }
.kf-ablaufblock .ev-ablauf::before {
  content: "";
  position: absolute;
  left: 2.25rem;
  top: 2.25rem;
  bottom: 2.25rem;
  border-left: 3px dashed var(--akzent);
  opacity: 0.45;
}

.kf-ablaufblock .ev-ablauf-punkt {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
  padding-bottom: 1.6rem;
}
.kf-ablaufblock .ev-ablauf-punkt:last-child { padding-bottom: 0; }

.kf-ablaufblock .ev-ablauf-zeit {
  position: relative;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 900;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* Feste zweite Spalte · ein Punkt ohne Uhrzeit rutscht sonst unter
   die Kreise und die Kette läuft mitten durch den Text. */
.kf-ablaufblock .ev-ablauf-text { grid-column: 2; padding-top: 0.9rem; }
.kf-ablaufblock .ev-ablauf-titel { font-size: 1.2rem; font-weight: 800; }
.kf-ablaufblock .ev-ablauf-satz { margin-top: 0.2rem; }

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

.kf-hinweisblock { background: var(--grund-2); }
.kf-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.kf-hinweisblock .ev-hinweis {
  padding: 1.2rem 1.35rem;
  background: var(--grund);
  border: 3px solid var(--schrift);
  border-radius: var(--ecke);
}
.kf-hinweisblock .ev-hinweis h3 {
  font-size: 0.9375rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--akzent-text);
}

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

.kf-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.kf-galerieblock .ev-galerie-bild img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 5px solid var(--grund);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 3px var(--schrift);
}
.kf-galerieblock figcaption { text-align: center; font-weight: 600; }

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

.kf-rsvpblock { background: var(--grund-2); }
.kf-rsvpblock .ev-feld input,
.kf-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border: 3px solid var(--schrift);
  border-radius: var(--ecke);
}
.kf-rsvpblock .ev-antwort-wahl label {
  background: var(--grund);
  border: 3px solid var(--schrift);
  font-weight: 800;
}
.kf-rsvpblock .ev-knopf {
  border: 3px solid var(--schrift);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kf-rsvpblock .ev-rsvp-danke { border: 3px solid var(--schrift); background: var(--grund); }
.kf-rsvpblock .ev-rsvp-danke-gross { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }

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

.kf-kontaktblock .ev-kontakt {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 3px solid var(--schrift);
  border-radius: var(--ecke);
  background: var(--grund-2);
}
.kf-kontaktblock .ev-kontakt h3 { font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; }

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

@media (prefers-reduced-motion: no-preference) {
  .kf-anlass,
  .kf-titel,
  .kf-name,
  .kf-terminband {
    animation: kf-auf 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .kf-titel { animation-delay: 0.05s; }
  .kf-name { animation-delay: 0.11s; }
  .kf-terminband { animation-delay: 0.17s; }
}

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

/* == Ruhe und Papier ================================================

   Unter prefers-reduced-motion setzt event.css alle Animationen auf
   0,001 ms. Der Regen wäre dann ein Aufblitzen · noch schlechter als
   der Regen selbst. Deshalb steht er dort gar nicht erst da.

   Auf Papier ebenfalls nicht: Ein Ausdruck am Kühlschrank braucht
   36 farbige Rechtecke nicht. */
@media (prefers-reduced-motion: reduce) {
  .kf-konfetti { display: none; }
}

@media print {
  .kf-konfetti, .kf-zacken { display: none; }
  .kf-gruss { background: #fff; color: #000; }
}