/* ====================================================================
   Vorlage „Tierparade" · für die Kleinsten

   Der erste, zweite, dritte Geburtstag. Vier gezeichnete Tiere, sehr
   große Flächen, sehr wenig Text.

   DER TERMIN IST HIER EINE ÜBERSCHRIFT. Bei einem Fest für ein
   zweijähriges Kind ist er die eine Angabe, um die es geht. Deshalb
   steht .ev-termin-datum in Anzeigegröße und nicht in Fließtextgröße ·
   das ist der einzige Ort im ganzen Bereich, an dem eine Angabe aus
   dem Formular so groß wird wie eine Überschrift.

   ALLES IST GRÖSSER ALS ÜBLICH: Fließtext 1.125rem statt 1rem,
   Zeilenhöhe 1.6, die Kacheln mit mehr Luft. Wer mit einem Kleinkind
   am Arm liest, liest im Stehen und mit einer Hand.

   DIE TIERE HABEN JEDES SEINE FARBE, und keine davon ist der Akzent.
   Vier Tiere in derselben Farbe wären ein Muster; vier in der
   Akzentfarbe wären ein Fleck. Der Akzent führt stattdessen die
   Etiketten, die Uhrzeiten und die Knöpfe.
   ==================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/youngserif-latin.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--tierparade {
  --grund: #fffdf6;
  --grund-2: #fff4dd;
  --schrift: #23200e;
  --schrift-2: #5c543c;
  --linie: #efe0bf;

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

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

  --akzent: #f0a92b;
  --akzent-text: #8a5a03;
  --auf-akzent: #23200e;

  /* Die vier Tierfarben · fest und nicht aus dem Akzent gemischt.
     Sie sind Teil der Zeichnung und nicht Teil der Farbwahl. */
  --tier-1: #7ba7c4;
  --tier-2: #e0a03c;
  --tier-3: #a8785a;
  --tier-4: #b9a6d6;

  font-size: 1.0625rem;
}

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

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

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

.tp-kopf {
  padding-block: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--grund-2);
}

.tp-anlass {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tp-titel {
  margin-top: 1rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.4rem, 1.4rem + 5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

.tp-name {
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  color: var(--akzent-text);
}

/* Das Tierband · volle Breite, aber nach oben begrenzt. Ohne die
   Höhenbegrenzung wären die Tiere auf einem großen Bildschirm
   Zentimeter hoch und der Termin darunter nicht mehr zu sehen. */
.tp-band {
  display: block;
  width: min(100%, 34rem);
  height: auto;
  margin: clamp(1.25rem, 4vw, 2.25rem) auto 0;
}
.tp-tier { fill: currentColor; }
.tp-tier--1 { color: var(--tier-1); }
.tp-tier--2 { color: var(--tier-2); }
.tp-tier--3 { color: var(--tier-3); }
.tp-tier--4 { color: var(--tier-4); }

/* == Der Termin als Überschrift ===================================== */

.tp-termin { margin-top: clamp(1.25rem, 4vw, 2rem); }

.tp-termin .ev-termin-datum {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}
.tp-termin .ev-termin-tag,
.tp-termin .ev-termin-zeit {
  font-size: 1.125rem;
  font-weight: 600;
}

.tp-kopf .ev-countdown { margin-top: 1.25rem; }
/* .ev-countdown-satz ist ein Flexkasten (event.css) · text-align des
   Kopfes greift darin nicht, und die Zahl klebte links, während alles
   andere mittig stand. Gefunden am 18.08.2026 im Browser. */
.tp-kopf .ev-countdown-satz { justify-content: center; }
.tp-kopf .ev-countdown-zahl {
  font-family: var(--schrift-anzeige);
  color: var(--akzent-text);
}

/* == Das Bild ======================================================= */

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

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

.tp-abschnitt { padding-block: clamp(2rem, 5vw, 3.25rem); }

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

.tp-gruss { text-align: center; }
.tp-grusstext {
  font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.7rem);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}

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

/* == Kacheln ======================================================== */

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

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

/* Eine Spalte und kein Raster. Drei Punkte nebeneinander lesen sich
   als drei gleichwertige Dinge; hier ist es eine Reihenfolge. */
.tp-ablaufblock .ev-ablauf {
  display: grid;
  gap: 0.75rem;
}
.tp-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 1.1rem 1.25rem;
  border-radius: var(--ecke);
  background: var(--grund-2);
  border: 3px solid var(--linie);
}
.tp-ablaufblock .ev-ablauf-zeit {
  grid-row: 1 / span 2;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 1rem;
  font-weight: 800;
  align-self: start;
}
.tp-ablaufblock .ev-ablauf-titel {
  font-family: var(--schrift-anzeige);
  font-size: 1.2rem;
  font-weight: 400;
}
.tp-ablaufblock .ev-ablauf-satz { color: var(--schrift-2); }

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

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

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

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

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

.tp-rsvpblock { background: var(--grund-2); }
.tp-rsvpblock .ev-feld input,
.tp-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border-width: 3px;
  border-radius: var(--ecke);
  font-size: 1.0625rem;
}
.tp-rsvpblock .ev-antwort-wahl label { background: var(--grund); border-width: 3px; }
.tp-rsvpblock .ev-knopf { font-weight: 800; }

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

.tp-kontaktblock .ev-kontakt {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--ecke);
  border: 3px solid var(--linie);
}

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

   Nur ohne prefers-reduced-motion, und nur einmal · siehe die
   ausführliche Begründung in vorlage-abendlicht.css. Die Tiere kommen
   nacheinander, weil sie eine Parade sind. */

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

  .tp-tier { animation: tp-tier-auf 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .tp-tier--1 { animation-delay: 0.15s; }
  .tp-tier--2 { animation-delay: 0.2s; }
  .tp-tier--3 { animation-delay: 0.25s; }
  .tp-tier--4 { animation-delay: 0.3s; }
}

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

/* Eigener Auftritt für die Tiere: Sie sitzen in einem SVG mit eigenem
   Koordinatensystem, und ein translateY in Pixeln wäre dort etwas
   anderes als daneben. Deshalb nur Deckkraft und Maßstab. */
@keyframes tp-tier-auf {
  from { opacity: 0; scale: 0.8; }
  to   { opacity: 1; scale: 1; }
}