/* ====================================================================
   Vorlage „Blumenkranz" · botanisch und weich

   Gezeichnete Zweige rahmen den Namen, zwischen den Abschnitten
   steht ein Blatt statt einer Linie.

   DIE MITTELACHSE IST HIER RICHTIG, und das ist die Ausnahme. Sonst
   gilt in diesem Bereich, dass zentrierter Fließtext schlechter zu
   lesen ist als linksbündiger · das stimmt weiterhin und gilt auch
   hier für alles ab dem zweiten Satz. Der Kopf dagegen IST ein
   Kranz, und ein Kranz um linksbündigen Text ist kein Kranz.

   Deshalb die Teilung: Kopf, Überschriften und Blätter stehen
   mittig, jeder Absatz mit mehr als drei Zeilen linksbündig.
   ==================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/youngserif-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

.ev--blumenkranz {
  --grund: #fbfaf6;
  --grund-2: #f2f1e8;
  --schrift: #2a2e26;
  --schrift-2: #5f6459;
  --linie: #dfded1;

  --schrift-anzeige: "Young Serif", Georgia, serif;
  --schrift-text: "DM Sans", system-ui, sans-serif;

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

  --akzent: #8ca081;
  --akzent-text: #4d6042;
  --auf-akzent: #fbfaf6;
}

.ev--blumenkranz.akzent-salbei    { --akzent: #8ca081; --akzent-text: #4d6042; --auf-akzent: #fbfaf6; }
.ev--blumenkranz.akzent-rosenholz { --akzent: #c08578; --akzent-text: #8c4b3d; --auf-akzent: #fbfaf6; }
.ev--blumenkranz.akzent-flieder   { --akzent: #9b7bd4; --akzent-text: #6a4aa3; --auf-akzent: #fbfaf6; }
.ev--blumenkranz.akzent-bernstein { --akzent: #c79a4a; --akzent-text: #856012; --auf-akzent: #2a2e26; }
.ev--blumenkranz.akzent-nachtblau { --akzent: #5b6d8c; --akzent-text: #3a4a66; --auf-akzent: #fbfaf6; }

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

/* == Der Kranz ======================================================

   Drei Rasterspalten: Zweig, Text, Zweig. Auf schmalen Fenstern
   fallen die Zweige weg statt zu schrumpfen · ein 2 cm breiter Zweig
   auf einem Telefon ist ein Fussel und kein Zweig. */

.bk-kopf {
  padding-top: clamp(2.5rem, 7vw, 4.5rem);
  text-align: center;
}

/* Der Kopf ist breiter als der Rest · sonst teilen sich Name und
   zwei Zweige vierzig Zeichen, und ein Name wie „Frieda · Hanna und
   Ole" bricht dreimal um. Alles unter dem Kopf bleibt bei 40rem,
   weil das die Breite ist, in der sich Fließtext gut liest. */
.bk-kopf .bk-innen--schmal { max-width: 54rem; }

.bk-kranz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
}

@media (min-width: 560px) {
  .bk-kranz {
    grid-template-columns: clamp(4.5rem, 11vw, 7.5rem) minmax(0, 1fr) clamp(4.5rem, 11vw, 7.5rem);
    gap: 0 clamp(0.75rem, 2.5vw, 2rem);
  }
}

.bk-zweig {
  width: 100%;
  height: auto;
  color: var(--akzent);
}
.bk-zweig--rechts { transform: scaleX(-1); }

/* Unter 560 Punkten stehen die Zweige nicht neben, sondern gar nicht
   da · siehe oben. */
@media (max-width: 559.98px) {
  .bk-zweig { display: none; }
}

.bk-anlass {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

.bk-name {
  margin-top: 0.9rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}
.bk-titel {
  margin-top: 0.7rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color: var(--schrift-2);
}

.bk-kopf .ev-termin { margin-top: 2rem; }
.bk-kopf .ev-termin-datum { font-family: var(--schrift-anzeige); font-size: 1.7rem; font-weight: 400; }
.bk-kopf .ev-countdown { margin-top: 1.25rem; }
.bk-kopf .ev-countdown-satz { justify-content: center; }
.bk-kopf .ev-countdown-fein { text-align: center; }

/* Das Bild in einem sehr flachen Bogen · kein Kreis, kein Rechteck. */
.bk-kopfbild {
  max-width: 66rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-inline: var(--rand);
}
.bk-kopfbild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 50% 50% var(--ecke) var(--ecke) / 14% 14% var(--ecke) var(--ecke);
}

/* == Das Blatt als Trenner ========================================== */

.bk-blatt {
  display: block;
  width: 7.5rem;
  height: auto;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  color: var(--akzent);
}

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

.bk-abschnitt { padding-block: clamp(2.25rem, 5vw, 3.5rem); text-align: center; }

.bk-ueberschrift {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

.bk-gruss { background: var(--grund-2); }
.bk-grusstext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Ab hier linksbündig · siehe die Begründung ganz oben. */
.bk-fliess,
.bk-ablaufblock .ev-ablauf,
.bk-hinweisblock .ev-hinweise {
  text-align: left;
  margin-inline: auto;
  max-width: 34rem;
}
.bk-fliess { color: var(--schrift-2); }

.bk-abschnitt .ev-ort-name { font-family: var(--schrift-anzeige); font-size: 1.35rem; font-weight: 400; }
.bk-abschnitt .ev-orte--mehrere { text-align: left; max-width: 34rem; margin-inline: auto; }

/* == Ablauf =========================================================
   Zwei Spalten: die Uhrzeit rechtsbündig in ihrer eigenen, damit
   die Zahlen untereinander stehen. Keine Linie, kein Punkt · in
   dieser Vorlage trennt das Blatt, und alles andere wäre ein zweites
   Gliederungsmittel für dieselbe Aufgabe. */

.bk-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 0.85rem;
}
.bk-ablaufblock .ev-ablauf-punkt + .ev-ablauf-punkt { border-top: 1px solid var(--linie); }
.bk-ablaufblock .ev-ablauf-zeit {
  text-align: right;
  color: var(--akzent-text);
  font-weight: 500;
  padding-top: 0.15rem;
}
.bk-ablaufblock .ev-ablauf-text { grid-column: 2; }
.bk-ablaufblock .ev-ablauf-titel { font-family: var(--schrift-anzeige); font-size: 1.15rem; font-weight: 400; }

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

.bk-hinweisblock .ev-hinweis + .ev-hinweis { margin-top: 1.5rem; }
.bk-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--akzent-text);
}

/* == Galerie ========================================================
   Drei Bilder in einer Reihe, das mittlere etwas höher · so
   entsteht der Bogen, den auch das Kopfbild hat. */

.bk-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
  align-items: center;
}
.bk-galerieblock .ev-galerie-bild img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ecke);
}
.bk-galerieblock .ev-galerie-bild:nth-child(even) img { aspect-ratio: 4 / 4.6; }
.bk-galerieblock figcaption { text-align: center; }

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

.bk-rsvpblock { background: var(--grund-2); }
.bk-rsvpblock .ev-rsvp { text-align: left; }
.bk-rsvpblock .ev-feld input,
.bk-rsvpblock .ev-feld textarea { background: var(--grund); }
.bk-rsvpblock .ev-antwort-wahl label { background: var(--grund); }
.bk-rsvpblock .ev-rsvp-danke { background: var(--grund); }
.bk-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-weight: 400; }

/* == Auftritt =======================================================
   Die Zweige wachsen von unten in den Kopf hinein. Der Anfangs-
   zustand steht nur innerhalb der Ruhe-Abfrage · ohne Animation
   stehen sie schlicht da. */

@media (prefers-reduced-motion: no-preference) {
  .bk-zweig { animation: bk-wachsen 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .bk-zweig--rechts { animation-name: bk-wachsen-rechts; animation-delay: 0.1s; }
  .bk-anlass, .bk-name, .bk-titel {
    animation: bk-auf 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .bk-name { animation-delay: 0.08s; }
  .bk-titel { animation-delay: 0.16s; }
}

/* Zwei Bildfolgen, weil der rechte Zweig gespiegelt ist: Eine
   gemeinsame würde scaleX(-1) überschreiben und ihn im Auftritt
   herumdrehen. */
@keyframes bk-wachsen {
  from { opacity: 0; transform: translateY(1.5rem) scaleX(1); }
  to   { opacity: 1; transform: translateY(0) scaleX(1); }
}
@keyframes bk-wachsen-rechts {
  from { opacity: 0; transform: translateY(1.5rem) scaleX(-1); }
  to   { opacity: 1; transform: translateY(0) scaleX(-1); }
}
@keyframes bk-auf {
  from { opacity: 0; transform: translateY(0.7rem); }
  to   { opacity: 1; transform: none; }
}