/* ====================================================================
   Vorlage „Abendlicht" · elegant und romantisch

   Cremeweisses Papier, eine Serifenschrift mit hohem Strichkontrast,
   gezeichnete Linien statt Rahmen. Die Seite soll sich anfühlen wie
   eine Karte, die jemand aus dem Umschlag zieht.

   DREI ENTSCHEIDUNGEN, DIE SIE VON EINER VORLAGE UNTERSCHEIDEN:

   1. Der Bogen über dem Kopfbild. Er ist kein Rechteck mit
      abgerundeten Ecken, sondern eine Ellipse oben und gerade
      Kanten unten · border-radius mit vier verschiedenen Werten.
      Genau daran erkennt man, ob eine Form gezeichnet oder
      voreingestellt ist.

   2. Die Ablaufleiste hat ihre Punkte NEBEN der Linie, nicht auf
      ihr. Eine Zeitleiste mit Punkten auf der Achse ist die
      Darstellung eines Projektplans; hier geht es um einen Abend.

   3. Kein einziger Schatten. Getrennt wird durch Haarlinie und
      Fläche.
   ==================================================================== */

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

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

.ev--abendlicht {
  --grund: #faf6f0;
  --grund-2: #f2ebe1;
  --schrift: #2b2420;
  --schrift-2: #6c5f56;
  --linie: #e0d5c7;

  --schrift-anzeige: "Cormorant", Georgia, "Times New Roman", serif;
  --schrift-text: "DM Sans", system-ui, sans-serif;

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

  /* Vorgabe, falls keine Akzentklasse gesetzt ist. */
  --akzent: #c08578;
  --akzent-text: #8c4b3d;
  --auf-akzent: #fffaf6;
}

/* Die Akzente. Je zwei Werte: die Fläche und die Schriftfarbe auf
   hellem Grund. Ein Wert allein wäre entweder als Fläche zu dunkel
   oder als Schrift zu hell · nachgerechnet gegen #faf6f0. */
.ev--abendlicht.akzent-rosenholz { --akzent: #c08578; --akzent-text: #8c4b3d; }
.ev--abendlicht.akzent-salbei    { --akzent: #8ca081; --akzent-text: #4d6042; }
.ev--abendlicht.akzent-nachtblau { --akzent: #5b6d8c; --akzent-text: #3a4a66; }
.ev--abendlicht.akzent-bernstein { --akzent: #c79a4a; --akzent-text: #856012; }
.ev--abendlicht.akzent-pflaume   { --akzent: #8d6480; --akzent-text: #6a4160; }

.ev--abendlicht { letter-spacing: 0.004em; }

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

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

.al-kopf {
  padding-top: clamp(3.5rem, 9vw, 7rem);
  text-align: center;
}

.al-anlass {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

.al-name {
  margin-top: 0.9rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(3rem, 1.4rem + 8vw, 7rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.al-titel {
  margin-top: 0.75rem;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  color: var(--schrift-2);
}

.al-schnoerkel {
  display: block;
  width: min(14rem, 46vw);
  margin: 1.75rem auto 0;
  color: var(--akzent);
}

.al-kopf .ev-termin { margin-top: 1.75rem; }
.al-kopf .ev-termin-tag {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.al-kopf .ev-termin-datum {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 400;
}

.al-kopf .ev-countdown { margin-top: 2.5rem; }
.al-kopf .ev-countdown-satz { justify-content: center; }

/* Der Bogen. Oben eine halbe Ellipse, unten gerade · vier
   verschiedene Radien. Ein gleichmäßiger Radius wäre eine Kachel. */
.al-bogenbild {
  width: min(38rem, calc(100% - 2 * var(--rand)));
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  border-radius: 50% 50% var(--ecke) var(--ecke) / 34% 34% var(--ecke) var(--ecke);
  overflow: hidden;
  background: var(--grund-2);
}
.al-bogenbild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 720px) {
  .al-bogenbild img { aspect-ratio: 3 / 2.4; }
}

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

.al-abschnitt { padding-block: clamp(2.75rem, 6vw, 4.75rem); }

.al-ueberschrift {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.008em;
  text-align: center;
  margin-bottom: 1.75rem;
}

/* Die feine Linie unter jeder Überschrift · gezeichnet, nicht
   gesetzt: Sie ist kurz und mittig und hört nicht an der Spaltenkante
   auf. */
.al-ueberschrift::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0.9rem auto 0;
  background: var(--akzent);
}

.al-brief { padding-top: clamp(3rem, 7vw, 5.5rem); }
.al-brieftext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

.al-fliess, .al-ortblock .ev-ort { text-align: center; }
.al-fliess { color: var(--schrift-2); max-width: 40ch; margin-inline: auto; }

.al-ortblock .ev-ort-name { font-family: var(--schrift-anzeige); font-size: 1.6rem; font-weight: 500; }
.al-ortblock .ev-ort-route a { justify-content: center; }

/* == Ablauf ========================================================= */

.al-ablaufblock { background: var(--grund-2); }

.al-ablaufblock .ev-ablauf {
  max-width: 30rem;
  margin-inline: auto;
}

.al-ablaufblock .ev-ablauf-punkt {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.1rem 0 1.1rem 0;
}

/* Die Linie läuft zwischen den Spalten, die Punkte sitzen darauf ·
   aber der letzte Punkt beendet sie, statt sie ins Leere laufen zu
   lassen. */
.al-ablaufblock .ev-ablauf-punkt::before {
  content: "";
  position: absolute;
  left: 5.25rem;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--linie);
}
.al-ablaufblock .ev-ablauf-punkt:first-child::before { top: 1.5rem; }
.al-ablaufblock .ev-ablauf-punkt:last-child::before { bottom: calc(100% - 1.6rem); }

.al-ablaufblock .ev-ablauf-punkt::after {
  content: "";
  position: absolute;
  left: 4.95rem;
  top: 1.35rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--akzent);
}

.al-ablaufblock .ev-ablauf-zeit {
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  text-align: right;
  color: var(--akzent-text);
}
.al-ablaufblock .ev-ablauf-text { padding-left: 0.5rem; }

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

.al-hinweisblock .ev-hinweise {
  display: grid;
  gap: 1.75rem;
}
.al-hinweisblock .ev-hinweis {
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.al-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.35rem;
  font-weight: 500;
}

@media (min-width: 720px) {
  .al-hinweisblock .ev-hinweise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; }
}

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

/* Spalten und kein Gitter: Hoch- und Querformate stehen dann
   nebeneinander, ohne dass eins beschnitten wird. */
.al-galerieblock .ev-galerie {
  columns: 2;
  column-gap: 1rem;
}
.al-galerieblock .ev-galerie-bild {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.al-galerieblock .ev-galerie-bild img { border-radius: var(--ecke); }
.al-galerieblock figcaption { text-align: center; font-family: var(--schrift-anzeige); font-size: 1.05rem; }

@media (min-width: 900px) { .al-galerieblock .ev-galerie { columns: 3; } }
@media (max-width: 520px) { .al-galerieblock .ev-galerie { columns: 1; } }

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

.al-rsvpblock { background: var(--grund-2); }
.al-rsvpblock .ev-feld input,
.al-rsvpblock .ev-feld textarea,
.al-rsvpblock .ev-antwort-wahl label { background: var(--grund); }

/* == Kontakt und Fuß ================================================ */

.al-kontaktblock { text-align: center; padding-bottom: 1rem; }
.al-kontaktblock .ev-kontakt h3::after {
  content: "";
  display: block;
  width: 2.5rem; height: 1px;
  margin: 0.7rem auto 0.9rem;
  background: var(--akzent);
}

.ev--abendlicht .ev-signatur { margin-top: 1.5rem; }

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

/* Ein einziger Auftritt, reines CSS.

   DER ANFANGSZUSTAND STEHT INNERHALB DER RUHE-ABFRAGE. Ein
   opacity: 0 ausserhalb liesse bei abgeschalteter Bewegung die halbe
   Seite unsichtbar · und das fällt beim Bauen nie auf, weil man
   selbst die Bewegung anhat.

   Keine Klasse .js davor: Dieser Bereich schickt script-src 'self'
   ohne 'unsafe-inline', der Einzeiler im Kopf ginge also gar nicht
   erst durch. Gebraucht wird er auch nicht · fill-mode "both" trägt
   den Anfangszustand, und wo die Regel nicht greift, steht das
   Element einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .al-name,
  .al-titel,
  .al-schnoerkel,
  .al-kopf .ev-termin {
    animation: al-auf 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .al-titel { animation-delay: 0.08s; }
  .al-schnoerkel { animation-delay: 0.16s; }
  .al-kopf .ev-termin { animation-delay: 0.24s; }
}

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