/*Version 1 - mit Überschrift und Bild links */
.postcontainer_ver1 {
  max-width: 100%;
  margin: 25px auto;
}

.post_ver1 {
  position: relative;
  padding-left: 4rem;
  margin: 0 0 0 50px;
}

.post_ver1 h1,
.post_ver1 h2,
.post_ver1 h3 {
	text-align: left;
}

.post_ver1 .post_ver1-container {
  position: relative;
  margin-bottom: 2.5rem;
}

.post_ver1 .post_ver1-container .post_ver1-icon {
	position: absolute;
	left: -112px;
	top: 4px;
	width: 100px;
	height: 100px;
	text-align: center;
	font-size: 2rem;
	background: var(--akzent-red);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.post_ver1 .post_ver1-container .post_ver1-icon img {
	width: 100%;
	height: 100%;
	border: 4px solid var(--akzent-red);
}

.post_ver1 .post_ver1-container .post_ver1-body {
	background: var(--akzent-hell);
	border-radius: 3px;
	padding: 25px;
	text-align: justify;
}

.post_ver1 .post_ver1-container .post_ver1-body:before {
	content: "";
    position: absolute;
    top: 42px;
    right: 100%;
    border-width: 12.5px;
    border-style: solid;
    border-color: transparent var(--akzent-hell) transparent transparent;
}

.post_ver1 .post_ver1-container .post_ver1-body .post_ver1-title {
  margin-bottom: 1.4rem;
}

.pgif_ver1 {
	height: 100px;
	background-size: cover;
	background-position: 50% 50%;
	width: 100px;
}

/*Version 2 - mit Überschrift und Bild rechts */
.postcontainer_ver2 {
  max-width: 100%;
  margin: 25px auto;
}

.post_ver2 {
  position: relative;
  padding-right: 4rem;
  margin: 0 50px 0 0;
}

.post_ver2 h1,
.post_ver2 h2,
.post_ver2 h3 {
	text-align: right;
}

.post_ver2 .post_ver2-container {
  position: relative;
  margin-bottom: 2.5rem;
}

.post_ver2 .post_ver2-container .post_ver2-icon {
	position: absolute;
	right: -112px;
	top: 4px;
	width: 100px;
	height: 100px;
	text-align: center;
	font-size: 2rem;
	background: var(--akzent-red);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.post_ver2 .post_ver2-container .post_ver2-icon img {
	width: 100%;
	height: 100%;
	border: 4px solid var(--akzent-red);
}

.post_ver2 .post_ver2-container .post_ver2-body {
	background: var(--akzent-hell);
	border-radius: 3px;
	padding: 25px;
	text-align: justify;
}

/* Pfeil */
.post_ver2 .post_ver2-container .post_ver2-body:after {
	content: "";
    position: absolute;
    top: 42px;
    left: 100%;
    border-width: 12.5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--akzent-hell);
}

.post_ver2 .post_ver2-container .post_ver2-body .post_ver2-title {
  margin-bottom: 1.4rem;
}

.pgif_ver2 {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-position: 50% 50%;
}

/* Variante 3 - Bild links */

.post_ver3 {
	background: var(--akzent-dkl);
	border-radius: 3px;
	padding: 20px;
	text-align: justify;
	margin: 15px 0px 0px 25px;
}

.post_ver3 > .pgif_ver3  {
	float: left;
	background-position: 50% 50%;
	background-size: cover;
	height: 125px;
	width: 175px;
	margin: -40px 20px 10px -40px;
	outline: 2px solid var(--akzent-dkl);
	border-radius: 3px;
}

/* Variante 4 - Bild rechts */

.post_ver4 {
	background: var(--akzent-dkl);
	border-radius: 3px;
	padding: 20px;
	text-align: justify;
	margin: 15px 25px 0px 0px;
}

.post_ver4 > .pgif_ver4  {
	float: right;
	background-position: 50% 50%;
	background-size: cover;
	height: 125px;
	width: 175px;
	margin: -40px -40px 10px 20px;
	outline: 2px solid var(--akzent-dkl);
	border-radius: 3px;
}