/* Blogkarten auf der Ressourcen-Seite.
   Die Klassen sitzen auf den umgebenden Containern, gestylt werden nur
   die eigenen Klassen des Xpro-Beitragsrasters. */

/* ---- Kategorie als orangefarbene Pille, Datum bleibt schlichter Text ---- */
.ws-blogkarten .xpro-post-grid-meta-list {
  align-items: center;
  gap: 10px;
}
.ws-blogkarten .xpro-post-grid-meta-category {
  line-height: 1;
}
/* Der Trenner zwischen mehreren Kategorien verschwindet ueber die Schriftgroesse. */
.ws-blogkarten .xpro-post-grid-meta-category span {
  font-size: 0;
}
/* Die Textfarbe der Pille muss die generierte Meta-Regel von Elementor uebertreffen,
   deshalb die zusaetzliche Body-Klasse im Selektor. */
body.elementor-page .ws-blogkarten .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a {
  display: inline-block;
  background: var(--e-global-color-accent);
  /* Elementors generierte Meta-Regel ist spezifischer, daher hier ausdruecklich. */
  color: var(--e-global-color-efef375) !important;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.elementor-page .ws-blogkarten .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a:hover {
  background: var(--e-global-color-esaccentd);
  color: var(--e-global-color-efef375) !important;
}

/* Nur die erste Kategorie zeigen, wie im Entwurf. */
body.elementor-page .ws-blogkarten .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a:not(:first-of-type) {
  display: none !important;
}

/* ---- Cubeportfolio aus der absoluten Anordnung nehmen ----
   Danach tragen die Karten ihre eigene Hoehe und lassen sich als Raster setzen. */
.ws-blogkarten .cbp,
.ws-blogkarten .cbp-wrapper-outer,
.ws-blogkarten .cbp-wrapper {
  height: auto !important;
  position: static !important;
}
.ws-blogkarten .cbp-item {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}
.ws-blogkarten .cbp-item-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ws-blogkarten .xpro-post-grid-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ws-blogkarten .xpro-post-grid-title {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Weiterlesen sitzt auf einer Linie, egal wie lang der Auszug ist. */
.ws-blogkarten .xpro-post-grid-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- Dreierreihe als echtes Raster mit gleich hohen Karten ---- */
.ws-dreier .cbp-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .ws-dreier .cbp-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 767px) {
  .ws-dreier .cbp-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---- Aufmacher: Bild links, Text rechts ---- */
.ws-aufmacher .xpro-post-grid-btn {
  margin-top: 0;
}
@media (min-width: 941px) {
  .ws-aufmacher .cbp-item-wrapper {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
  .ws-aufmacher .xpro-post-grid-image {
    height: 100% !important;
    min-height: 360px;
  }
  .ws-aufmacher .xpro-post-grid-image img {
    height: 100%;
    object-fit: cover;
  }
  .ws-aufmacher .xpro-post-grid-content {
    justify-content: center;
    flex: none;
  }
}

/* Nachtrag: Elementor schreibt aus der Knopf-Einstellung einen eigenen Aussenabstand,
   der spezifischer ist als eine Klassenregel. */
body.elementor-page .ws-blogkarten .xpro-post-grid-wrapper .xpro-post-grid-btn {
  margin-top: auto !important;
  align-self: flex-start;
}
body.elementor-page .ws-aufmacher .xpro-post-grid-wrapper .xpro-post-grid-btn {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   ESG-Blog-Uebersicht. Die Klasse ws-blogseite sitzt auf dem Abschnitt und
   greift deshalb nie auf der Ressourcen-Seite, die dieselbe Datei mitlaedt.
   --------------------------------------------------------------------------- */

/* Im Entwurf liegt der Aufmacher innerhalb der Kartenpolsterung,
   Bild und Text stehen mit deutlichem Abstand nebeneinander. */
@media (min-width: 941px) {
  .ws-blogseite .ws-aufmacher .cbp-item-wrapper {
    gap: 56px;
  }
  .ws-blogseite .ws-aufmacher .xpro-post-grid-image {
    min-height: 340px;
  }
}
.ws-blogseite .ws-aufmacher .xpro-post-grid-image {
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 940px) {
  .ws-blogseite .ws-aufmacher .xpro-post-grid-content {
    padding-top: 24px;
  }
}

/* Der Entwurf setzt die Dreierreihe luftiger als die Ressourcen-Seite. */
.ws-blogseite .ws-dreier .cbp-wrapper {
  gap: 28px;
}
@media (max-width: 1024px) {
  .ws-blogseite .ws-dreier .cbp-wrapper {
    gap: 22px;
  }
}
@media (max-width: 767px) {
  .ws-blogseite .ws-dreier .cbp-wrapper {
    gap: 18px;
  }
}

/* ---------------------------------------------------------------------------
   Downloads. Die Karten sind hier fest gesetzt, nicht aus einem Beitragsraster,
   deshalb brauchen sie eigene Regeln.
   --------------------------------------------------------------------------- */

/* Der Kartentext fuellt die Karte, damit der Link unten buendig sitzt. */
.ws-downloads .ws-dl-inhalt {
  flex-grow: 1;
}
.ws-downloads .ws-dl-fuss {
  margin-top: auto;
}

/* Karten heben sich beim Ueberfahren an, wie auf den anderen Uebersichten.
   Der Schatten steht als Zahlenwert da, Elementor kennt dafuer kein Token. */
.ws-downloads .ws-dl-karte {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ws-downloads .ws-dl-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -34px rgba(31, 31, 31, 0.4);
}

/* Der Aufmacher soll sich nicht anheben, er ist keine Karte im Raster. */
.ws-downloads .ws-dl-aufmacher:hover {
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .ws-downloads .ws-dl-karte {
    transition: none;
  }
  .ws-downloads .ws-dl-karte:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Kategoriearchive.
   --------------------------------------------------------------------------- */

/* Elementor setzt Abzeichen und Weiterlesen-Link in Grossbuchstaben und tut das
   mit hoher Spezifitaet. Blog und Mediathek schreiben beides normal, deshalb
   hier gezielt zurueckgenommen. */
.ws-archiv .elementor-post__read-more,
.ws-archiv .elementor-post__badge {
  text-transform: none !important;
}

/* Lange Fachwoerter sollen umbrechen statt aus der Karte zu laufen. */
.ws-archiv .elementor-post__title {
  overflow-wrap: anywhere;
}

/* Viele Beitraege tragen einen von Hand gepflegten Auszug. In dem Fall greift
   die Laengeneinstellung des Widgets nicht und die Karten werden ungleich hoch.
   Der Auszug wird deshalb nach drei Zeilen abgeschnitten. */
.ws-archiv .elementor-post__excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Karten heben sich beim Ueberfahren an, wie auf Blog und Mediathek.
   Der Schatten steht als Zahlenwert da, Elementor kennt dafuer kein Token. */
.ws-archiv .elementor-post__card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ws-archiv .elementor-post__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -34px rgba(31, 31, 31, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .ws-archiv .elementor-post__card {
    transition: none;
  }
  .ws-archiv .elementor-post__card:hover {
    transform: none;
  }
}

/* Der Blog zeigt die Kategorie schlicht in Grau. Die orangefarbene Pille der
   Ressourcen-Seite steht so nicht im Entwurf, weder im Aufmacher noch im Raster.
   Die Huelle bleibt auf Schriftgroesse null, damit das Komma zwischen mehreren
   Kategorien verschwindet. Der Link braucht deshalb eine eigene Groesse, sie
   kommt aus demselben Token, das im Widget eingestellt ist. */
/* Die Huelle steht auf Schriftgroesse null, damit das Komma zwischen mehreren
   Kategorien verschwindet. Damit faellt aber auch ihre Zeilenhoehe auf null und
   der Kategoriename saesse hoeher als das Datum. Beide Angaben laufen deshalb
   als Flex-Elemente, dann sitzen sie auf einer Mittelachse. */
.ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category,
.ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span,
.ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-date {
  display: flex;
  align-items: center;
}
body.elementor-page .ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a {
  display: block;
  background: none;
  color: var(--e-global-color-esmuted2) !important;
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
body.elementor-page .ws-blogseite .ws-aufmacher .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a {
  font-size: var(--e-global-typography-esresmeta135-font-size);
}
body.elementor-page .ws-blogseite .ws-dreier .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a {
  font-size: var(--e-global-typography-esresmeta13-font-size);
}
body.elementor-page .ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-category > span > a:hover {
  background: none;
  color: var(--e-global-color-text) !important;
}

/* Mittelpunkt zwischen Kategorie und Datum, so trennt der Entwurf die Angaben. */
.ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-date::before {
  content: "\00b7";
  margin-right: 8px;
  color: var(--e-global-color-esmuted2);
}
.ws-blogseite .xpro-post-grid-meta-list > li.xpro-post-grid-meta-date {
  font-weight: 600;
}

/* Das Abzeichen aus dem Entwurf. Das Beitragsraster laesst kein eigenes Element
   innerhalb der Karte zu, deshalb steht die Auszeichnung hier im Stylesheet.
   Der Text kommt aus einer Variablen, damit jede Seite ihr eigenes Wort setzt. */
.ws-blogseite {
  --ws-abzeichen: "Featured";
}
.ws-webinare {
  --ws-abzeichen: "Meistgesehen";
}
.ws-blogseite .ws-aufmacher .xpro-post-grid-meta-list::before {
  content: var(--ws-abzeichen);
  display: inline-block;
  background: var(--e-global-color-text);
  color: var(--e-global-color-efef375);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* Hintergrund und Rahmen der Karte liegen bei Xpro auf der inneren Huelle.
   Die Polsterung des Entwurfs gehoert deshalb ebenfalls dorthin, sonst stuende
   sie ausserhalb der eingefaerbten Flaeche. */
.ws-blogseite .ws-aufmacher .cbp-item-wrapper {
  border-radius: 26px;
  padding: 34px;
}
/* Dasselbe fuer die Dreierreihe: ohne eigenen Radius zeichnet der Rahmen ein
   Rechteck, das die runde Aussenkante wegschneidet. An den Ecken fehlt er dann. */
.ws-blogseite .ws-dreier .cbp-item-wrapper {
  border-radius: 20px;
}
@media (max-width: 600px) {
  .ws-blogseite .ws-aufmacher .cbp-item-wrapper {
    padding: 24px;
  }
}

/* Im Entwurf sitzt der Textlink auf einer orangen Linie. */
.ws-blogseite .ws-aufmacher .xpro-post-grid-btn {
  border-bottom: 2px solid var(--e-global-color-accent);
  padding-bottom: 3px;
}

/* Karten heben sich beim Ueberfahren leicht an, wie im Entwurf.
   Cubeportfolio setzt transform hart zurueck, deshalb hier ausdruecklich.
   Der Schatten steht als Zahlenwert da, Elementor kennt dafuer kein Token. */
.ws-blogseite .ws-blogkarten .cbp-item.xpro-post-grid-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ws-blogseite .ws-blogkarten .cbp-item.xpro-post-grid-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 26px 60px -34px rgba(31, 31, 31, 0.4);
}

/* ---------------------------------------------------------------------------
   Webinar-Mediathek: Abspielknopf auf dem Vorschaubild.
   Xpro kann in der Karte kein eigenes Element aufnehmen, deshalb als
   Pseudo-Element. Das weisse Dreieck steckt in einer Daten-URL und laesst
   sich dort nicht ueber ein Token setzen, es ist der einzige feste Farbwert.
   --------------------------------------------------------------------------- */
.ws-webinare .xpro-post-grid-image {
  position: relative;
}
.ws-webinare .xpro-post-grid-image::after {
  content: "";
  position: absolute;
  /* Xpro belegt dasselbe Pseudo-Element mit einer Auflage und setzt top auf null.
     Ohne diese Ruecknahme gewinnt top gegen bottom und der Knopf klebt oben. */
  top: auto;
  right: auto;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--e-global-color-esink86);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
  z-index: 3;
}
.ws-webinare .ws-aufmacher .xpro-post-grid-image::after {
  left: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
}
.ws-webinare .cbp-item.xpro-post-grid-item:hover .xpro-post-grid-image::after {
  background-color: var(--e-global-color-accent);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .ws-blogseite .ws-blogkarten .cbp-item.xpro-post-grid-item,
  .ws-webinare .xpro-post-grid-image::after {
    transition: none;
  }
  .ws-blogseite .ws-blogkarten .cbp-item.xpro-post-grid-item:hover {
    transform: none !important;
  }
}