/* ============================================
   ECX 40 - Veranstaltungen (DEGEA live)
   Werte aus dem Entwurf, Klassen mit ecx-Praefix.
   Responsive nach docs/DECISIONS.md.
   ============================================ */

.ecx-events { background: var(--bg); padding: 56px 0 64px; }

.ecx-events__kopf { margin-bottom: 22px; }
.ecx-events__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ec-red);
}
.ecx-events .ecx-events__titel {
  font-size: var(--t-h2); font-weight: 700; color: var(--ink);
  margin: 8px 0 0; line-height: 1.2;
}

.ecx-events__grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start;
}
.ecx-events__spalte { min-width: 0; }
.ecx-events__seite { min-width: 0; }

/* ---- Filterzeile ---- */
.ecx-events__filterzeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.ecx-events__filter { display: flex; gap: 6px; flex-wrap: wrap; }
.ecx-events__filterknopf {
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: var(--ink-3); background: transparent; border: 0; cursor: pointer;
  min-height: 44px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ecx-events__filterknopf:hover { background: #fff; color: var(--ink); }
.ecx-events__filterknopf.ecx-is-active { background: var(--ec-blue); color: #fff; }

.ecx-events__alle {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ec-red); font-weight: 600; font-size: 14px;
  text-decoration: none; padding: 8px 0; min-height: 44px;
}
.ecx-events__alle svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.ecx-events__alle:hover { color: var(--ec-red); }
.ecx-events__alle:hover svg { transform: translateX(4px); }

/* ---- Terminkarten ---- */
.ecx-events__liste { display: flex; flex-direction: column; gap: 14px; }

.ecx-event {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center;
  padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  /* position fuer die Sprungmarkierung weiter unten. */
  position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ecx-event:hover { border-color: #c8d3e0; transform: translateY(-1px); }
.ecx-event[hidden] { display: none; }

/* ============================================
   Sprungmarkierung: die vom Kalender
   angesprungene Karte
   ============================================

   ALS EIGENE EBENE UEBER DER KARTE, nicht als Rahmen und Hintergrund
   der Karte selbst. Der Grund ist das Ausblenden: liefe die Markierung
   ueber border-color und background der Karte, muesste sie am Ende auf
   deren Normalwerte zurueckblenden - und die sind nicht bei allen
   Karten gleich. Die erste Karte der Liste (--featured) hat einen
   eigenen Rahmen und Schatten, sie haette am Schluss sichtbar
   umgesprungen. Eine Ebene, deren Deckkraft von 1 auf 0 geht, laesst
   die Karte darunter unberuehrt.

   WAS SIE ZEIGT: einen roten Ring innen, einen hellen Hof aussen und
   einen sehr leichten roten Schleier ueber der Karte. Der Schleier
   liegt bei 7 Prozent - genug, damit die Karte sich abhebt, wenig
   genug, dass der Text darunter unveraendert lesbar bleibt.

   KEIN BLINKEN. Die Markierung faehrt einmal auf, steht still und
   verschwindet. Ein Pulsieren zoege den Blick immer wieder neu an,
   obwohl die Frage nach dem ersten Hinsehen beantwortet ist.

   DIE ZEITEN stehen in js/events.js und sind dort begruendet.
*/
.ecx-event.ecx-is-ziel::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(234, 53, 93, .07);
  box-shadow:
    inset 0 0 0 2px var(--ec-red),
    0 0 0 6px var(--ec-red-50),
    0 10px 28px rgba(234, 53, 93, .18);
  /*
   * SICHTBAR IST DER RUHEZUSTAND, die Animation blendet nur auf.
   *
   * Bewusst OHNE animation-fill-mode: both. Mit "both" haelt der
   * Browser vor und nach dem Lauf den Zustand der Keyframes - und der
   * beginnt bei opacity 0. Laeuft die Animation einmal nicht an, etwa
   * weil der Tab im Hintergrund steht oder Animationen abgeschaltet
   * sind, bliebe die Markierung unsichtbar. Genau das ist beim Bau am
   * 09.09.2026 gemessen worden.
   *
   * Ohne fill-mode gilt ausserhalb des Laufs, was hier steht: voll
   * sichtbar. Die Animation ist dann eine Zugabe, keine Bedingung.
   */
  opacity: 1;
  animation: ecx-ziel-auf 240ms var(--ease);
}

/*
 * Aufblenden aus dem Nichts. Nur einmal, kein Wechselspiel - die
 * Markierung soll auffallen, nicht rufen.
 */
@keyframes ecx-ziel-auf {
  from {
    opacity: 0;
    box-shadow:
      inset 0 0 0 2px var(--ec-red),
      0 0 0 0 var(--ec-red-50),
      0 10px 28px rgba(234, 53, 93, 0);
  }
}

/* Das Skript setzt diese Klasse, wenn die Standzeit vorbei ist. */
.ecx-event.ecx-is-ziel--geht::after {
  opacity: 0;
  transition: opacity 900ms linear;
}

.ecx-event--featured { border-color: var(--ec-red-100); box-shadow: var(--shadow-1); }

.ecx-event__kachel {
  width: 84px; height: 84px; flex: none;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  position: relative; overflow: hidden; text-align: center;
  /*
   * Grundfarbe. Seit 09.09.2026 kommen die Formate aus dem Bestand und
   * nicht mehr aus einer festen Liste - ein Format ohne eigene Farbe
   * weiter unten waere sonst eine durchsichtige Kachel mit weisser
   * Schrift auf weissem Grund. Die eingetragenen Formate ueberschreiben
   * diesen Wert.
   */
  background: var(--ink-2);
}
.ecx-event__kachel span { position: relative; z-index: 1; padding: 0 4px; }
.ecx-event__kachel::after {
  content: ""; position: absolute; inset: 0;
  background: url('../../img/linien.png') center/cover no-repeat;
  opacity: .8; mix-blend-mode: screen; pointer-events: none;
}
.ecx-event__kachel--degea { background: linear-gradient(135deg, #1d4267 0%, #ea355d 100%); }
.ecx-event--featured .ecx-event__kachel--degea { background: var(--ec-red); }
.ecx-event__kachel--dgebv { background: var(--ec-blue); }
.ecx-event__kachel--ea { background: var(--ec-blue-700); }
/*
 * Junge Endoskopiker. Die Farbe ist nur sichtbar, wenn das Icon einmal
 * fehlt - dann faellt die Kachel auf das Kuerzel zurueck und braucht
 * einen Grund, siehe ecx_event_icon_url(). Ohne diese Zeile bliebe sie
 * durchsichtig.
 */
.ecx-event__kachel--je { background: var(--ec-blue-900); }
/* Termine ohne Formatzuordnung: neutrale Kachel statt Luecke. */
.ecx-event__kachel--neutral { background: var(--ink-2); }

/*
 * ---- Kachel mit Icon statt Kuerzel ----
 *
 * Drei Formate tragen seit 09.09.2026 ein Bild: DGE-BV, degea live und
 * Junge Endoskopiker. Welches, steht in ecx_event_formate().
 *
 * DAS BILD FUELLT DIE KACHEL GANZ. Die Icons sind quadratisch mit
 * DECKENDEM Hintergrund (#dde3e8) - eingerueckt gelegt ergaeben sie ein
 * helles Quadrat mit farbigem Rand darum. Ganzflaechig gibt es keinen
 * Rand; die abgerundeten Ecken der Kachel bleiben, weil sie
 * overflow: hidden traegt.
 *
 * cover und nicht contain: bei quadratischem Bild in quadratischer
 * Kachel ist beides deckungsgleich. Kaeme spaeter ein nicht
 * quadratisches Icon dazu, schnitte cover es zu, waehrend contain
 * Streifen in der Kachelfarbe stehen liesse - und genau die sollen hier
 * nicht auftauchen. Neue Icons also bitte quadratisch anlegen.
 */
.ecx-event__kachel--icon img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Das Linienbild liegt sonst ueber der Kachel. Auf einem hellen Icon
 * wuerde screen es aufhellen und die Linien ueber das Logo legen -
 * beides unerwuenscht. Bei der Textkachel bleibt es.
 */
.ecx-event__kachel--icon::after { content: none; }

.ecx-event__body { min-width: 0; }

/*
 * Titel koennen sehr lang sein oder ganz in Grossbuchstaben stehen.
 * break-word und die Zeilenbegrenzung halten die Karte in Form; color und
 * font-size ausdruecklich, weil der Altbestand h3 faerbt.
 */
.ecx-event .ecx-event__titel {
  font-weight: 600; font-size: 15.5px; color: var(--ink);
  line-height: 1.35; margin: 0 0 6px;
  overflow-wrap: break-word; hyphens: none;
  text-transform: none;
}

.ecx-event__meta {
  font-size: 14px; font-weight: 600; color: var(--ec-red);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0;
}
.ecx-event__datum, .ecx-event__zeit, .ecx-event__cme { white-space: nowrap; }
.ecx-event__punkt { font-weight: 700; }

/*
 * "in German" an Terminen, die nicht in der Sprache der Seite
 * vorliegen. Warum es sie ueberhaupt gibt, steht bei
 * ecx_termine_sprachuebergreifend() in inc/events.php.
 *
 * BEWUSST NICHT ROT wie der Rest der Metazeile, sondern grau auf
 * hellem Grund: die Metazeile nennt Eigenschaften des Termins, das
 * hier ist ein Vorbehalt zur Darstellung. Rot haette es zu einer
 * dritten Auszeichnung neben Datum und CME gemacht.
 */
.ecx-event__sprache {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-3);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; white-space: nowrap;
}
.ecx-event__sprache svg { width: 13px; height: 13px; flex: none; }

.ecx-event__cta { display: flex; gap: 8px; }
.ecx-events__leer { color: var(--ink-3); font-size: 14px; }

/* ---- Kalender ---- */
.ecx-kalender {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px;
}
.ecx-kalender__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ecx-kalender .ecx-kalender__monat { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.ecx-kalender__nav { display: flex; gap: 2px; }
.ecx-kalender__nav button {
  width: 32px; height: 32px; border-radius: 6px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.ecx-kalender__nav button:hover { background: var(--bg); color: var(--ink); }
.ecx-kalender__nav svg { width: 16px; height: 16px; }

.ecx-kalender__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 12px;
}
.ecx-kalender__dow {
  font-size: 10px; color: var(--ink-3); text-align: center; padding: 4px 0 8px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.ecx-kalender__tag {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink-2); font-size: 12px;
  border: 0; background: transparent; font-family: inherit; padding: 0;
  transition: background var(--dur) var(--ease);
}
.ecx-kalender__tag--leer { visibility: hidden; }
/*
 * HEUTE: NEUTRALER RING STATT ROT, seit 06.10.2026.
 *
 * Rot ist im Kalender die Farbe der Termine. Der rot gesetzte heutige
 * Tag sah aus wie einer - Isa: "Der 15. September ist rot markiert,
 * obwohl dort kein Termin liegt." Jetzt ein duenner Ring in der
 * Schriftfarbe; faellt heute auf einen Termin, bleibt dessen Fuellung
 * und der Ring liegt darum.
 */
.ecx-kalender__tag.ecx-is-heute {
  color: var(--ink); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}

/*
 * TERMINTAGE GEFUELLT, seit 06.10.2026.
 *
 * Vorher nur ein Hauch Farbe: degea #fde8ee, Formate ohne eigene Farbe
 * (EndoUpdate) --bg #f6f8fb - auf weissem Grund praktisch nicht zu
 * sehen. Jetzt volle Formatfarbe mit weisser Zahl, dieselbe Farbe wie
 * der Punkt in der Legende darunter. Die Grundfarbe gilt fuer jedes
 * Format, die eingetragenen ueberschreiben sie.
 */
.ecx-kalender__tag.ecx-hat-termin {
  font-weight: 700; cursor: pointer;
  background: var(--ink-2); color: #fff;
}
.ecx-kalender__tag.ecx-hat-termin:hover { filter: brightness(1.1); }
/*
 * Die Formatregeln stehen auf 0,2,0 - wie die Grundregel darueber. Bis
 * 06.10.2026 standen sie auf 0,1,0 und verloren gegen sie: KEIN Termintag
 * bekam je seine Formatfarbe, alle trugen das fast weisse --bg. Gemessen
 * im Browser, siehe DECISIONS Punkt 41.
 */
.ecx-kalender__tag.ecx-kalender__tag--degea { background: var(--ec-red); color: #fff; }
.ecx-kalender__tag.ecx-kalender__tag--dgebv { background: var(--ec-blue); color: #fff; }
.ecx-kalender__tag.ecx-kalender__tag--ea { background: var(--ec-blue-700); color: #fff; }
.ecx-kalender__tag.ecx-kalender__tag--neutral { background: var(--ink-2); color: #fff; }
/* Ring um einen Termin, der heute stattfindet - weiss, damit er auf der Fuellung steht. */
.ecx-kalender__tag.ecx-hat-termin.ecx-is-heute { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px var(--ink-3); }
/* Vergangene Termine des Jahres: erkennbar, aber zurueckgenommen. */
.ecx-kalender__tag.ecx-hat-termin.ecx-ist-vorbei { opacity: .4; }

/*
 * Farben beim Ueberfahren festhalten. Das GeneratePress-Inline-CSS setzt
 * button:hover { color: #fff } auf 0,1,1 und schlaegt damit die
 * Klassenregeln darueber (0,1,0) - die Tageszahl wuerde weiss und auf
 * dem hellen Feld unsichtbar. Dieselbe Regel setzt zusaetzlich
 * background: rgb(63,64,71) - das Feld wurde beim Ueberfahren
 * anthrazit. Gewollt ist beim Ueberfahren nur der Helligkeitsfilter
 * eine Zeile weiter oben, weder Farb- noch Grundwechsel.
 *
 * Warum die Basis den Grund nicht allgemein absichert, steht in
 * 10-base.css.
 */
.ecx-kalender__tag:hover { color: var(--ink-2); background: transparent; }
.ecx-kalender__tag.ecx-hat-termin:hover { color: #fff; background: var(--ink-2); }
.ecx-kalender__tag.ecx-kalender__tag--degea:hover { color: #fff; background: var(--ec-red); }
.ecx-kalender__tag.ecx-kalender__tag--dgebv:hover { color: #fff; background: var(--ec-blue); }
.ecx-kalender__tag.ecx-kalender__tag--ea:hover { color: #fff; background: var(--ec-blue-700); }
.ecx-kalender__tag.ecx-kalender__tag--neutral:hover { color: #fff; background: var(--ink-2); }
.ecx-kalender__tag.ecx-is-heute:not(.ecx-hat-termin):hover { color: var(--ink); }

.ecx-kalender__legende {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; color: var(--ink-3);
}
.ecx-kalender__legende span { display: flex; align-items: center; gap: 6px; }
/* Grundfarbe des Punktes, aus demselben Grund wie beim Kalendertag. */
.ecx-kalender__legende i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  background: var(--ink-2);
}
.ecx-kalender__legende i.ecx-legende--degea { background: var(--ec-red); }
.ecx-kalender__legende i.ecx-legende--dgebv { background: var(--ec-blue); }
.ecx-kalender__legende i.ecx-legende--ea { background: var(--ec-blue-700); }
.ecx-kalender__legende i.ecx-legende--neutral { background: var(--ink-2); }

/* ---- Teaser ---- */
.ecx-teaser {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center;
  background: var(--ec-blue); color: #fff;
  border-radius: var(--r-lg); padding: 12px; margin-top: 14px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ecx-teaser::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 220px; height: 220px;
  background: url('../../img/linien.png') center/contain no-repeat;
  opacity: .8; mix-blend-mode: screen; pointer-events: none;
}
.ecx-teaser:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); color: #fff; }
.ecx-teaser > * { position: relative; z-index: 1; }

/*
 * Feste Groesse und Hintergrundfarbe: fehlt das Bild, bleibt ein farbiger
 * Block stehen statt einer eingefallenen Zelle. Die Uploads liegen lokal
 * nicht vor, das ist der Normalfall beim Entwickeln.
 */
/* contain wie bei den uebrigen Karten, siehe events-seite.css. */
.ecx-teaser__media {
  width: 92px; height: 92px; flex: none;
  border-radius: var(--r-md);
  background-color: #0e2237;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.ecx-teaser__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecx-teaser__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ecx-teaser .ecx-teaser__titel { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.ecx-teaser__text { font-size: 12px; color: rgba(255,255,255,.75); }
.ecx-teaser__cta { font-size: 12px; font-weight: 600; color: #fff; margin-top: 2px; }

/* ============================================
   Unter 900: einspaltig. Der Kalender entfaellt.
   Ein Monatsgitter mit sieben Spalten ist auf
   375px unbrauchbar - die Liste darunter zeigt
   dieselben Termine besser lesbar.
   ============================================ */
/* ============================================
   DAS ENGE BAND: 900 bis 1079

   Hier steht der Kalender noch neben der Liste
   (er entfaellt erst unter 900), die Seite ist aber
   schon schmal. Gerechnet bei 900px: Umschlag 836,
   minus Kalenderspalte 320 und Abstand 32 bleiben
   484 fuer die Liste, minus Innenabstand 456.
   Davon gehen 84 fuer die Kachel, zweimal 18 Abstand
   und 161 fuer "Details & Anmeldung" ab - dem Titel
   blieben 173px, also fuenf bis sechs Zeilen.

   Der Knopf rutscht deshalb in diesem Band unter
   Kachel und Text. Darueber passt er daneben (bei
   1080 behaelt der Titel 353px), darunter ist die
   Liste ohnehin wieder voll breit.
   ============================================ */
@media (min-width: 900px) and (max-width: 1079px) {
  .ecx-event__cta { grid-column: 1 / -1; }
}

/* "Mehr laden" gibt es nur unter 640, siehe parts/events.php. */
.ecx-events__mehr { display: none; }

@media (max-width: 899px) {
  .ecx-events__grid { grid-template-columns: 1fr; gap: 20px; }
  .ecx-kalender { display: none; }
  .ecx-teaser:first-of-type { margin-top: 0; }

  /*
   * IMAGE CHALLENGE UND AUTOR NEBENEINANDER (Isa, s8), seit 06.10.2026.
   * Ohne Kalender bleiben in der Seitenspalte nur die beiden Teaser -
   * untereinander war jeder ueber die volle Breite gezogen. Nebeneinander
   * stehen sie als Paar. margin-top entfaellt, den Abstand macht gap.
   */
  .ecx-events__seite--teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ecx-events__seite--teaser .ecx-teaser { margin-top: 0; }
}

@media (max-width: 640px) {
  .ecx-events { padding: 40px 0 48px; }

  /* Karte umbrechen: Kachel und Text oben, Knopf darunter. */
  .ecx-event { grid-template-columns: 64px 1fr; gap: 12px; }
  /*
   * Die Kachel wird kleiner. Fuer die Icons geprueft: sie bringen
   * eigenen Rand mit (6 bis 16 Prozent der Kantenlaenge), das Motiv
   * selbst steht also auf 64px noch mit rund 54 bis 58px da. DGE-BV ist
   * der engste Fall, weil sein Schriftzug breit und flach ist - er
   * bleibt lesbar, siehe docs/DECISIONS.md Punkt 27.
   */
  .ecx-event__kachel { width: 64px; height: 64px; font-size: 11px; }
  /* Der Knopf rutscht unter Kachel und Text - daneben blieben sonst
     keine 100px fuer den Titel. Er behaelt seine Inhaltsbreite. */
  .ecx-event__cta { grid-column: 1 / -1; }

  .ecx-events__filterzeile { gap: 8px; }

  /*
   * Datum und Uhrzeit untereinander statt mit Trennpunkt in einer Zeile.
   * In der schmalen Textspalte brach der Punkt allein ans Zeilenende,
   * und ein Zeitraum ("26. November - 28. November 2026") lief wegen
   * nowrap ueber den Kartenrand hinaus.
   */
  .ecx-event__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ecx-event__meta .ecx-event__punkt { display: none; }
  .ecx-event__datum { white-space: normal; }

  /* Mehr laden: Karten jenseits der Portion, gesetzt von js/events.js. */
  .ecx-event.ecx-ist-weiter { display: none; }
  .ecx-events__mehr { display: flex; justify-content: center; margin-top: 16px; }
  .ecx-events__mehr[hidden] { display: none; }

  /*
   * Zwei Teaser nebeneinander sind je rund 160px breit - Bild ueber den
   * Text statt daneben, sonst bliebe fuer den Text kaum Platz.
   */
  .ecx-teaser { grid-template-columns: 1fr; gap: 10px; align-content: start; }
  .ecx-teaser__media { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-event, .ecx-teaser, .ecx-kalender__tag, .ecx-events__filterknopf,
  .ecx-events__alle svg { transition-duration: 0s; }

  /*
   * Die Sprungmarkierung BLEIBT SICHTBAR, sie bewegt sich nur nicht:
   * kein Aufblenden, kein Ausblenden. Sie steht da und verschwindet
   * nach der Standzeit auf einen Schlag. js/events.js laesst dafuer
   * die Ausblendstufe weg und nimmt die Klasse direkt zurueck.
   *
   * "Bewegung reduzieren" heisst nicht "Hinweis weglassen" - wer beim
   * Sprung nicht sieht, wo er gelandet ist, sucht die Karte von Hand.
   */
  .ecx-event.ecx-is-ziel::after { animation: none; }
  .ecx-event.ecx-is-ziel--geht::after { transition: none; }
}