/* Messetermine (2026-09-28).
 *
 * AUFTRAGGEBER: „Messetermine website soll bitte noch ein wenig schöner im
 * HEPRO Style aussehen geht das?"
 *
 * WAS VORHER DA WAR, gemessen: zwei Einträge als schmucklose Zeilen zwischen
 * dünnen Linien — Name, darunter Zeitraum, Ort, Land. Darunter 800 px Leere.
 * Nichts daran war falsch, es war nur nichts.
 *
 * NUR GESTALTUNG, KEIN MARKUP: Der Pflegebereich LIEST diese Liste zurück,
 * um daraus wieder Felder zu machen (`pflege/src/messeliste.ts`,
 * `EINTRAG_MUSTER`). Wer hier `<li><h3>…</h3><p>…</p></li>` umbaut, bricht
 * den Rundlauf — und das fällt erst auf, wenn jemand einen Termin ändert und
 * die Seite leer zurückkommt. `scripts/messeliste-rundlauf-pruefen.mjs`
 * misst genau das. Deshalb bleibt die Struktur, und nur das Aussehen ändert
 * sich.
 *
 * DIE FORM IST ÜBERNOMMEN, NICHT ERFUNDEN — dieselbe wie bei den Anleitungen
 * und den Produktkacheln: Fläche `#f4f4f4`, zentrierter Text, Überschrift in
 * `ZapfHumanist601BT-Demi`, `#cd1619` als kurzer Strich. Kein Wert hier
 * steht nicht schon im Bestand der Website.
 */

/* ---- Die Liste ---------------------------------------------------------
 * Flexbox und nicht Grid, aus demselben gemessenen Grund wie bei den
 * Anleitungen: Bei zwei oder vier Terminen bliebe im Raster eine halbe Reihe
 * leer und klebte links. Flexbox zentriert eine unvollständige Reihe von
 * selbst. `flex: 0 1 …` ohne `grow`, sonst zöge ein einzelner Termin seine
 * Kachel über die ganze Seitenbreite. */
ul.messedaten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

ul.messedaten > li {
  flex: 0 1 calc((100% - 60px) / 3);
  min-width: 260px;
  background: #f4f4f4;
  padding: 30px 26px 28px;
  text-align: center;
  /* Die dünnen Trennlinien der Vorlage entfallen — die Fläche trennt jetzt. */
  border: 0;
  /* Die genauere Regel steht weiter unten: Die Vorlage setzt die Linie mit
     einem Vorfahren im Selektor, und der gewinnt gegen `ul.messedaten > li`. */
  position: relative;
  transition: background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

ul.messedaten > li:hover {
  background: #efedec;
  box-shadow: 0 10px 24px -6px rgba(28, 28, 28, 0.18);
}

/* Der kurze rote Strich über dem Namen — dieselbe Marke wie unter dem Logo,
   über dem Fuß und unter den Gruppenüberschriften der Anleitungen. */
ul.messedaten > li::before {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  background: #cd1619;
  margin: 0 auto 18px;
}

/* ---- Name --------------------------------------------------------------
 * Der Messename ist ein Eigenname („Fruit Attraction", „expoSE") und wird
 * deshalb NICHT in Versalien gesetzt — Versalien würden die Schreibweise
 * verfälschen, und expoSE schreibt sich bewusst so. */
ul.messedaten > li h3 {
  margin: 0 0 10px;
  font-family: 'ZapfHumanist601BT-Demi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: normal;
  line-height: 1.3;
  color: #1c1c1c;
}

/* ---- Zeitraum, Ort, Land ---------------------------------------------- */

ul.messedaten > li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3c3c3b;
}

/* Das Land steht in der Vorlage kursiv. Das bleibt — es unterscheidet die
   Auslandsmesse auf einen Blick, und die Auszeichnung war schon da. */
ul.messedaten .messeland {
  color: #5a5a59;
  font-style: italic;
}

/* ---- Handy ------------------------------------------------------------- */

@media (max-width: 991px) {
  ul.messedaten > li {
    flex-basis: calc((100% - 30px) / 2);
  }
}

@media (max-width: 767px) {
  ul.messedaten {
    gap: 20px;
  }
  ul.messedaten > li {
    flex-basis: 100%;
    min-width: 0;
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ul.messedaten > li {
    transition: none;
  }
}

/* ---- Die letzte Linie der Vorlage ---------------------------------------
 * Gemessen am 2026-09-28: Unter der letzten Kachel blieb ein dünner Strich
 * stehen. `ul.messedaten > li { border: 0 }` reichte nicht — die Vorlage
 * setzt ihn mit einem Vorfahren im Selektor und gewinnt damit. Ein Vorfahre
 * mehr auf dieser Seite dreht das um, ohne `!important`, das der nächsten
 * Regel wieder im Weg stünde. */
article ul.messedaten > li,
article ul.messedaten > li:first-child,
article ul.messedaten > li:last-child {
  border: 0;
}