/* ====================================================================
   Vorlage „Zauberwald" · verwunschen und sanft

   Heller Lilagrund, gezeichnete Blätter als Rahmen, Sterne, die sehr
   langsam atmen. Eine Serifenschrift mit weichen Enden.

   SIE IST NICHT ROSA · und das ist die wichtigste Zeile in dieser
   Datei. Der Konfigurator schlägt diese Vorlage vor, wenn jemand „für
   ein Mädchen" angibt. Daraus eine rosa Seite zu machen wäre die
   bequeme Antwort. Der Grund ist ein sehr helles Lila, die Vorgabe
   Flieder, und Rosenholz steht als eine von fünf Farben zur Wahl · für
   die, die es wirklich wollen.

   DIE BLÄTTER RAHMEN, SIE FÜLLEN NICHT. Links und rechts am Kopf, und
   unter 700 Punkten Breite ganz weg: Auf einem Telefon wären sie kein
   Rahmen mehr, sondern zwei Flecken über dem Namen.

   DIE STERNE ATMEN, SIE BLINKEN NICHT. Zehn Sekunden je Durchgang,
   drei Verzögerungen, und nur ohne prefers-reduced-motion. Der
   Unterschied zwischen atmen und blinken ist die Dauer, und er ist der
   Unterschied zwischen Stimmung und Störung.
   ==================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

.ev--zauberwald {
  --grund: #fdf7fc;
  --grund-2: #f6ecf6;
  --schrift: #241d2b;
  --schrift-2: #574c60;
  --linie: #e6d6e6;

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

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

  --akzent: #9b7bd4;
  --akzent-text: #6a4aa3;
  --auf-akzent: #fdf7fc;

  /* Das Laub ist immer grün und nie der Akzent. Ein lilanes Blatt ist
     kein Blatt · und wenn jemand Himbeere wählt, soll der Wald
     trotzdem ein Wald bleiben. */
  --laub: #86a67f;
}

.ev--zauberwald.akzent-flieder   { --akzent: #9b7bd4; --akzent-text: #6a4aa3; --auf-akzent: #fdf7fc; }
.ev--zauberwald.akzent-himbeere  { --akzent: #e0526f; --akzent-text: #a52840; --auf-akzent: #fdf7fc; }
.ev--zauberwald.akzent-rosenholz { --akzent: #c08578; --akzent-text: #8c4b3d; --auf-akzent: #241d2b; }
.ev--zauberwald.akzent-salbei    { --akzent: #8ca081; --akzent-text: #4d6042; --auf-akzent: #241d2b; }
.ev--zauberwald.akzent-lagune    { --akzent: #2aa3ac; --akzent-text: #1c6f76; --auf-akzent: #fdf7fc; }

.zw-innen {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.zw-innen--schmal { max-width: 42rem; }

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

.zw-kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in oklab, var(--akzent) 16%, transparent) 0%,
      transparent 70%),
    var(--grund);
  text-align: center;
}

.zw-kopfinnen { position: relative; }

/* Das Laub · gespiegelt statt zweimal gezeichnet. */
.zw-laub {
  position: absolute;
  bottom: 0;
  width: clamp(7rem, 14vw, 11rem);
  height: auto;
  color: var(--laub);
  fill: currentColor;
  opacity: 0.55;
  pointer-events: none;
}
.zw-laub--links  { left: -1rem; }
.zw-laub--rechts { right: -1rem; scale: -1 1; }

@media (max-width: 43.75rem) {
  /* Unter 700 Punkten sind sie kein Rahmen mehr · siehe den Kopf. */
  .zw-laub { display: none; }
}

/*
 * Die Sterne · Höhe begrenzt, Seitenverhältnis erhalten.
 *
 * Mit width: 100% und height: auto skalierte das ganze Bild mit der
 * Fensterbreite: Auf 1440 Punkten waren die Sterne handtellergroß und
 * einer lag auf dem Etikett. Jetzt begrenzt die Höhe den Maßstab, und
 * „meet" hält die Sterne rund statt sie zu ziehen · das Bild sitzt
 * dann mittig und ist auf sehr breiten Schirmen schmaler als die Seite.
 * Das ist richtig so: Es ist Schmuck über der Überschrift und keine
 * Tapete.
 */
.zw-sterne {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: clamp(7rem, 15vw, 11rem);
  color: var(--akzent);
  fill: currentColor;
  pointer-events: none;
}
.zw-stern { opacity: 0.45; }

.zw-anlass {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--akzent);
  color: var(--akzent-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zw-titel {
  margin-top: 1rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.3rem, 1.3rem + 5vw, 4.3rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

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

.zw-kopfinnen .ev-termin { margin-top: 1.5rem; }
.zw-kopfinnen .ev-termin-datum { font-family: var(--schrift-anzeige); font-size: 1.55rem; font-weight: 400; }
.zw-kopfinnen .ev-countdown { margin-top: 1rem; }
/* Mittig wie der ganze Kopf · .ev-countdown-satz ist ein Flexkasten,
   und text-align greift darin nicht. */
.zw-kopfinnen .ev-countdown-satz { justify-content: center; }
.zw-kopfinnen .ev-countdown-zahl { font-family: var(--schrift-anzeige); color: var(--akzent-text); }

/* Das Bild in einem Bogen · oben rund, unten gerade. Eine Tür in
   einen Wald, kein Kreis und kein Kasten. */
/* Schmaler als die Spalte · in voller Breite ist der Bogen so hoch,
   dass Termin und Countdown darüber aus dem Bild scrollen. */
.zw-kopfbild {
  max-width: 34rem;
  margin-inline: auto;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 50% 50% var(--ecke) var(--ecke) / 34% 34% var(--ecke) var(--ecke);
  overflow: hidden;
  border: 2px solid var(--linie);
  background: var(--grund-2);
}
.zw-kopfbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

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

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

.zw-ueberschrift {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 60;
  line-height: 1.12;
  margin-bottom: 1.1rem;
}

.zw-gruss {
  background: var(--grund-2);
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.zw-grusstext {
  font-size: clamp(1.2rem, 1rem + 1.3vw, 1.75rem);
  line-height: 1.45;
  font-weight: 400;
  text-wrap: pretty;
}

.zw-fliess { color: var(--schrift-2); line-height: 1.6; max-width: 52ch; }

.zw-kachel {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ecke);
  background: var(--grund-2);
  border: 1.5px solid var(--linie);
}
.zw-kachel .ev-ort-name { font-family: var(--schrift-anzeige); font-size: 1.35rem; font-weight: 400; }

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

   Als Pfad und nicht als Raster: eine Linie links, an der die Punkte
   hängen. Bei einer Geschichte gehört die Reihenfolge zur Sache, und
   ein Raster aus Kacheln zeigt keine. */

.zw-ablaufblock .ev-ablauf {
  display: grid;
  gap: 0;
  position: relative;
  padding-left: 1.75rem;
}
.zw-ablaufblock .ev-ablauf::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 2px;
  background: color-mix(in oklab, var(--akzent) 45%, transparent);
}
.zw-ablaufblock .ev-ablauf-punkt {
  position: relative;
  padding-block: 0.9rem;
}
.zw-ablaufblock .ev-ablauf-punkt::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 1.35rem;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.025rem;
  border-radius: 999px;
  background: var(--akzent);
}
.zw-ablaufblock .ev-ablauf-zeit {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.zw-ablaufblock .ev-ablauf-titel {
  font-family: var(--schrift-anzeige);
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 0.15rem;
}
.zw-ablaufblock .ev-ablauf-satz { color: var(--schrift-2); margin-top: 0.2rem; }

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

.zw-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.zw-hinweisblock .ev-hinweis {
  padding: 1.25rem 1.4rem;
  border-radius: var(--ecke);
  border: 1.5px solid var(--linie);
  background: var(--grund-2);
}
.zw-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.15rem;
  font-weight: 400;
}

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

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

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

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

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

.zw-kontaktblock .ev-kontakt {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ecke);
  border: 1.5px solid var(--linie);
  text-align: center;
}

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

@media (prefers-reduced-motion: no-preference) {
  .zw-anlass,
  .zw-titel,
  .zw-name,
  .zw-kopfbild {
    animation: zw-auf 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .zw-titel { animation-delay: 0.06s; }
  .zw-name { animation-delay: 0.12s; }
  .zw-kopfbild { animation-delay: 0.2s; }

  /* Zehn Sekunden je Durchgang. Das ist die Zahl, die aus Blinken
     Atmen macht · bei zwei Sekunden wäre es ein Warnlicht. */
  .zw-stern { animation: zw-atmen 10s ease-in-out infinite; }
  .zw-stern--2 { animation-delay: -3.3s; }
  .zw-stern--3 { animation-delay: -6.6s; }
}

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

@keyframes zw-atmen {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}