/**
 * Beitragslayout ZimmAteC – übernommen aus dem Referenzbeitrag
 * „Gefährdungsbeurteilung erstellen" (gemessene Werte, Divi-Builder-Module).
 *
 * Fließtext 16px / 1.9em / #221F20 · H1 30px/600 in #F39E2E · H2 26px/700 in #333
 * H3 22px kursiv · Button #F39E2E auf #000 · Hinweiskasten #686868 · CTA-Kasten #221F20
 *
 * Alles ist auf .osz-article begrenzt und wirkt nur in den vom Plugin angelegten Beiträgen.
 */

.osz-article {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9em;
	color: #221f20;
}

.osz-article p,
.osz-article li,
.osz-article td,
.osz-article th {
	font-size: 16px;
	line-height: 1.9em;
	color: #221f20;
}

.osz-article p {
	padding-bottom: 1em;
	margin: 0;
}

/* Leere Absätze und Umbrüche, die Divi oder wpautop erzeugen, erzeugen sonst Lücken. */
.osz-article p:empty,
.osz-article p > br:only-child,
.osz-article div:empty {
	display: none !important;
}

.osz-article p:last-child {
	padding-bottom: 0;
}

.osz-article h1,
.osz-article h2,
.osz-article h3,
.osz-article h4 {
	font-family: "Open Sans", Arial, sans-serif;
	padding-bottom: 10px;
	margin: 0;
}

.osz-article h1 {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.4em;
	color: #f39e2e;
}

.osz-article h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4em;
	color: #333;
}

.osz-article h3 {
	font-size: 22px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.4em;
	color: #333;
}

.osz-article ul,
.osz-article ol {
	padding-bottom: 1em;
	padding-left: 1.4em;
}

.osz-article li {
	margin-bottom: .25em;
}

/* Divi färbt Links über #page-container ein, deshalb auch hier mit !important. */
.osz-article a:not(.wp-block-button__link),
.osz-article a:not(.wp-block-button__link):link,
.osz-article a:not(.wp-block-button__link):visited {
	color: #f39e2e !important;
	text-decoration: none;
}

.osz-article a:not(.wp-block-button__link):hover,
.osz-article a:not(.wp-block-button__link):focus {
	color: #d9820f !important;
	text-decoration: underline;
}

/* In den farbigen Kästen bleiben Links weiß. */
.osz-article .osz-box--grey a:not(.wp-block-button__link),
.osz-article .osz-box--dark a:not(.wp-block-button__link) {
	color: #fff !important;
	text-decoration: underline;
}

/* ------------------------------------------------------- Bild über dem Text */

.osz-article .osz-lead-image {
	margin: 0 0 1.8em;
}

.osz-article .osz-lead-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------- Tabellen */

.osz-article .wp-block-table {
	overflow-x: auto;
	margin: 0 0 1.6em;
}

.osz-article table {
	width: 100%;
	min-width: 32em;
	border-collapse: collapse;
}

.osz-article th,
.osz-article td {
	border: 1px solid #d8d8d8;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	line-height: 1.6em;
}

.osz-article th {
	background: #f1f1f1;
	font-weight: 700;
	color: #333;
}

/* ------------------------------------------------- Hinweis- und CTA-Kästen */

.osz-article .osz-box {
	padding: 20px 24px 6px;
	margin: 1.4em 0;
}

.osz-article .osz-box--grey {
	background-color: #686868;
}

.osz-article .osz-box--grey h2,
.osz-article .osz-box--grey p,
.osz-article .osz-box--grey a {
	color: #fff;
}

.osz-article .osz-box--grey h2 {
	line-height: 1.3em;
	padding-top: 0;
}

.osz-article .osz-box--dark {
	background-color: #221f20;
}

.osz-article .osz-box--dark h2,
.osz-article .osz-box--dark p,
.osz-article .osz-box--dark li,
.osz-article .osz-box--dark a {
	color: #fff;
}

.osz-article .osz-box--dark h2 {
	padding-top: 0;
}

/* ------------------------------------------------------------------ Button */

.osz-article .wp-block-buttons {
	margin: 1.6em 0 2em;
}

/* Werte aus der Regel des Referenzbeitrags:
   body #page-container .et_pb_section .et_pb_button_1
   { color:#221F20; border-color:#000000; background-color:#F39E2E }
   Kein Icon, kein Mouse-over-Effekt – die Größe bleibt in jedem Zustand gleich.

   Divi setzt Links und Buttons sehr durchsetzungsstark (unter anderem über
   #page-container), deshalb hier bewusst mit !important und einer eigenen
   Klasse am Link selbst. So hängt die Gestaltung nicht von Elternklassen ab. */
a.osz-btn,
a.osz-btn:link,
a.osz-btn:visited,
a.osz-btn:hover,
a.osz-btn:focus,
a.osz-btn:active,
.osz-article .wp-block-button__link,
.osz-article .wp-block-button__link:link,
.osz-article .wp-block-button__link:visited,
.osz-article .wp-block-button__link:hover,
.osz-article .wp-block-button__link:focus,
.osz-article .wp-block-button__link:active {
	display: inline-block !important;
	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.7em !important;
	color: #221f20 !important;
	background: #f39e2e !important;
	background-color: #f39e2e !important;
	border: 2px solid #000 !important;
	border-radius: 3px !important;
	padding: .3em 1em !important;
	margin: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: none !important;
	transform: none !important;
}

/* Divi hängt Buttons ein Pfeil-Icon an und verschiebt dafür die Innenabstände. Beides unterbinden. */
a.osz-btn::after,
a.osz-btn::before,
.osz-article .wp-block-button__link::after,
.osz-article .wp-block-button__link::before {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	opacity: 0 !important;
}

/* ------------------------------------------------------------ Kleine Größen */

@media (max-width: 767px) {
	.osz-article h1 { font-size: 26px; }
	.osz-article h2 { font-size: 22px; }
	.osz-article h3 { font-size: 19px; }
	.osz-article .wp-block-button__link { font-size: 17px; }
	.osz-article table { min-width: 100%; }
	.osz-article .wp-block-table { font-size: 15px; }
}