/**
 * ZUKE News – Frontend-Styles.
 *
 * Ein Stylesheet für beide Sites. Alle Farben und Schriften laufen über
 * --zkn-* Custom Properties, die auf die Theme-Tokens der jeweiligen Site
 * zeigen (avada-child: --zk-ink/--zk-line/--zk-lime …, avada-child-kongress:
 * --zk-primary-900/--zk-border/--zk-lime …). Fehlt ein Token, greift der
 * hinterlegte Hex-Fallback — das Stylesheet funktioniert also auch standalone.
 *
 * Namespace ist durchgängig .zkn-* und kollidiert damit nicht mit den
 * bestehenden .zk-blog-* Klassen der Child-Themes.
 */

.zkn {
	/* Farben — erst Hauptseiten-Token, dann Kongress-Token, dann Hex. */
	--zkn-ink:        var(--zk-ink, var(--zk-primary-900, #0a2010));
	--zkn-text:       var(--zk-text, #1a2e1a);
	--zkn-muted:      var(--zk-soft, var(--zk-text-muted, #6b7280));
	--zkn-muted-2:    var(--zk-muted, var(--zk-text-secondary, #4b5563));
	--zkn-line:       var(--zk-line, var(--zk-border, #e5e7eb));
	--zkn-accent:     var(--zk-lime-dark, #689f38);
	--zkn-accent-2:   var(--zk-lime, #8bc34a);
	--zkn-paper:      #ffffff;
	--zkn-paper-2:    var(--zk-paper-2, var(--zk-bg-alt, #f8faf5));
	--zkn-btn:        var(--zk-lime-dark, #689f38);
	--zkn-btn-hover:  var(--zk-green-800, var(--zk-primary-800, #1a4d1a));
	--zkn-btn-text:   #ffffff;

	/* Verläufe für Kacheln ohne Beitragsbild. */
	--zkn-ph-a: linear-gradient(135deg, var(--zk-green-100, var(--zk-primary-100, #c8e6c9)), var(--zk-green-200, var(--zk-primary-200, #a5d6a7)));
	--zkn-ph-b: linear-gradient(135deg, #e8f0e0, #d4e8c0);
	--zkn-ph-c: linear-gradient(135deg, var(--zk-green-50, var(--zk-primary-50, #e8f5e9)), #f0f7e6);

	--zkn-radius: 4px;
	--zkn-gap: 24px;

	--zkn-font-display: var(--zk-font-display, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
	--zkn-font-body:    var(--zk-font-body, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);

	font-family: var(--zkn-font-body);
	color: var(--zkn-text);
}

.zkn *,
.zkn *::before,
.zkn *::after { box-sizing: border-box; }

.zkn img { max-width: 100%; height: auto; display: block; }
.zkn button { font: inherit; }

.zkn-empty {
	font-family: var(--zkn-font-body);
	color: var(--zkn-muted);
	font-size: 0.95rem;
	margin: 0;
}

.zkn-notice {
	font-family: var(--zkn-font-body);
	font-size: 0.9rem;
	color: #7a5c00;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: var(--zkn-radius);
	padding: 12px 16px;
	margin: 0 0 24px;
}

/* =====================================================================
   Gemeinsame Bausteine: Tag, Meta, Platzhalter-Bild
   ===================================================================== */

.zkn .zkn-tag {
	font-family: var(--zkn-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zkn-accent);
	display: block;
	margin-bottom: 10px;
}

.zkn-meta {
	font-family: var(--zkn-font-body);
	font-size: 0.78rem;
	color: var(--zkn-muted);
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.zkn-meta__sep { opacity: 0.55; }
.zkn-meta__ext { color: var(--zkn-accent); font-weight: 600; }

/* Platzhalter, wenn kein Beitragsbild gepflegt ist. */
.zkn-card__media--empty,
.zkn-row__media--empty,
.zkn-hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--zkn-font-display);
	font-size: 3.4rem;
	line-height: 1;
	color: var(--zk-green-700, var(--zk-primary-700, #236b23));
	letter-spacing: -0.02em;
	background: var(--zkn-ph-a);
}

.zkn [data-variant='b'] { background: var(--zkn-ph-b); }
.zkn [data-variant='c'] { background: var(--zkn-ph-c); }

/* =====================================================================
   Filter-Pills
   ===================================================================== */

.zkn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.zkn .zkn-filter__pill {
	font-family: var(--zkn-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--zkn-muted-2);
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: 999px;
	padding: 7px 16px;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.zkn .zkn-filter__pill:hover,
.zkn .zkn-filter__pill:focus-visible {
	color: var(--zkn-ink);
	border-color: var(--zkn-accent-2);
}

.zkn .zkn-filter__pill.is-active {
	color: #ffffff;
	background: var(--zkn-accent);
	border-color: var(--zkn-accent);
}

/* =====================================================================
   Grid + Kachel
   ===================================================================== */

.zkn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--zkn-gap);
}

.zkn[data-cols='2'] .zkn-grid { grid-template-columns: repeat(2, 1fr); }
.zkn[data-cols='4'] .zkn-grid { grid-template-columns: repeat(4, 1fr); }

.zkn-card {
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: var(--zkn-radius);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zkn-card:hover,
.zkn-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(15, 43, 15, 0.08);
}

.zkn .zkn-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.zkn-card__media {
	height: 180px;
	overflow: hidden;
	background: var(--zkn-paper-2);
}

.zkn-card__media .zkn-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zkn-card:hover .zkn-card__media .zkn-card__img { transform: scale(1.04); }

.zkn-card__body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.zkn .zkn-card__title {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	line-height: 1.3 !important;
	color: var(--zkn-ink) !important;
	margin: 0 0 10px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.zkn .zkn-card__text {
	font-family: var(--zkn-font-body);
	font-size: 0.88rem;
	color: var(--zkn-muted);
	line-height: 1.65;
	margin: 0;
}

.zkn-card__body .zkn-meta { margin-top: auto; padding-top: 12px; }

.zkn-card--external .zkn-card__title::after {
	content: ' ↗';
	font-size: 0.85em;
	color: var(--zkn-accent);
}

/* =====================================================================
   Top-Beitrag (grosse Kachel über dem Grid)
   ===================================================================== */

.zkn-hero {
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: var(--zkn-radius);
	overflow: hidden;
	margin-bottom: var(--zkn-gap);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zkn-hero:hover,
.zkn-hero:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(15, 43, 15, 0.1);
}

.zkn .zkn-hero__link {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	text-decoration: none;
	color: inherit;
	min-height: 320px;
}

.zkn-hero__media { overflow: hidden; background: var(--zkn-paper-2); }

.zkn-hero__media .zkn-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zkn-hero:hover .zkn-hero__media .zkn-card__img { transform: scale(1.03); }

.zkn-hero__media--empty { font-size: 5rem; min-height: 260px; }

.zkn-hero__body {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.zkn-hero__flag {
	font-family: var(--zkn-font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zkn-ink);
	background: var(--zkn-accent-2);
	border-radius: 999px;
	padding: 4px 12px;
	align-self: flex-start;
	margin-bottom: 16px;
}

.zkn .zkn-hero__title {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: var(--zkn-ink) !important;
	margin: 0 0 14px !important;
	text-transform: none !important;
}

.zkn .zkn-hero__text {
	font-family: var(--zkn-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--zkn-muted-2);
	margin: 0;
}

.zkn-hero__cta {
	font-family: var(--zkn-font-body);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--zkn-accent);
	margin-top: 20px;
}

/* =====================================================================
   Listenansicht
   ===================================================================== */

.zkn-list { display: flex; flex-direction: column; gap: 16px; }

.zkn-row {
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: var(--zkn-radius);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zkn-row:hover,
.zkn-row:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 43, 15, 0.07);
}

.zkn .zkn-row__link {
	display: grid;
	grid-template-columns: 260px 1fr;
	text-decoration: none;
	color: inherit;
}

.zkn-row__media { overflow: hidden; min-height: 170px; background: var(--zkn-paper-2); }

.zkn-row__media .zkn-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zkn-row__media--empty { font-size: 2.8rem; }

.zkn-row__body { padding: 24px 28px; }

.zkn .zkn-row__title {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.2rem !important;
	line-height: 1.25 !important;
	color: var(--zkn-ink) !important;
	margin: 0 0 10px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.zkn .zkn-row__text {
	font-family: var(--zkn-font-body);
	font-size: 0.92rem;
	color: var(--zkn-muted);
	line-height: 1.65;
	margin: 0;
}

/* =====================================================================
   Teaser-Button + Paginierung
   ===================================================================== */

.zkn-more { margin-top: 32px; text-align: center; }

.zkn .zkn-btn {
	display: inline-block;
	font-family: var(--zkn-font-body);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	color: var(--zkn-btn-text);
	background: var(--zkn-btn);
	border-radius: var(--zkn-radius);
	padding: 14px 30px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.zkn .zkn-btn:hover,
.zkn .zkn-btn:focus-visible { background: var(--zkn-btn-hover); color: var(--zkn-btn-text); }

.zkn-pagination { margin-top: 40px; }

.zkn-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.zkn-pagination li { margin: 0; }

.zkn-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	font-family: var(--zkn-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--zkn-muted-2);
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: var(--zkn-radius);
	padding: 9px 14px;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.zkn-pagination a.page-numbers:hover,
.zkn-pagination a.page-numbers:focus-visible {
	color: var(--zkn-ink);
	border-color: var(--zkn-accent-2);
}

.zkn-pagination .page-numbers.current {
	color: #ffffff;
	background: var(--zkn-accent);
	border-color: var(--zkn-accent);
}

.zkn-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* =====================================================================
   Detailansicht
   ===================================================================== */

.zkn--single {
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 24px 96px;
}

.zkn-crumbs {
	font-family: var(--zkn-font-body);
	font-size: 0.8rem;
	color: var(--zkn-muted);
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 28px;
}

.zkn .zkn-crumbs a { color: var(--zkn-muted); text-decoration: none; }
.zkn .zkn-crumbs a:hover { color: var(--zkn-accent); }

.zkn-single__head { margin-bottom: 32px; }

.zkn .zkn-single__title {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.01em !important;
	color: var(--zkn-ink) !important;
	margin: 0 0 18px !important;
	text-transform: none !important;
}

.zkn .zkn-single__lead {
	font-family: var(--zkn-font-body);
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--zkn-muted-2);
	margin: 0 0 20px;
}

.zkn-single__byline {
	font-family: var(--zkn-font-body);
	font-size: 0.85rem;
	color: var(--zkn-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--zkn-line);
}

.zkn-single__author { font-weight: 600; color: var(--zkn-muted-2); }

.zkn-single__figure {
	margin: 0 0 36px;
	border-radius: var(--zkn-radius);
	overflow: hidden;
}

.zkn-single__figure .zkn-single__img { width: 100%; height: auto; }

/* Fliesstext des Beitrags. */
.zkn-single__body {
	font-family: var(--zkn-font-body);
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--zkn-muted-2);
}

.zkn-single__body > *:first-child { margin-top: 0; }
.zkn-single__body > *:last-child { margin-bottom: 0; }
.zkn-single__body p { margin: 0 0 22px; }

.zkn-single__body h2,
.zkn-single__body h3,
.zkn-single__body h4 {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	color: var(--zkn-ink) !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.zkn-single__body h2 { font-size: 1.7rem !important; margin: 44px 0 16px !important; }
.zkn-single__body h3 { font-size: 1.32rem !important; margin: 36px 0 14px !important; }
.zkn-single__body h4 { font-size: 1.12rem !important; margin: 30px 0 12px !important; }

.zkn-single__body ul,
.zkn-single__body ol { margin: 0 0 22px; padding-left: 22px; }
.zkn-single__body li { margin-bottom: 8px; }

.zkn-single__body a { color: var(--zkn-accent); text-decoration: underline; }
.zkn-single__body a:hover { color: var(--zkn-btn-hover); }

.zkn-single__body img { border-radius: var(--zkn-radius); margin: 8px 0 22px; }

.zkn-single__body blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--zkn-accent-2);
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--zkn-ink);
}

.zkn-single__body blockquote p:last-child { margin-bottom: 0; }

.zkn-single__body figure { margin: 0 0 22px; }
.zkn-single__body figcaption {
	font-size: 0.82rem;
	color: var(--zkn-muted);
	margin-top: 8px;
}

.zkn-single__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: 0.95rem;
}

.zkn-single__body th,
.zkn-single__body td {
	border: 1px solid var(--zkn-line);
	padding: 10px 12px;
	text-align: left;
}

.zkn-single__body th { background: var(--zkn-paper-2); color: var(--zkn-ink); }

.zkn-single__foot {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--zkn-line);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}

.zkn .zkn-back {
	font-family: var(--zkn-font-body);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--zkn-accent);
	text-decoration: none;
}

.zkn .zkn-back:hover { color: var(--zkn-btn-hover); }

.zkn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.zkn-share__label {
	font-family: var(--zkn-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zkn-muted);
	margin-right: 4px;
}

.zkn .zkn-share__btn {
	font-family: var(--zkn-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--zkn-muted-2);
	background: var(--zkn-paper);
	border: 1px solid var(--zkn-line);
	border-radius: 999px;
	padding: 7px 14px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.zkn .zkn-share__btn:hover,
.zkn .zkn-share__btn:focus-visible {
	color: var(--zkn-ink);
	border-color: var(--zkn-accent-2);
}

.zkn .zkn-share__copy.is-done {
	color: #ffffff;
	background: var(--zkn-accent);
	border-color: var(--zkn-accent);
}

/* Weitere Beiträge */
.zkn-related {
	margin-top: 72px;
	padding-top: 44px;
	border-top: 1px solid var(--zkn-line);
}

.zkn .zkn-related__title {
	font-family: var(--zkn-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.5rem !important;
	color: var(--zkn-ink) !important;
	margin: 0 0 26px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1024px) {
	.zkn-grid,
	.zkn[data-cols='4'] .zkn-grid { grid-template-columns: repeat(2, 1fr); }
	.zkn .zkn-hero__link { grid-template-columns: 1fr; }
	.zkn-hero__media { min-height: 240px; }
	.zkn-hero__body { padding: 32px; }
}

@media (max-width: 768px) {
	.zkn-grid,
	.zkn[data-cols='2'] .zkn-grid,
	.zkn[data-cols='4'] .zkn-grid { grid-template-columns: 1fr; }
	.zkn .zkn-row__link { grid-template-columns: 1fr; }
	.zkn-row__media { min-height: 200px; }
	.zkn-row__body { padding: 22px; }
	.zkn--single { padding: 36px 20px 72px; }
	.zkn-single__foot { flex-direction: column; align-items: flex-start; }
	.zkn-related { margin-top: 56px; }
}