:root {
	--TEXT_CONTENT_SIZE: 16px;
	--TEXT_LINE_HEIGHT: 31px;
	--HEADLINE_SIZE: 23px;
	--HEADLINE_LINE_HEIGHT: 1.3;
	--QUOTE_TEXT_SIZE: 19px;
	--TEXT_UI_SMALL: 15px;
	--LINE_HEIGHT_UI_SMALL: 1.5;
	--TEXT_UI_BIG: 17px;
	--LINE_HEIGHT_UI_BIG: 1.45;
}

.detail--post {
	padding-top: 16px !important;
	background-color: #F8F8F8 !important;
}

.cvnl-teaser {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cvnl-teaser .cvnl-date {
	margin-bottom: 0 !important;
	font-family: "Source Sans 3", sans-serif !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.1px;
	color: #FF5064;
}

.cvnl-teaser .cvnl-title {
	margin-bottom: 0;
	font-family: "Source Sans 3", sans-serif !important;
	font-weight: 700;
	font-size: 30px;
	line-height: 120%;
	letter-spacing: -0.1px;
}

.cvnl-teaser .cvnl-excerpt {
	font-family: "Source Sans 3", sans-serif !important;
	font-weight: 400;
	font-size: 17px;
	line-height: 150%;
	letter-spacing: 0.1px;
}

.img-intro-header {
	margin: 0;
}
.img-intro-header img {
	width: 100% !important;
}

.img-author-box, .img-section {
	margin: 0;
}

.p-author-box-role {
	margin-block-start: 0px;
}

.sep-author-box {
	border-top: 1px solid;
	max-width: 560px !important;
	margin-block-start: 0;
	margin-top: 10px;
}

.p-author-box-name {
	margin: 0 !important;
}

.group-intro {
	padding-top: 20px;
}

.group-intro, .group-section {
	padding: 60px !important;
	background-color: #fff;
}

.group-intro a:not(.wp-block-button__link),
.group-section a:not(.wp-block-button__link) {
	color: inherit !important;
	text-decoration: underline;
}

.group-intro > p, .group-section > p {
	font-family: "Merriweather";
	font-size: var(--TEXT_CONTENT_SIZE);
	line-height: var(--TEXT_LINE_HEIGHT);
}

.group-section p.back-to-toc a,
.group-section p.p-sharing-label {
	font-family: "Source Sans 3", sans-serif !important;
}

.group-section h2,
.group-section h3,
.group-section h4,
.detail__teaser .detail__date {
	font-size: var(--HEADLINE_SIZE) !important;
	line-height: var(--HEADLINE_LINE_HEIGHT) !important;
}

.button-section a {
	border-bottom: none !important;
}

.section-spacer {
	height: 30px !important;
}

.archive-link-container {
    padding: 24px 24px 0;
	margin-left: -15px;
 	margin-right: -15px;
}

.archive-link-container > * {
	max-width: 620px;
	margin: 0 auto;
	display: block !important;
}

figure .wp-element-caption {
	font-size: var(--TEXT_UI_SMALL);
	text-align: center;
	line-height: 1.5;
}

blockquote, .wp-block-quote, .spotlight-quote, blockquote.wp-block-quote {
	background: #fff !important;
	border-left: 2px solid #E6E6E6;
	padding-left: 20px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	font-style: normal !important;

}

.spotlight-quote .p-quote-name, .spotlight-quote .p-quote-role, .spotlight-quote p {
	font-size: var(--TEXT_CONTENT_SIZE);
	padding-bottom: 0px !important;
	margin-top: 0px !important;
	line-height: 1.5;
}

.spotlight-quote .p-quote-text {
	font-size: var(--QUOTE_TEXT_SIZE) !important;
	line-height: var(--LINE_HEIGHT_UI_BIG);
}

/*
	By default, block gap is 24px. As the red dot followed
	by a heading (as in "Thema des Tages") should have a narrower
	spacing, this is the least stupid way to hook into the templates.
 */
.wp-block-columns:has(img[src*="spotlight-topic-dot-30px.png"]) {
  gap: 16px;
}

/*
	These styles are needed to have the red dot line up nicely with the heading.
	While these styles can be updated in the respective "Spotlight-Vorlage" block patterns,
	retrofitting published newsletters seems too cumbersome. Thats why we forcefully apply
	the inline styles added by the block editor via !important here for published newsletters.
 */
img[src*="spotlight-topic-dot-30px.png"] {
	object-fit: contain !important;
	width: 30px !important;
	height: 30px !important;
}



/* ----- Audio version section styling ------ */
.disclaimer-audio {
	margin: 0px;
	margin-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 12px;
	padding-bottom: 30px;
	background-color: #FFFFFF;
	color: #707070;
	font-size: 15px;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	line-height: var(--LINE_HEIGHT_UI_SMALL);
}

.spotlight-audio-player {
	margin: 0px;
	margin-top: 15px;
	padding-top: 30px;
	padding-left: 30px;
	padding-right: 30px;
	background-color: #FFFFFF;
}


/* ------ Override default audio player embedd styles ------- */
/* container elements */
.mejs-container.wp-audio-shortcode.mejs-audio {
	/* border-radius: 10px !important; */
}
.mejs-container * {
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif !important;
	color: #333333 !important;
	font-size: 15px !important;
	font-weight: 400;
	letter-spacing: 0.2px;
	/* line-height: 150%; */
}
.mejs-controls {
	background: #F8F8F8 !important;
	/* border-radius: 10px !important; */
}

/* audio scrubber base */
.mejs-controls .mejs-time-rail .mejs-time-total {
  background: #FFFFFF !important;
}
/* audio scrubber position */
.mejs-controls .mejs-time-rail .mejs-time-current {
  background: #333333 !important;
}
/* audio scrubber handle */
.mejs-time-handle-content {
	background: #333333 !important;
	border-color: #333333 !important;
}
/* audio scrubber buffer */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #E6E6E6 !important;
}
/* audio scrubber hovered position */
.mejs-controls .mejs-time-rail .mejs-time-hovered {
  background: #CECECE !important;
}

/* Font for audio times indication */
.mejs-time {
	padding-top: 13.5px !important;
}

/* volumne scrubber position */
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  background: #333333 !important;
}
/* volumne scrubber base */
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: #CECECE !important;
}

/* Change Icons colors with manipulated styles in own svg */
.mejs-button > button {
	background-image: url(mejs-controls.svg) !important;
}

/* Hover time indicator */
.mejs-time-float {
	background-color: #333333 !important;
}
.mejs-time-float-current {
	color: #fff !important;
	font-size: 11px !important;
}
.mejs-time-float-corner {
	border: 5px solid #333333 !important;
	border-color: #333333 transparent transparent !important;
}

.mejs-currenttime, .mejs-duration {
	line-height: 12px !important;
}