/* News and event detail (Tmpl/newsdetail/Partials/OgvDetail/Article.html), 2026-10-16.
   Fits the general layout: the page starts green (#6fb016) with white text and turns white with dark text and green
   accents after 300px of scrolling (body.changeColor, script in Footer.html, rules in styles.css). All colours of the
   article are variables that switch with body.changeColor and fade like the page (0.7s). Istok Web / Source Serif Pro,
   corners var(--ogv-radius) from navigation.css. Only existing elements, restyled. */

.ogv-article {
	--ogv-a-text: #fff;
	--ogv-a-muted: rgba(255, 255, 255, 0.85);
	--ogv-a-accent: #fff;            /* title, subheadings, links, icons */
	--ogv-a-underline: rgba(255, 255, 255, 0.55);
	--ogv-a-box: rgba(255, 255, 255, 0.14);
	--ogv-a-box-hover: rgba(255, 255, 255, 0.22);
	--ogv-a-box-line: rgba(255, 255, 255, 0.22);
	--ogv-a-rule: rgba(255, 255, 255, 0.3);
	--ogv-a-label-bg: #fff;
	--ogv-a-label-text: #4f8a0f;
	--ogv-a-dot: rgba(255, 255, 255, 0.5);
	--ogv-a-dot-active: #fff;
	--ogv-a-share-bg: #fff;
	--ogv-a-share-shadow: 0 6px 20px rgba(17, 24, 10, 0.15);
}

.changeColor .ogv-article {
	--ogv-a-text: #444;
	--ogv-a-muted: #5f6f4b;
	--ogv-a-accent: #4f8a0f;
	--ogv-a-underline: rgba(79, 138, 15, 0.45);
	--ogv-a-box: #f3f8ec;
	--ogv-a-box-hover: #e8f2db;
	--ogv-a-box-line: #dcebc8;
	--ogv-a-rule: #dfe8d2;
	--ogv-a-label-bg: #6fb016;
	--ogv-a-label-text: #fff;
	--ogv-a-dot: #c9dcb0;
	--ogv-a-dot-active: #6fb016;
	--ogv-a-share-bg: #f3f8ec;
	--ogv-a-share-shadow: inset 0 0 0 1px #dcebc8;
}

/* Fade together with the page background */
.ogv-article,
.ogv-article-category,
.ogv-article-title,
.ogv-article-facts li,
.ogv-article-facts i,
.ogv-article-lead,
.ogv-article-lead p,
.ogv-article-body h2,
.ogv-article-body h3,
.ogv-article-body h4,
.ogv-article-related a,
.ogv-article-share,
.ogv-article a,
.ogv-article-media .dot {
	transition: color 0.7s, background-color 0.7s, box-shadow 0.7s, text-decoration-color 0.7s;
}

.ogv-article {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 0 48px;
	color: var(--ogv-a-text);
}

/* Kicker: category + date / "Veranstaltung" */
.ogv-article-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 14px;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ogv-article-category {
	padding: 4px 10px;
	border-radius: var(--ogv-radius, 3px);
	background: var(--ogv-a-label-bg);
	color: var(--ogv-a-label-text);
	font-weight: 700;
}

.ogv-article-type,
.ogv-article-date {
	color: var(--ogv-a-muted);
	font-weight: 700;
}

/* Neutralise the global h1/h2 rules of styles.css (capitals, 3em, shifted left, "|" before) inside the article */
.ogv-article h1,
.ogv-article h2 {
	margin-left: 0;
	padding-left: 0;
	text-align: left;
	text-transform: none;
	transform: none;
}

.ogv-article h1::before,
.ogv-article h2::before {
	content: none;
	display: none;
}

.ogv-article-title {
	margin: 0 0 28px;
	color: var(--ogv-a-accent) !important;
	opacity: 1;
	font-size: clamp(1.75rem, 3.2vw, 2.625rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.005em;
}

/* Event facts: date, time, place */
.ogv-article-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.ogv-article-facts li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--ogv-radius, 3px);
	background: var(--ogv-a-box);
	box-shadow: inset 0 0 0 1px var(--ogv-a-box-line);
}

.ogv-article-facts i {
	flex-shrink: 0;
	width: 28px;
	margin-top: 2px;
	color: var(--ogv-a-accent);
	font-size: 1.5rem;
	text-align: center;
}

.ogv-article-facts small {
	display: block;
	margin-bottom: 2px;
	color: var(--ogv-a-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ogv-article-facts strong {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.35;
}

/* Lead (teaser) */
.ogv-article-lead,
.ogv-article-lead p {
	margin: 0 0 32px;
	color: var(--ogv-a-text);
	font-family: 'Source Serif Pro', serif;
	font-size: 1.375rem;
	line-height: 1.45;
}

.ogv-article-lead p:last-child {
	margin-bottom: 0;
}

/* Images (single image or keen slider) */
.ogv-article-media {
	margin: 0 0 40px;
}

.ogv-article-media img {
	display: block;
	max-width: 100%;
	height: auto !important;
	margin: 0 auto;
	border-radius: var(--ogv-radius, 3px);
	box-shadow: 0 10px 30px rgba(17, 24, 10, 0.25);
}

.ogv-article-media .news-img-caption {
	margin: 10px 0 0;
	color: var(--ogv-a-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* Gallery (keen slider, several images): dots and arrows like the homepage slider */
.ogv-article-media .dots {
	gap: 6px;
	margin: 14px 0 0;
	padding: 0;
}

.ogv-article-media .dot {
	width: 18px;
	height: 4px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	background: var(--ogv-a-dot);
	transition: width 0.25s ease, background-color 0.25s ease;
}

.ogv-article-media .dot--active {
	width: 36px;
	background: var(--ogv-a-dot-active);
}

.ogv-article-media .arrow {
	fill: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.ogv-article-media .arrow--disabled {
	fill: rgba(255, 255, 255, 0.4);
}

/* Body text */
.ogv-article-body {
	font-size: 1.125rem;
	line-height: 1.7;
}

.ogv-article-body p {
	margin: 0 0 1.1em;
	font-size: inherit;
	line-height: inherit;
}

.ogv-article-body h2,
.ogv-article-body h3,
.ogv-article-body h4 {
	margin: 1.6em 0 0.5em;
	color: var(--ogv-a-accent);
	font-weight: 700;
	line-height: 1.25;
}

.ogv-article-body ul,
.ogv-article-body ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.ogv-article-body li {
	margin-bottom: 0.35em;
}

.ogv-article-body li::marker {
	color: var(--ogv-a-accent);
}

.ogv-article-body a,
.ogv-article-related a span,
.ogv-article-back a {
	color: var(--ogv-a-accent);
	text-decoration: underline;
	text-decoration-color: var(--ogv-a-underline);
	text-underline-offset: 3px;
}

.ogv-article-body a:hover,
.ogv-article-related a:hover span,
.ogv-article-back a:hover {
	color: var(--ogv-a-accent);
	text-decoration-color: var(--ogv-a-accent);
}

.ogv-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ogv-radius, 3px);
}

.ogv-article-body table {
	width: 100%;
	margin: 0 0 1.1em;
	border-collapse: collapse;
}

.ogv-article-body td,
.ogv-article-body th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--ogv-a-rule);
	vertical-align: top;
}

/* Related files / links / news */
.ogv-article-related {
	margin-top: 40px;
}

.ogv-article-related section + section {
	margin-top: 24px;
}

.ogv-article-related h2 {
	margin: 0 0 10px;
	color: var(--ogv-a-muted);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ogv-article-related ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogv-article-related li + li {
	margin-top: 8px;
}

.ogv-article-related a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--ogv-radius, 3px);
	background: var(--ogv-a-box);
	color: var(--ogv-a-accent);
	text-decoration: none;
}

.ogv-article-related a:hover {
	background: var(--ogv-a-box-hover);
	text-decoration: none;
}

.ogv-article-related a small {
	margin-left: auto;
	color: var(--ogv-a-muted);
	white-space: nowrap;
}

/* Share box */
.ogv-article-share {
	margin-top: 48px;
	padding: 28px 24px;
	border-radius: var(--ogv-radius, 3px);
	background: var(--ogv-a-share-bg);
	color: #24330f;
	text-align: center;
	box-shadow: var(--ogv-a-share-shadow);
}

.ogv-article-share-title {
	margin: 0 0 16px;
	color: #365f0a;
	font-size: 1.125rem;
	font-weight: 700;
}

.ogv-article-share #share .jssocials-share-link {
	border-color: #6fb016;
	border-radius: var(--ogv-radius, 3px);
	color: #4f8a0f;
}

.ogv-article-share #share .jssocials-share-link:hover {
	background: #6fb016;
	color: #fff;
}

.ogv-article-share-link {
	margin: 16px 0 0;
	color: #5f6f4b;
	font-size: 0.9375rem;
}

.ogv-article-share-link a {
	color: #4f8a0f;
	font-weight: 700;
}

.ogv-article-back {
	margin: 28px 0 0;
	font-weight: 700;
}

@media (max-width: 767px) {
	.ogv-article {
		padding: 32px 0 32px;
	}

	.ogv-article-lead,
	.ogv-article-lead p {
		font-size: 1.1875rem;
	}

	.ogv-article-body {
		font-size: 1.0625rem;
	}
}