/*
Theme Name:  Kocher-Jagst Regional
Theme URI:   https://kocher-jagst-region.de
Description: Kadence Child Theme für das Regionalportal Kocher-Jagst-Region.de
Author:      JSPaceworks – Jörg Pleßer
Author URI:  https://jspaceworks.de
Template:    kadence
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kj-regional
*/

/* ════════════════════════════════════════════════════════════════
   LOKALE SCHRIFTEN (DSGVO-konform – kein Google CDN)
   Lora (Überschriften) · Inter (Fließtext & UI)
   Quellen: @fontsource/lora, @fontsource/inter (SIL Open Font Licence)
   ════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-latin-400-normal.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-latin-400-italic.woff2') format('woff2');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-latin-600-normal.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-latin-700-normal.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Design-Tokens ───────────────────────────────────────────────── */
:root {
	--kj-primary:    #3D6B4F;
	--kj-primary-dk: #2d5039;
	--kj-accent:     #C8882A;
	--kj-accent-dk:  #a96e1e;
	--kj-bg:         #F5F2EC;
	--kj-light:      #EAE6DE;
	--kj-text:       #1E2D24;
	--kj-white:      #FFFFFF;

	--kj-font-heading: 'Lora', Georgia, serif;
	--kj-font-body:    'Inter', system-ui, sans-serif;
}

/* ── Basis-Typografie ────────────────────────────────────────────── */
body {
	font-family: var(--kj-font-body);
	color: var(--kj-text);
	background-color: var(--kj-bg);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--kj-font-heading);
	color: var(--kj-text);
}

/* ── Links ───────────────────────────────────────────────────────── */
a {
	color: var(--kj-primary);
}
a:hover {
	color: var(--kj-primary-dk);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.wp-block-button__link,
.button,
button[type="submit"] {
	background-color: var(--kj-primary);
	color: var(--kj-white);
	border-radius: 6px;
	font-family: var(--kj-font-body);
	font-weight: 500;
}
/* Primär-Button Hover – verhindert Kadence-Overlay */
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--kj-primary-dk) !important;
	color: var(--kj-white) !important;
	opacity: 1 !important;
	border-color: var(--kj-primary-dk) !important;
}
.button:hover,
button[type="submit"]:hover {
	background-color: var(--kj-primary-dk);
	color: var(--kj-white);
}

/* Outline-Button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--kj-primary);
	color: var(--kj-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: var(--kj-primary) !important;
	color: var(--kj-white) !important;
	border-color: var(--kj-primary) !important;
	opacity: 1 !important;
}

/* ── POI-Karte Placeholder ───────────────────────────────────────── */
.kj-map-container {
	width: 100%;
	min-height: 420px;
	border-radius: 10px;
	overflow: hidden;
}

/* ── Kategorie-Badge ─────────────────────────────────────────────── */
.kj-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	background-color: var(--kj-light);
	color: var(--kj-primary);
	font-size: 0.78rem;
	font-weight: 500;
	font-family: var(--kj-font-body);
	text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   HERO (Custom-HTML-Variante, self-contained) – Präfix .kjh-
   ════════════════════════════════════════════════════════════════ */
.kjh-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--kj-white);
	padding: 64px 40px 56px;
}
.kjh-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}
.kjh-left  { flex: 1 1 460px; }
.kjh-right { flex: 1 1 380px; }

.kjh-tag {
	display: inline-block;
	background: #f5e4cc;
	color: var(--kj-accent);
	font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 5px 12px; border-radius: 20px;
	margin-bottom: 20px;
}
.kjh-title {
	font-family: var(--kj-font-heading);
	font-size: clamp(38px, 4.5vw, 56px);
	font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
	color: var(--kj-text); margin: 0 0 20px;
}
.kjh-title .accent { color: var(--kj-primary); }
.kjh-title em {
	font-size: 0.82em; font-weight: 400;
	color: var(--kj-tx2, #4a5e52); font-style: italic;
}
.kjh-sub {
	font-size: 16px; line-height: 1.7;
	color: var(--kj-tx2, #4a5e52);
	max-width: 460px; margin: 0 0 32px;
}

.kjh-search {
	display: flex; max-width: 460px;
	border: 1.5px solid var(--kj-light);
	border-radius: 8px; overflow: hidden;
	background: #fff; margin-bottom: 20px;
}
.kjh-search input {
	flex: 1; border: none; outline: none;
	padding: 13px 16px; font-size: 14.5px;
	font-family: var(--kj-font-body); color: var(--kj-text);
}
.kjh-search button {
	background: var(--kj-accent); color: #fff; border: none;
	padding: 13px 20px; font-size: 14px; font-weight: 600;
	font-family: var(--kj-font-body); cursor: pointer;
	transition: background 0.15s;
}
.kjh-search button:hover { background: var(--kj-accent-dk); }

.kjh-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.kjh-btn-primary {
	background: var(--kj-primary); color: #fff !important;
	padding: 11px 22px; border-radius: 6px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	transition: background 0.15s;
}
.kjh-btn-primary:hover { background: var(--kj-primary-dk); }
.kjh-btn-outline {
	background: transparent; color: var(--kj-primary) !important;
	padding: 10px 22px; border: 1.5px solid var(--kj-primary);
	border-radius: 6px; font-size: 14px; font-weight: 500;
	text-decoration: none; transition: all 0.15s;
}
.kjh-btn-outline:hover { background: var(--kj-primary); color: #fff !important; }

/* Bildkarte – Hintergrundbild über inline style austauschbar */
.kjh-photo {
	position: relative;
	min-height: 360px; border-radius: 16px;
	background: linear-gradient(160deg, #2d5a38 0%, #3d6b4f 50%, #4a7a5c 100%);
	background-size: cover; background-position: center;
	box-shadow: 0 8px 40px rgba(30,45,36,0.18);
	padding: 16px;
}
.kjh-badge {
	display: inline-block;
	background: rgba(255,255,255,0.93); color: var(--kj-text);
	font-size: 12.5px; font-weight: 600;
	padding: 8px 14px; border-radius: 30px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.kjh-stats {
	display: flex; justify-content: space-around; align-items: center;
	background: #fff; border-radius: 12px;
	padding: 16px 12px; margin: 16px 12px 0;
	box-shadow: 0 4px 24px rgba(30,45,36,0.12);
	position: relative; z-index: 2;
}
.kjh-stat { flex: 1; text-align: center; }
.kjh-stat.bordered { border-left: 1px solid var(--kj-light); border-right: 1px solid var(--kj-light); }
.kjh-stat strong {
	display: block; font-family: var(--kj-font-heading);
	font-size: 22px; font-weight: 700; color: var(--kj-primary);
}
.kjh-stat span { font-size: 11px; color: #999; margin-top: 2px; display: block; }

/* Kategorie-Leiste */
.kjh-catbar {
	width: 100vw; margin-left: calc(50% - 50vw);
	display: flex; background: #fff;
	border-top: 1px solid var(--kj-light);
	border-bottom: 1px solid var(--kj-light);
}
.kjh-catbar a {
	flex: 1; text-align: center; padding: 18px 8px;
	font-size: 13.5px; font-weight: 500;
	color: var(--kj-tx2, #4a5e52); text-decoration: none;
	border-right: 1px solid var(--kj-light);
	transition: background 0.15s, color 0.15s;
}
.kjh-catbar a:last-child { border-right: none; }
.kjh-catbar a:hover { background: var(--kj-bg); color: var(--kj-primary); }

@media (max-width: 781px) {
	.kjh-section { padding: 40px 20px; }
	.kjh-grid { gap: 32px; }
	.kjh-catbar { flex-wrap: wrap; }
	.kjh-catbar a { flex: 1 1 50%; border-bottom: 1px solid var(--kj-light); }
}

/* ── Hero (alte block-basierte Variante, Fallback) ───────────────── */
/* Spalten vertikal zentrieren – volle Breite, kein max-width */
.kj-hero__cols.wp-block-columns {
	align-items: center;
}
/* Kein Top-Abstand zwischen Header und Hero */
.wp-block-group.kj-hero {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Stats als Flex-Zeile (ersetzt layout:flex Attribut) */
.kj-hero__stats.wp-block-group {
	display: flex !important;
	justify-content: space-around;
	align-items: center;
}
.kj-stat.wp-block-group {
	flex: 1;
	text-align: center;
}
.kj-hero__photo {
	box-shadow: 0 8px 40px rgba(30,45,36,0.18);
}
.kj-hero__badge {
	display: inline-block;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	backdrop-filter: blur(4px);
}
.kj-hero__stats {
	box-shadow: 0 4px 24px rgba(30,45,36,0.12);
	position: relative;
	z-index: 2;
	margin-left: 12px;
	margin-right: 12px;
}
.kj-stat { flex: 1; gap: 2px; }
.kj-stat--bordered {
	border-left: 1px solid var(--kj-light);
	border-right: 1px solid var(--kj-light);
}
.kj-hero__search .wp-block-search__input {
	border: 1.5px solid var(--kj-light);
	border-right: none;
	background: var(--kj-white);
	padding: 13px 16px;
}
.kj-hero__search .wp-block-search__button {
	background-color: var(--kj-accent);
	color: var(--kj-white);
	border: none;
	margin-left: 0;
	padding: 13px 20px;
	font-weight: 600;
	transition: background 0.15s;
}
.kj-hero__search .wp-block-search__button:hover {
	background-color: var(--kj-accent-dk);
}

/* Outline-Button Hover (Sekundär-CTA) */
.kj-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--kj-primary);
	color: var(--kj-white);
}

/* ── Kategorie-Leiste (Startseite Hero) ──────────────────────────── */
.kj-cat-bar .wp-block-columns { border-bottom: none; }
.kj-cat-item {
	border-right: 1px solid var(--kj-light);
	transition: background 0.15s;
}
.kj-cat-item:last-child { border-right: none; }
.kj-cat-item:hover { background-color: var(--kj-bg); }
.kj-cat-item:hover a { color: var(--kj-primary) !important; }
.kj-cat-item a { transition: color 0.15s; }

/* ── Hero Responsive ─────────────────────────────────────────────── */
@media (max-width: 781px) {
	.kj-hero { padding-left: 20px !important; padding-right: 20px !important; }
	.kj-hero__photo { margin-top: 24px; }
	.kj-cat-bar { padding-left: 0 !important; padding-right: 0 !important; }
	.kj-cat-item { border-right: none; border-bottom: 1px solid var(--kj-light); }
}

/* ── POI-Karte Single ────────────────────────────────────────────── */
.kj-poi-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin: 24px 0;
	padding: 20px;
	background: var(--kj-light);
	border-radius: 8px;
}
.kj-poi-meta dt {
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--kj-primary);
	font-family: var(--kj-font-body);
}
.kj-poi-meta dd {
	margin: 0;
	font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════
   POST-KACHELN ([kj_beitraege] Shortcode)
   ════════════════════════════════════════════════════════════════ */
.kj-posts-grid {
	display: grid;
	gap: 28px;
	margin: 48px 0;
}
.kj-posts-grid.kj-cols-3 { grid-template-columns: repeat(3, 1fr); }
.kj-posts-grid.kj-cols-2 { grid-template-columns: repeat(2, 1fr); }

.kj-post-card {
	background: var(--kj-white);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(30,45,36,0.08);
	transition: transform 0.18s, box-shadow 0.18s;
	display: flex;
	flex-direction: column;
}
.kj-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(30,45,36,0.15);
}

.kj-post-card__img-wrap {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.kj-post-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
	display: block;
}
.kj-post-card:hover .kj-post-card__img {
	transform: scale(1.04);
}
.kj-post-card__img-placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--kj-light) 0%, var(--kj-bg) 100%);
}

.kj-post-card__body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kj-post-card__cat {
	display: inline-block;
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--kj-accent);
	background: #f5e4cc;
	padding: 3px 10px; border-radius: 10px;
	margin-bottom: 10px;
	font-family: var(--kj-font-body);
}

.kj-post-card__title {
	font-family: var(--kj-font-heading);
	font-size: 17px; font-weight: 700; line-height: 1.3;
	margin: 0 0 10px;
}
.kj-post-card__title a {
	color: var(--kj-text); text-decoration: none;
	transition: color 0.15s;
}
.kj-post-card__title a:hover { color: var(--kj-primary); }

.kj-post-card__excerpt {
	font-size: 14px; line-height: 1.65;
	color: var(--kj-tx2, #4a5e52);
	margin: 0 0 14px; flex: 1;
}

.kj-post-card__poi {
	display: inline-block; font-size: 12px;
	color: var(--kj-primary); text-decoration: none;
	margin-bottom: 12px;
}
.kj-post-card__poi:hover { text-decoration: underline; }

.kj-post-card__link {
	font-size: 13.5px; font-weight: 600;
	color: var(--kj-primary); text-decoration: none;
	margin-top: auto;
	transition: color 0.15s;
}
.kj-post-card__link:hover { color: var(--kj-primary-dk); }

.kj-no-posts {
	color: var(--kj-tx2, #4a5e52);
	font-style: italic; padding: 24px 0;
}

/* ── Kategorie-Landingpage Intro ─────────────────────────────────── */
.kj-cat-intro {
	padding: 80px 40px 64px;
	background: var(--kj-white);
}
.kj-cat-intro__inner {
	max-width: 720px;
}
.kj-cat-intro__tag {
	display: inline-block;
	font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--kj-accent); background: #f5e4cc;
	padding: 5px 12px; border-radius: 20px;
	margin-bottom: 20px;
}
.kj-cat-beitraege-wrap {
	padding: 0 40px 80px;
}

/* Responsive */
@media (max-width: 900px) {
	.kj-posts-grid.kj-cols-3 { grid-template-columns: repeat(2, 1fr); }
	.kj-cat-intro, .kj-cat-beitraege-wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 580px) {
	.kj-posts-grid.kj-cols-3,
	.kj-posts-grid.kj-cols-2 { grid-template-columns: 1fr; }
}

/* ── Kategorie-Hero ──────────────────────────────────────────────── */
.kj-cat-hero h1,
.kj-cat-hero p,
.kj-cat-hero a {
	color: #fff;
}

/* ── POI-Liste ([kj_poi_liste] Shortcode) ────────────────────────── */
.kj-poi-liste {
	list-style: none;
	padding: 0; margin: 32px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.kj-poi-liste__link {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	background: var(--kj-white);
	border: 1.5px solid var(--kj-light);
	border-radius: 8px;
	text-decoration: none; color: var(--kj-text);
	transition: border-color 0.15s, color 0.15s, transform 0.12s;
}
.kj-poi-liste__link:hover {
	border-color: var(--kj-primary);
	color: var(--kj-primary);
	transform: translateX(3px);
}
.kj-poi-liste__emoji {
	font-size: 20px; flex-shrink: 0;
}
.kj-poi-liste__body {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
}
.kj-poi-liste__name {
	font-size: 14px; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kj-poi-liste__ort {
	font-size: 12px; color: var(--kj-tx2, #4a5e52);
}
.kj-poi-liste__arrow {
	font-size: 14px; color: var(--kj-primary); flex-shrink: 0;
	transition: transform 0.12s;
}
.kj-poi-liste__link:hover .kj-poi-liste__arrow {
	transform: translateX(3px);
}

/* Responsive */
@media (max-width: 640px) {
	.kj-poi-liste { grid-template-columns: 1fr; }
}

/* ── POI-Liste ([kj_poi_liste]) ──────────────────────────────────── */
.kj-poi-liste {
	display: grid;
	gap: 32px;
	margin: 0;
}
.kj-poi-liste--cols-2 { grid-template-columns: repeat(2, 1fr); }
.kj-poi-liste--cols-3 { grid-template-columns: repeat(3, 1fr); }
.kj-poi-liste--cols-1 { grid-template-columns: 1fr; }

.kj-poi-liste__gruppe-titel {
	font-family: var(--kj-font-heading);
	font-size: 14px; font-weight: 700;
	color: var(--kj-primary);
	text-transform: uppercase; letter-spacing: 0.08em;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--kj-light);
}

.kj-poi-liste__items {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 0;
}

.kj-poi-liste__item {
	display: flex; flex-direction: column;
	padding: 8px 0;
	border-bottom: 1px solid var(--kj-light);
}
.kj-poi-liste__item:last-child { border-bottom: none; }

.kj-poi-liste__item a {
	font-size: 14.5px; font-weight: 600;
	color: var(--kj-text); text-decoration: none;
	transition: color 0.15s;
}
.kj-poi-liste__item a:hover { color: var(--kj-primary); }

.kj-poi-liste__adresse {
	font-size: 12px; color: var(--kj-tx2, #4a5e52);
	margin-top: 2px;
}

@media (max-width: 700px) {
	.kj-poi-liste--cols-2,
	.kj-poi-liste--cols-3 { grid-template-columns: 1fr; }
}

/* ── Orte-Filter-Buttons ([kj_orte_filter]) ──────────────────────── */
.kj-orte-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}
.kj-orte-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 16px;
	border-radius: 20px;
	border: 1.5px solid var(--kj-light);
	background: #fff;
	color: var(--kj-text) !important;
	font-family: var(--kj-font-body);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 0.15s;
	white-space: nowrap;
}
.kj-orte-filter__btn:hover {
	border-color: var(--kj-cat-color, var(--kj-primary));
	color: var(--kj-cat-color, var(--kj-primary)) !important;
	background: color-mix(in srgb, var(--kj-cat-color, var(--kj-primary)) 8%, white);
}
.kj-orte-filter__btn.is-active {
	background: var(--kj-cat-color, var(--kj-primary));
	border-color: var(--kj-cat-color, var(--kj-primary));
	color: #fff !important;
	font-weight: 600;
}

.kj-poi-card__ort {
	display: block;
	font-size: 12px;
	color: var(--kj-tx2, #4a5e52);
	margin-bottom: 12px;
}

/* ── Event-Kacheln ───────────────────────────────────────────────── */
.kj-event-placeholder {
	background: linear-gradient(135deg, #3D6B4F22 0%, #C8882A22 100%);
}
.kj-event-card__date {
	font-size: 13px; font-weight: 600;
	color: var(--kj-primary);
	margin: 0 0 8px;
}
.kj-event-card__location {
	font-size: 12.5px;
	color: var(--kj-tx2, #4a5e52);
	margin: 0 0 12px;
}

/* ════════════════════════════════════════════════════════════════
   SINGLE kj_poi TEMPLATE
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
.kj-poi-hero {
	position: relative;
	background: var(--kj-poi-c, var(--kj-primary));
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	width: 100%;
	overflow: hidden;
}
.kj-poi-hero__img {
	position: absolute; inset: 0;
	overflow: hidden;
}
.kj-poi-hero__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.kj-poi-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.20) 60%, transparent 100%);
}
.kj-poi-hero__inner {
	position: relative; z-index: 1;
	width: 100%; padding: 40px 40px 48px;
	max-width: 1200px; margin: 0 auto;
}
.kj-poi-hero__inner,
.kj-poi-hero__inner *:not(a):not(span) {
	color: #fff;
}
.kj-poi-hero:not(.kj-poi-hero--has-img) .kj-poi-hero__inner * {
	color: #fff;
}
.kj-poi-breadcrumb {
	font-size: 12.5px; margin-bottom: 14px;
	opacity: .8;
}
.kj-poi-breadcrumb a {
	color: inherit; text-decoration: none;
}
.kj-poi-breadcrumb a:hover { text-decoration: underline; }
.kj-poi-breadcrumb span { margin: 0 6px; }
.kj-poi-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kj-poi-badge {
	display: inline-block;
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	padding: 4px 12px; border-radius: 20px; border: 1px solid transparent;
	font-family: var(--kj-font-body);
}
.kj-poi-badge--bub {
	background: rgba(90,154,90,.18) !important;
	color: #c8ffd4 !important;
	border-color: rgba(90,154,90,.4) !important;
}
.kj-poi-hero__title {
	font-family: var(--kj-font-heading);
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700; line-height: 1.1;
	margin: 0 0 10px; color: #fff !important;
}
.kj-poi-hero__addr { font-size: 15px; opacity: .88; margin: 0; }

/* ── Body: 2-Spalten ─────────────────────────────────────────── */
.kj-poi-body {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 40px 72px;
	align-items: start;
}
.kj-poi-text {
	font-family: var(--kj-font-body);
	font-size: 16px; line-height: 1.75;
	color: var(--kj-text);
}
.kj-poi-text p + p { margin-top: 1em; }

/* ── Verknüpfte Beiträge ─────────────────────────────────────── */
.kj-poi-related { margin-top: 48px; }
.kj-poi-related__title {
	font-family: var(--kj-font-heading);
	font-size: 20px; font-weight: 700;
	margin: 0 0 24px;
	color: var(--kj-text);
}

/* ── Info-Karte ──────────────────────────────────────────────── */
.kj-poi-sidebar { display: flex; flex-direction: column; gap: 20px; }

.kj-poi-info-card {
	background: #fff;
	border: 1px solid var(--kj-light);
	border-top: 4px solid var(--kj-poi-c, var(--kj-primary));
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(30,45,36,.07);
}
.kj-poi-info-card__heading {
	font-family: var(--kj-font-heading);
	font-size: 15px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--kj-poi-c, var(--kj-primary));
	margin: 0 0 18px;
}
.kj-poi-info-row {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--kj-light);
}
.kj-poi-info-row:last-child { border-bottom: none; }
.kj-poi-info-row--bub { background: #f0fbf0; margin: 8px -24px -24px; padding: 12px 24px; border-radius: 0 0 10px 10px; border-bottom: none; }
.kj-poi-info-row--osm { border-top: 1px dashed #ddd; margin-top: 8px; padding-top: 12px; }
.kj-poi-info-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.kj-poi-info-row strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #888; margin-bottom: 3px; font-family: var(--kj-font-body); }
.kj-poi-info-row a { color: var(--kj-primary); text-decoration: none; word-break: break-all; }
.kj-poi-info-row a:hover { text-decoration: underline; }

/* ── Mini-Karte ──────────────────────────────────────────────── */
.kj-poi-map-mini { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
#kj-single-map, #kj-event-map { height: 220px; display: block; }

/* ── Zurück-Link ─────────────────────────────────────────────── */
.kj-poi-back-link {
	display: inline-block;
	font-size: 13px; font-weight: 500;
	color: var(--kj-primary); text-decoration: none;
}
.kj-poi-back-link:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
	.kj-poi-body { grid-template-columns: 1fr; padding: 32px 20px 56px; }
	.kj-poi-hero__inner { padding: 24px 20px 36px; }
	.kj-poi-sidebar { order: -1; } /* Info-Karte oben auf Mobile */
}


/* ════════════════════════════════════════════════════════════════
   ANIMATION SYSTEM — Kocher-Jagst Regional
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
	--kj-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--kj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--kj-t-fast:      0.18s;
	--kj-t-base:      0.28s;
	--kj-t-slow:      0.48s;
	--kj-shadow-card: 0 2px 12px rgba(30,45,36,.08);
	--kj-shadow-lift: 0 12px 36px rgba(30,45,36,.16);
	--kj-shadow-deep: 0 20px 60px rgba(30,45,36,.22);
}

/* ── Scroll-Reveal ───────────────────────────────────────────── */
/* WICHTIG: Versteckt NUR wenn <html class="kj-js"> gesetzt ist (JS läuft).
   Ohne JS bleibt aller Inhalt sichtbar — keine leere Seite mehr. */
html.kj-js .kj-will-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity  var(--kj-t-slow) var(--kj-ease),
		transform var(--kj-t-slow) var(--kj-ease);
	transition-delay: calc(var(--kj-si, 0) * 70ms);
}
.kj-revealed {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	html.kj-js .kj-will-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Cards — komplettes Hover-Upgrade ───────────────────────── */
.kj-post-card {
	border-radius: 14px;
	box-shadow: var(--kj-shadow-card);
	transition:
		transform  var(--kj-t-base) var(--kj-ease),
		box-shadow var(--kj-t-base) var(--kj-ease);
	will-change: transform;
}
.kj-post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--kj-shadow-lift);
}
.kj-post-card__img-wrap {
	overflow: hidden;
	position: relative;
	border-radius: 14px 14px 0 0;
}
/* Gradient-Overlay beim Hover */
.kj-post-card__img-wrap::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,36,25,.55) 0%, transparent 55%);
	opacity: 0;
	transition: opacity var(--kj-t-base) var(--kj-ease);
	pointer-events: none;
}
.kj-post-card:hover .kj-post-card__img-wrap::after { opacity: 1; }

/* Bild-Zoom */
.kj-post-card__img {
	transition: transform 0.65s var(--kj-ease);
	will-change: transform;
}
.kj-post-card:hover .kj-post-card__img { transform: scale(1.06); }

/* Kategorie-Badge: kleiner Farbpop */
.kj-post-card__cat {
	transition: transform var(--kj-t-fast) var(--kj-ease-spring),
	            box-shadow var(--kj-t-fast) var(--kj-ease);
}
.kj-post-card:hover .kj-post-card__cat {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(30,45,36,.12);
}

/* Pfeil-Animation am Weiterlesen-Link */
.kj-post-card__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color var(--kj-t-fast) var(--kj-ease),
	            gap   var(--kj-t-fast) var(--kj-ease-spring);
}
.kj-post-card:hover .kj-post-card__link { gap: 9px; }

/* ── Hero-Sektionen — lebendiger Lichteffekt ─────────────────── */
.kj-cat-hero {
	position: relative;
	overflow: hidden;
}
.kj-cat-hero::before {
	content: '';
	position: absolute; inset: -20%;
	background: radial-gradient(
		ellipse 70% 55% at 30% 40%,
		rgba(255,255,255,.08) 0%,
		transparent 65%
	);
	animation: kj-hero-glow 9s ease-in-out infinite alternate;
	pointer-events: none;
}
.kj-cat-hero::after {
	content: '';
	position: absolute; inset: -20%;
	background: radial-gradient(
		ellipse 50% 40% at 70% 65%,
		rgba(200,136,42,.07) 0%,
		transparent 60%
	);
	animation: kj-hero-glow 12s ease-in-out infinite alternate-reverse;
	pointer-events: none;
}
@keyframes kj-hero-glow {
	0%   { transform: translate(-8%, -6%) scale(1); }
	100% { transform: translate(12%, 10%) scale(1.18); }
}

/* POI-Hero: Gradient-Overlay tiefer */
.kj-poi-hero__scrim {
	background: linear-gradient(
		to top,
		rgba(10,20,14,.78) 0%,
		rgba(10,20,14,.22) 45%,
		transparent 100%
	);
}
/* Titel-Einblendung */
.kj-poi-hero__inner .kj-poi-hero__title,
.kj-poi-hero__inner .kj-poi-hero__addr,
.kj-poi-hero__inner .kj-poi-hero__badges {
	animation: kj-fade-up .65s var(--kj-ease) both;
}
.kj-poi-hero__inner .kj-poi-hero__badges { animation-delay: .05s; }
.kj-poi-hero__inner .kj-poi-hero__title  { animation-delay: .12s; }
.kj-poi-hero__inner .kj-poi-hero__addr   { animation-delay: .20s; }
@keyframes kj-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* ── Sticky Header ────────────────────────────────────────────── */
.kj-header--scrolled {
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	background-color: rgba(245,242,236,.88) !important;
	box-shadow: 0 1px 24px rgba(30,45,36,.10);
	transition: background-color .3s var(--kj-ease),
	            box-shadow .3s var(--kj-ease);
}

/* ── Karten-Filter: moderne Pills ────────────────────────────── */
.kj-map-filters,
.kj-map-filters-2,
.kj-orte-filter {
	gap: 8px;
}
.kj-map-filter,
.kj-orte-filter__btn {
	border-radius: 100px !important;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 16px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition:
		background  var(--kj-t-fast) var(--kj-ease),
		color       var(--kj-t-fast) var(--kj-ease),
		border-color var(--kj-t-fast) var(--kj-ease),
		transform   var(--kj-t-fast) var(--kj-ease-spring),
		box-shadow  var(--kj-t-fast) var(--kj-ease);
	background: #fff;
	color: #444;
	border-color: #ddd;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.kj-map-filter:hover:not(.is-active),
.kj-orte-filter__btn:hover:not(.is-active) {
	border-color: var(--kj-primary);
	color: var(--kj-primary);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(61,107,79,.15);
}
.kj-map-filter.is-active,
.kj-orte-filter__btn.is-active {
	background: var(--kj-cat-color, var(--kj-primary)) !important;
	border-color: var(--kj-cat-color, var(--kj-primary));
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(61,107,79,.25);
	animation: kj-pill-pop .22s var(--kj-ease-spring) both;
}
@keyframes kj-pill-pop {
	0%   { transform: scale(.92); }
	100% { transform: scale(1); }
}

/* ── Map-Pins: Drop-Eingang ───────────────────────────────────── */
.kj-pin {
	animation: kj-pin-drop .45s var(--kj-ease-spring) both;
}
@keyframes kj-pin-drop {
	0%   { opacity: 0; transform: rotate(-45deg) translateY(-18px) scale(.7); }
	100% { opacity: 1; transform: rotate(-45deg) translateY(0)     scale(1); }
}

/* ── CTA-Button Shimmer ───────────────────────────────────────── */
.kj-popup__cta {
	position: relative;
	overflow: hidden;
	transition: background var(--kj-t-fast) var(--kj-ease),
	            transform  var(--kj-t-fast) var(--kj-ease-spring);
}
.kj-popup__cta:hover { transform: translateY(-1px); }
.kj-popup__cta::after {
	content: '';
	position: absolute;
	top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
	transform: skewX(-12deg);
	transition: left .5s var(--kj-ease);
}
.kj-popup__cta:hover::after { left: 160%; }

/* ── Info-Karte Eingang ───────────────────────────────────────── */
.kj-poi-info-card {
	animation: kj-slide-in-right .5s var(--kj-ease) both;
	animation-delay: .15s;
}
@keyframes kj-slide-in-right {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
	.kj-poi-info-card { animation: kj-fade-up .5s var(--kj-ease) both; }
}

/* ── Map-Loading Pulsing Skeleton ─────────────────────────────── */
.kj-map-loading {
	background: linear-gradient(
		90deg,
		var(--kj-light) 25%,
		#e8e4da 50%,
		var(--kj-light) 75%
	);
	background-size: 200% 100%;
	animation: kj-skeleton 1.6s ease-in-out infinite;
}
@keyframes kj-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Focus-Stile (Accessibility) ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kj-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:   .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  .01ms !important;
	}
	.kj-will-reveal { opacity: 1; transform: none; }
	.kj-cat-hero::before, .kj-cat-hero::after { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
   KADENCE BLOCKS — Animationen & Hover-Erweiterungen
   Greift auf alle Kadence- und WordPress-Block-Elemente ohne
   dass manuell CSS-Klassen im Editor eingetragen werden müssen.
   ════════════════════════════════════════════════════════════════ */

/* ── Kadence Posts-Grid: Card-Hover ──────────────────────────── */
.kt-blocks-post-grid-item {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--kj-shadow-card, 0 2px 12px rgba(30,45,36,.08));
	transition:
		transform  var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1)),
		box-shadow var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
	will-change: transform;
}
.kt-blocks-post-grid-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--kj-shadow-lift, 0 12px 36px rgba(30,45,36,.16));
}
.kt-blocks-post-grid-item .kt-blocks-post-grid-item-image img,
.kt-blocks-post-grid-item figure img {
	transition: transform .65s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	will-change: transform;
	width: 100%; display: block;
}
.kt-blocks-post-grid-item:hover .kt-blocks-post-grid-item-image img,
.kt-blocks-post-grid-item:hover figure img {
	transform: scale(1.06);
}
/* Gradient-Overlay über Bild beim Hover */
.kt-blocks-post-grid-item .kt-blocks-post-grid-item-image {
	overflow: hidden;
	position: relative;
}
.kt-blocks-post-grid-item .kt-blocks-post-grid-item-image::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,36,25,.5) 0%, transparent 55%);
	opacity: 0;
	transition: opacity var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
	pointer-events: none;
}
.kt-blocks-post-grid-item:hover .kt-blocks-post-grid-item-image::after { opacity: 1; }

/* ── WordPress Query Loop / Archive Posts ────────────────────── */
.wp-block-post-template .wp-block-post,
.wp-block-query .wp-block-post {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--kj-shadow-card, 0 2px 12px rgba(30,45,36,.08));
	transition:
		transform  var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1)),
		box-shadow var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
	background: #fff;
	padding: 0;
}
.wp-block-post-template .wp-block-post:hover,
.wp-block-query .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--kj-shadow-lift, 0 12px 36px rgba(30,45,36,.16));
}
.wp-block-post figure.wp-block-post-featured-image img {
	transition: transform .65s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	width: 100%; display: block;
}
.wp-block-post:hover figure.wp-block-post-featured-image img {
	transform: scale(1.05);
}
.wp-block-post figure.wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}
/* Readmore-Pfeil */
.wp-block-post .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap var(--kj-t-fast, .18s) var(--kj-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.wp-block-post:hover .wp-block-read-more { gap: 9px; }

/* ── Kadence Columns — Stagger-Reveal ────────────────────────── */
/* Wird durch kj-animations.js mit --kj-si und .kj-will-reveal befüllt */
.wp-block-kadence-column,
.wp-block-column {
	/* Basis-Zustand wird per JS gesetzt */
}

/* ── Cover-Blocks — Glow-Effekt ──────────────────────────────── */
/* Greift nur auf solid-color Covers (kein Hintergrundbild), erkennbar
   an has-background (Farbklasse) ohne has-custom-background */
.wp-block-cover.has-[class*="background-color"]:not([style*="background-image"]),
.wp-block-group.has-[class*="background-color"] {
	position: relative;
	overflow: hidden;
}
/* Breiter ansatz: Cover mit festem Hintergrund (wie kj-cat-hero) */
.wp-block-cover[style*="background-color"]:not([style*="background-image"]),
.wp-block-group[style*="background-color:"] {
	position: relative;
	overflow: hidden;
}
.wp-block-cover[style*="background-color"]:not([style*="background-image"])::before,
.wp-block-group[style*="background-color:"]::before {
	content: '';
	position: absolute; inset: -20%;
	background: radial-gradient(
		ellipse 70% 55% at 30% 40%,
		rgba(255,255,255,.07) 0%, transparent 65%
	);
	animation: kj-hero-glow 9s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}
/* Alle Kinder darüber legen */
.wp-block-cover[style*="background-color"]:not([style*="background-image"]) > *,
.wp-block-group[style*="background-color:"] > * { position: relative; z-index: 1; }

/* ── Allgemeine Bilder-Hover-Zoom ────────────────────────────── */
/* Gilt für alle Bild-Blöcke mit overflow:hidden-Wrapper */
.wp-block-kadence-image .kadence-image-ratio,
.wp-block-image figure {
	overflow: hidden;
	border-radius: 10px;
}
.wp-block-kadence-image .kadence-image-ratio img,
.wp-block-image figure img {
	transition: transform .6s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	display: block; width: 100%;
}
.wp-block-kadence-image:hover .kadence-image-ratio img,
.wp-block-image:hover figure img {
	transform: scale(1.04);
}

/* ── Link-Kacheln (Kategorien-Navigation) ────────────────────── */
/* Kadence Column-Blöcke die als klickbare Kacheln fungieren */
.wp-block-kadence-column a:only-child .kt-inside-inner-col,
.kt-inside-inner-col:has(> a:only-child) {
	transition:
		transform var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1)),
		box-shadow var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
	border-radius: 12px;
}
/* Hover auf Kadence-Columns die Links enthalten */
.wp-block-kadence-column:has(a) .kt-inside-inner-col {
	transition: transform var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
}
.wp-block-kadence-column:has(a):hover .kt-inside-inner-col {
	transform: translateY(-3px);
}

/* ── Kadence Advanced Heading — Underline-Animation ──────────── */
.wp-block-kadence-advancedheading h2,
.wp-block-kadence-advancedheading h3 {
	display: inline;
	background-image: linear-gradient(
		to right,
		var(--kj-accent, #C8882A) 0%,
		var(--kj-accent, #C8882A) 100%
	);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .4s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	padding-bottom: 2px;
}
/* Nur bei Headings die im Viewport sind (via JS-Klasse) */
.kj-revealed .wp-block-kadence-advancedheading h2,
.kj-revealed .wp-block-kadence-advancedheading h3 {
	background-size: 100% 2px;
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kt-blocks-post-grid-item,
	.wp-block-post { transition: none !important; }
	.kt-blocks-post-grid-item:hover,
	.wp-block-post:hover { transform: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   UNIVERSELLE BLOCK-ANIMATIONEN (via render_block Filter)
   .kj-anim wird automatisch zu allen Section-Blöcken hinzugefügt
   ════════════════════════════════════════════════════════════════ */

.kj-anim {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity .6s cubic-bezier(.4,0,.2,1),
		transform .6s cubic-bezier(.4,0,.2,1);
	will-change: opacity, transform;
}
.kj-anim.kj-revealed {
	opacity: 1;
	transform: none;
}

/* Geschachtelte .kj-anim Blöcke gestaffelt — kein doppelter Versatz */
.kj-anim .kj-anim {
	transition-delay: .08s;
}
.kj-anim .kj-anim .kj-anim {
	transition-delay: .14s;
}

/* Reduced Motion: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
	.kj-anim { opacity: 1; transform: none; transition: none; }
}

/* ── Cover/Hero-Blöcke mit dezenter Lichtschicht ─────────────── */
.wp-block-cover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.wp-block-cover::after {
	content: '';
	position: absolute; inset: -20%;
	background: radial-gradient(
		ellipse 60% 50% at 30% 40%,
		rgba(255,255,255,.08) 0%, transparent 70%
	);
	animation: kj-hero-glow 9s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: overlay;
}
.wp-block-cover > * { position: relative; z-index: 2; }

/* ── Footer (Child-Theme eigenes Styling) ────────────────────── */
.kj-site-footer {
	background: var(--kj-text, #1E2D24);
	color: rgba(255,255,255,.85);
	padding: 64px 24px 32px;
	margin-top: 80px;
	font-family: var(--kj-font-body, Inter, sans-serif);
}
.kj-site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.kj-site-footer__brand img {
	max-width: 180px;
	height: auto;
	margin-bottom: 16px;
	filter: brightness(0) invert(1);
}
.kj-site-footer__tagline {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.6);
	margin: 0;
}
.kj-site-footer h4 {
	font-family: var(--kj-font-heading, Lora, serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kj-accent, #C8882A);
	margin: 0 0 16px;
}
.kj-site-footer ul {
	list-style: none;
	margin: 0; padding: 0;
}
.kj-site-footer li { margin-bottom: 8px; font-size: 14px; }
.kj-site-footer a {
	color: rgba(255,255,255,.8);
	text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}
.kj-site-footer a:hover {
	color: #fff;
	padding-left: 4px;
}
.kj-site-footer__bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: rgba(255,255,255,.5);
}
.kj-site-footer__bottom a { color: rgba(255,255,255,.7); }
@media (max-width: 768px) {
	.kj-site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
	.kj-site-footer { padding: 48px 20px 24px; margin-top: 48px; }
}

/* ── Header: Sticky Behavior auf den vorhandenen Kadence-Header ── */
body.kj-header-sticky .site-header,
body.kj-header-sticky #masthead {
	position: sticky;
	top: 0;
	z-index: 99;
	transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}


/* ════════════════════════════════════════════════════════════════
   GLOBAL DESIGN — Header, Footer, Typography, Links, Buttons
   Wird automatisch auf alle Seiten angewendet, unabhängig vom Editor.
   ════════════════════════════════════════════════════════════════ */

/* ── Universal Reveal Defaults (eine Klasse, alle Selektoren) ── */
html.kj-js .kj-will-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity .55s var(--kj-ease, cubic-bezier(.4,0,.2,1)),
		transform .55s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	transition-delay: calc(var(--kj-si, 0) * 70ms);
	will-change: opacity, transform;
}
.kj-will-reveal.kj-revealed {
	opacity: 1;
	transform: none;
}

/* ── Header — Sticky Blur + Hover-Effekte ────────────────────── */
.site-header,
#masthead,
header.site-header-wrap {
	transition: background-color .3s var(--kj-ease, cubic-bezier(.4,0,.2,1)),
	            box-shadow .3s var(--kj-ease, cubic-bezier(.4,0,.2,1)),
	            backdrop-filter .3s var(--kj-ease, cubic-bezier(.4,0,.2,1));
}
.kj-header--scrolled,
body.kj-scrolled .site-header,
body.kj-scrolled #masthead {
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	background-color: rgba(245,242,236,.88) !important;
	box-shadow: 0 1px 24px rgba(30,45,36,.10);
}

/* Logo-Hover */
.site-branding a img,
.site-logo img,
.custom-logo-link img {
	transition: transform var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
}
.site-branding a:hover img,
.site-logo a:hover img,
.custom-logo-link:hover img {
	transform: scale(1.05);
}

/* Menü-Items */
.primary-menu-container a,
.menu-item > a,
.kadence-nav-mobile-container .menu-item > a {
	position: relative;
	transition: color var(--kj-t-fast, .18s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
}
/* Animierter Underline beim Hover */
.menu-item > a::after {
	content: '';
	position: absolute;
	bottom: -4px; left: 50%;
	width: 0; height: 2px;
	background: var(--kj-accent, #C8882A);
	transition: width var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1)),
	            left var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
	pointer-events: none;
}
.menu-item > a:hover::after,
.menu-item.current-menu-item > a::after {
	width: 80%;
	left: 10%;
}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer,
#colophon,
footer.site-footer {
	background: var(--kj-text, #1E2D24);
	color: rgba(245,242,236,.85);
}
.site-footer a,
#colophon a {
	color: rgba(245,242,236,.85);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.site-footer a:hover,
#colophon a:hover {
	color: var(--kj-accent, #C8882A);
	border-bottom-color: var(--kj-accent, #C8882A);
}
.site-footer h2,
.site-footer h3,
.site-footer h4,
#colophon h2,
#colophon h3,
#colophon h4 {
	color: #fff;
	font-family: var(--kj-font-heading, Lora, serif);
}

/* ── Globale Typografie ───────────────────────────────────────── */
body {
	font-family: var(--kj-font-body, Inter, sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--kj-font-heading, Lora, serif);
	letter-spacing: -0.01em;
}

/* ── Globale Link-Stile (Body-Bereich) ───────────────────────── */
.entry-content a:not(.wp-block-button__link):not(.button):not(.kj-post-card__link):not([class*="kt-button"]),
.wp-block-post-content a:not(.wp-block-button__link):not(.button) {
	color: var(--kj-primary, #3D6B4F);
	text-decoration: underline;
	text-decoration-color: rgba(61,107,79,.3);
	text-underline-offset: 3px;
	transition: text-decoration-color .2s, color .2s;
}
.entry-content a:hover:not(.wp-block-button__link):not(.button):not(.kj-post-card__link),
.wp-block-post-content a:hover:not(.wp-block-button__link):not(.button) {
	text-decoration-color: var(--kj-accent, #C8882A);
	color: var(--kj-accent, #C8882A);
}

/* ── Buttons (Kadence + WordPress + Custom) ──────────────────── */
.wp-block-button__link,
.kt-button,
button.button,
input[type="submit"],
.wp-element-button {
	transition:
		transform var(--kj-t-fast, .18s) var(--kj-ease-spring, cubic-bezier(.34,1.56,.64,1)),
		box-shadow var(--kj-t-fast, .18s) var(--kj-ease, cubic-bezier(.4,0,.2,1)),
		background-color var(--kj-t-fast, .18s) var(--kj-ease, cubic-bezier(.4,0,.2,1)) !important;
	position: relative;
	overflow: hidden;
}
.wp-block-button__link:hover,
.kt-button:hover,
button.button:hover,
input[type="submit"]:hover,
.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(30,45,36,.18) !important;
}

/* Shimmer-Effekt beim Hover */
.wp-block-button__link::after,
.kt-button::after {
	content: '';
	position: absolute;
	top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.25),
		transparent
	);
	transform: skewX(-12deg);
	transition: left .5s var(--kj-ease, cubic-bezier(.4,0,.2,1));
	pointer-events: none;
}
.wp-block-button__link:hover::after,
.kt-button:hover::after {
	left: 180%;
}

/* ── Bilder global: smooth load + subtle hover ──────────────── */
img {
	transition: opacity .3s ease;
}
.wp-block-image:not(.alignfull):not(.alignwide) figure,
.kadence-image-ratio {
	overflow: hidden;
	border-radius: 8px;
}

/* ── Focus-Stile global verbessern ───────────────────────────── */
*:focus-visible {
	outline: 3px solid var(--kj-accent, #C8882A);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Mobile-Nav Animation ─────────────────────────────────────── */
.menu-toggle-open,
.kadence-mobile-navigation,
#mobile-toggle {
	transition: transform var(--kj-t-base, .28s) var(--kj-ease, cubic-bezier(.4,0,.2,1));
}
.menu-toggle-open:hover,
#mobile-toggle:hover {
	transform: scale(1.1);
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kj-will-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ════════════════════════════════════════════════════════════════
   FRONT PAGE — kontrolliertes Startseiten-Layout (front-page.php)
   Alle Selektoren .kj-fp-* zielen auf bekanntes, eigenes Markup.
   ════════════════════════════════════════════════════════════════ */

.kj-fp { overflow-x: clip; }
.kj-fp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── HERO ─────────────────────────────────────────────────────── */
.kj-fp-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 70% 20%, rgba(200,136,42,.18), transparent 60%),
		linear-gradient(160deg, var(--kj-primary-dk) 0%, var(--kj-primary) 55%, #34624a 100%);
	color: #fff;
	padding: clamp(72px, 12vw, 140px) 0 clamp(64px, 9vw, 110px);
}
.kj-fp-hero__rivers {
	position: absolute; inset: 0;
	z-index: 2;
	width: 100%; height: 100%;
	fill: none;
	stroke: rgba(255,255,255,.10);
	stroke-width: 2;
	pointer-events: none;
}

/* Foto-Ebene (per Customizer gesetzt) + grünes Overlay darüber */
.kj-fp-hero__photo {
	position: absolute; inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-image .4s ease;
}
.kj-fp-hero__overlay {
	position: absolute; inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse 80% 60% at 70% 20%, rgba(200,136,42,.28), transparent 60%),
		linear-gradient(160deg,
			rgba(45,80,57,  var(--kj-overlay, .82)) 0%,
			rgba(61,107,79, calc(var(--kj-overlay, .82) - .12)) 55%,
			rgba(52,98,74,  var(--kj-overlay, .82)) 100%);
	pointer-events: none;
}
.kj-fp-hero__rivers path {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: kj-fp-draw 3.4s var(--kj-ease) forwards;
}
.kj-fp-hero__rivers path:nth-child(2) { animation-delay: .35s; stroke: rgba(200,136,42,.16); }
.kj-fp-hero__rivers path:nth-child(3) { animation-delay: .7s; }
@keyframes kj-fp-draw { to { stroke-dashoffset: 0; } }

.kj-fp-hero__inner {
	position: relative; z-index: 3;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.kj-fp-hero__tag {
	display: inline-block;
	font-family: var(--kj-font-body);
	font-size: 12px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--kj-accent);
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	padding: 6px 16px; border-radius: 20px;
	margin: 0 0 26px;
	backdrop-filter: blur(6px);
	animation: kj-fp-up .7s var(--kj-ease) both;
}
.kj-fp-hero__title {
	font-family: var(--kj-font-heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 22px;
	color: #fff;
	animation: kj-fp-up .7s var(--kj-ease) .1s both;
}
.kj-fp-hero__accent {
	color: var(--kj-accent);
	font-style: italic;
	font-weight: 600;
}
.kj-fp-hero__sub {
	font-size: clamp(1rem, 2vw, 1.18rem);
	line-height: 1.7;
	color: rgba(255,255,255,.82);
	max-width: 540px; margin: 0 auto 36px;
	animation: kj-fp-up .7s var(--kj-ease) .2s both;
}
@keyframes kj-fp-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Suche */
.kj-fp-search {
	display: flex; align-items: center;
	gap: 8px;
	max-width: 560px; margin: 0 auto;
	background: #fff;
	border-radius: 50px;
	padding: 7px 7px 7px 20px;
	box-shadow: var(--kj-shadow-deep);
	animation: kj-fp-up .7s var(--kj-ease) .3s both;
}
.kj-fp-search__icon { width: 20px; height: 20px; color: var(--kj-primary); flex-shrink: 0; }
.kj-fp-search input {
	flex: 1; border: none; outline: none; background: none;
	font-family: var(--kj-font-body); font-size: 15px; color: var(--kj-text);
	padding: 10px 6px;
}
.kj-fp-search input::placeholder { color: #97a39b; }
.kj-fp-search button {
	flex-shrink: 0;
	background: var(--kj-primary);
	color: #fff; border: none;
	font-family: var(--kj-font-body); font-weight: 600; font-size: 14px;
	padding: 12px 26px; border-radius: 40px; cursor: pointer;
	transition: background var(--kj-t-base) var(--kj-ease), transform var(--kj-t-fast) var(--kj-ease-spring);
}
.kj-fp-search button:hover { background: var(--kj-accent); transform: translateY(-1px); }

/* Kennzahlen */
.kj-fp-stats {
	display: flex; justify-content: center;
	gap: clamp(28px, 6vw, 72px);
	margin-top: 52px;
	animation: kj-fp-up .7s var(--kj-ease) .45s both;
}
.kj-fp-stat { display: flex; flex-direction: column; align-items: center; }
.kj-fp-stat__num {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
	color: var(--kj-accent);
}
.kj-fp-stat__suffix {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	color: var(--kj-accent);
}
.kj-fp-stat__label {
	font-size: 13px; letter-spacing: .04em;
	color: rgba(255,255,255,.72); margin-top: 8px;
}

/* ── SECTIONS ─────────────────────────────────────────────────── */
.kj-fp-section { padding: clamp(56px, 8vw, 92px) 0; }
.kj-fp-section--alt { background: var(--kj-light); }
.kj-fp-section--cats { padding-top: clamp(56px, 8vw, 88px); }

.kj-fp-head { margin-bottom: 40px; }
.kj-fp-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.kj-fp-head--center { text-align: center; max-width: 580px; margin-left: auto; margin-right: auto; }
.kj-fp-head__eyebrow {
	display: inline-block;
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--kj-accent); margin-bottom: 10px;
}
.kj-fp-head__title {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15;
	letter-spacing: -.015em; color: var(--kj-text); margin: 0;
}
.kj-fp-head__sub { color: #5e6b62; font-size: 1.02rem; line-height: 1.6; margin: 14px 0 0; }
.kj-fp-more {
	flex-shrink: 0; font-weight: 600; font-size: 14px;
	color: var(--kj-primary); text-decoration: none;
	border-bottom: 2px solid transparent; padding-bottom: 2px;
	transition: color var(--kj-t-base) var(--kj-ease), border-color var(--kj-t-base) var(--kj-ease);
}
.kj-fp-more:hover { color: var(--kj-accent); border-color: var(--kj-accent); }

/* ── KATEGORIE-KACHELN ────────────────────────────────────────── */
.kj-fp-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.kj-fp-cat {
	position: relative;
	display: flex; flex-direction: column;
	padding: 28px 26px 26px;
	background: #fff;
	border: 1px solid rgba(30,45,36,.07);
	border-radius: 16px;
	text-decoration: none;
	overflow: hidden;
	box-shadow: var(--kj-shadow-card);
	transition: transform var(--kj-t-base) var(--kj-ease), box-shadow var(--kj-t-base) var(--kj-ease), border-color var(--kj-t-base) var(--kj-ease);
}
.kj-fp-cat::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(160deg, transparent 60%, rgba(200,136,42,.06));
	opacity: 0; transition: opacity var(--kj-t-base) var(--kj-ease);
}
.kj-fp-cat:hover {
	transform: translateY(-5px);
	box-shadow: var(--kj-shadow-lift);
	border-color: rgba(200,136,42,.3);
}
.kj-fp-cat:hover::before { opacity: 1; }
.kj-fp-cat__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	background: var(--kj-light);
	border-radius: 13px;
	color: var(--kj-primary);
	margin-bottom: 18px;
	transition: background var(--kj-t-base) var(--kj-ease), color var(--kj-t-base) var(--kj-ease), transform var(--kj-t-base) var(--kj-ease-spring);
}
.kj-fp-cat__icon svg { width: 26px; height: 26px; }
.kj-fp-cat:hover .kj-fp-cat__icon {
	background: var(--kj-primary); color: #fff; transform: scale(1.06) rotate(-3deg);
}
.kj-fp-cat__label {
	font-family: var(--kj-font-heading); font-weight: 600;
	font-size: 1.22rem; color: var(--kj-text); margin-bottom: 6px;
	position: relative; z-index: 1;
}
.kj-fp-cat__desc { font-size: .92rem; color: #6a766e; line-height: 1.5; position: relative; z-index: 1; }
.kj-fp-cat__arrow {
	position: absolute; top: 28px; right: 26px;
	font-size: 20px; color: var(--kj-accent);
	opacity: 0; transform: translateX(-6px);
	transition: opacity var(--kj-t-base) var(--kj-ease), transform var(--kj-t-base) var(--kj-ease);
}
.kj-fp-cat:hover .kj-fp-cat__arrow { opacity: 1; transform: none; }

/* ── KARTE ────────────────────────────────────────────────────── */
.kj-fp-map-frame {
	border-radius: 18px; overflow: hidden;
	box-shadow: var(--kj-shadow-lift);
	border: 1px solid rgba(30,45,36,.08);
}
.kj-fp-map-frame iframe,
.kj-fp-map-frame .kj-map,
.kj-fp-map-frame > div { display: block; width: 100%; }

/* ── ABSCHLUSS-BAND ───────────────────────────────────────────── */
.kj-fp-cta {
	position: relative; overflow: hidden;
	background:
		radial-gradient(ellipse 70% 80% at 80% 30%, rgba(200,136,42,.2), transparent 55%),
		linear-gradient(150deg, var(--kj-primary) 0%, var(--kj-primary-dk) 100%);
	color: #fff;
	padding: clamp(64px, 9vw, 110px) 0;
	text-align: center;
}
.kj-fp-cta__inner { max-width: 620px; }
.kj-fp-cta__title {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15;
	margin: 0 0 18px; color: #fff;
}
.kj-fp-cta__text { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0 0 32px; }
.kj-fp-cta__btn {
	display: inline-block;
	background: var(--kj-accent); color: #fff;
	font-weight: 600; font-size: 15px; text-decoration: none;
	padding: 15px 36px; border-radius: 44px;
	box-shadow: 0 8px 28px rgba(0,0,0,.25);
	transition: transform var(--kj-t-fast) var(--kj-ease-spring), background var(--kj-t-base) var(--kj-ease);
}
.kj-fp-cta__btn:hover { transform: translateY(-3px); background: var(--kj-accent-dk); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
	.kj-fp-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kj-fp-cats { grid-template-columns: 1fr; }
	.kj-fp-head--row { flex-direction: column; align-items: flex-start; }
	.kj-fp-search { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
	.kj-fp-search button { width: 100%; }
	.kj-fp-stats { gap: 24px; }
}


/* ── Footer: Rechtliche Links-Leiste ─────────────────────────────── */
.kj-legal-bar {
	background: var(--kj-primary-dk, #2d5039);
	color: rgba(245,242,236,.7);
	border-top: 1px solid rgba(255,255,255,.08);
	font-family: var(--kj-font-body);
	font-size: 13px;
}
.kj-legal-bar__inner {
	max-width: 1200px; margin: 0 auto;
	padding: 16px 24px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.kj-legal-bar__copy { color: rgba(245,242,236,.6); }
.kj-legal-bar__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kj-legal-bar__links a {
	color: rgba(245,242,236,.8);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.kj-legal-bar__links a:hover {
	color: var(--kj-accent, #C8882A);
	border-bottom-color: var(--kj-accent, #C8882A);
}
.kj-legal-bar__sep { color: rgba(245,242,236,.35); }
@media (max-width: 560px) {
	.kj-legal-bar__inner { flex-direction: column; text-align: center; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════
   ABSCHNITTS-UTILITIES — farbige Sektionen auf normalen Seiten
   Im Editor an einen Gruppen-Block unter „Erweitert → Zusätzliche
   CSS-Klasse" hängen. Block auf „Volle Breite" stellen für Rand-zu-
   Rand-Farbe.
   ════════════════════════════════════════════════════════════════ */

/* Innenabstand für jede Sektion */
.kj-section,
.wp-block-group.kj-section {
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: clamp(48px, 7vw, 88px);
}

/* Dunkelgrün (wie Hero/CTA der Startseite) */
.kj-section--green {
	background: var(--kj-primary);
	color: #fff;
}
.kj-section--green :is(h1,h2,h3,h4,h5,h6),
.kj-section--green p,
.kj-section--green li { color: #fff; }
.kj-section--green a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--kj-accent); text-decoration-color: var(--kj-accent);
}

/* Dunkleres Grün mit Amber-Glow (wie Abschluss-Band) */
.kj-section--cta {
	background:
		radial-gradient(ellipse 70% 80% at 80% 30%, rgba(200,136,42,.2), transparent 55%),
		linear-gradient(150deg, var(--kj-primary) 0%, var(--kj-primary-dk) 100%);
	color: #fff;
	text-align: center;
}
.kj-section--cta :is(h1,h2,h3,h4),
.kj-section--cta p { color: #fff; }

/* Creme (Standard-Hintergrundton) */
.kj-section--cream { background: var(--kj-bg); }

/* Helles Beige (abwechselnd) */
.kj-section--light { background: var(--kj-light); }

/* Amber-Akzent dezent */
.kj-section--accent {
	background: linear-gradient(160deg, #fbf6ec 0%, #f3e8d2 100%);
}

/* Eyebrow-Label (kleine Überschrift wie auf der Startseite) */
.kj-eyebrow {
	display: inline-block;
	font-size: 12px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--kj-accent);
	margin-bottom: 8px;
}

/* Damit volle Breite + Innenabstand sauber zusammenspielen */
.wp-block-group.kj-section.alignfull > .wp-block-group__inner-container,
.wp-block-group.kj-section.alignfull > .wp-block-group__inner-container-wrapper {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}


/* ── Orte-Archiv (archive-kj_poi.php) ────────────────────────────── */
.kj-archive-head {
	background: var(--kj-light);
	padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
	text-align: center;
}
.kj-archive-head__title {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 12px;
	color: var(--kj-text);
}
.kj-archive-head__sub {
	max-width: 600px; margin: 0 auto;
	color: #5e6b62; font-size: 1.05rem; line-height: 1.6;
}
.kj-archive .kj-orte-filter { margin-bottom: 36px; }

/* ── Karten-Fallback (wenn Leaflet/Kacheln blockiert) ────────────── */
.kj-map-fallback {
	display: flex; align-items: center; justify-content: center;
	height: 100%; min-height: 220px;
	background: var(--kj-light);
	color: var(--kj-primary); font-weight: 600;
	text-decoration: none; text-align: center; padding: 20px;
	transition: background .2s, color .2s;
}
.kj-map-fallback:hover { background: var(--kj-primary); color: #fff; }


/* ════════════════════════════════════════════════════════════════
   SINGLE POST — Editorial-Layout für Blog-Beiträge (single.php)
   Übernimmt automatisch den Startseiten-Look für jeden Beitrag.
   ════════════════════════════════════════════════════════════════ */

.kj-post-single { padding-bottom: 0; }

/* ── HERO ─────────────────────────────────────────────────────── */
.kj-post-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 11vw, 130px) 0 clamp(56px, 8vw, 96px);
}

/* Variante mit Foto */
.kj-post-hero--photo { color: #fff; background: var(--kj-primary-dk); }
.kj-post-hero__photo {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.kj-post-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(ellipse 80% 60% at 70% 20%, rgba(200,136,42,.18), transparent 60%),
		linear-gradient(160deg, rgba(45,80,57,.88) 0%, rgba(61,107,79,.78) 55%, rgba(52,98,74,.88) 100%);
}

/* Variante ohne Foto */
.kj-post-hero--plain {
	background: var(--kj-light);
	color: var(--kj-text);
}

.kj-post-hero__inner {
	position: relative; z-index: 2;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.kj-post-hero__meta { margin: 0 0 14px; }
.kj-post-hero--photo .kj-post-hero__meta .kj-eyebrow {
	color: var(--kj-accent);
}
.kj-post-hero__title {
	font-family: var(--kj-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}
.kj-post-hero--photo .kj-post-hero__title { color: #fff; }
.kj-post-hero__sub {
	font-size: clamp(1.02rem, 1.8vw, 1.18rem);
	line-height: 1.65;
	margin: 0;
	opacity: .9;
}
.kj-post-hero--photo .kj-post-hero__sub { color: rgba(255,255,255,.85); }

/* ── INHALT ───────────────────────────────────────────────────── */
.kj-post-body {
	background: var(--kj-bg);
	padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 80px);
}
.kj-post-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--kj-text);
}

/* Typografie innerhalb des Inhalts */
.kj-post-content > * { margin-top: 0; margin-bottom: 1.4em; }
.kj-post-content h2 {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.25;
	margin-top: 2em; margin-bottom: .6em;
	color: var(--kj-text); letter-spacing: -.01em;
}
.kj-post-content h3 {
	font-family: var(--kj-font-heading); font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.3;
	margin-top: 1.6em; margin-bottom: .5em;
	color: var(--kj-text);
}
.kj-post-content h4 {
	font-family: var(--kj-font-body); font-weight: 600;
	font-size: 1.1rem; margin-top: 1.4em; margin-bottom: .4em;
	color: var(--kj-text);
}
.kj-post-content p { margin-bottom: 1.3em; }
.kj-post-content a {
	color: var(--kj-primary);
	text-decoration: underline;
	text-decoration-color: rgba(61,107,79,.4);
	text-underline-offset: 3px;
	transition: color .2s, text-decoration-color .2s;
}
.kj-post-content a:hover {
	color: var(--kj-accent);
	text-decoration-color: var(--kj-accent);
}
.kj-post-content ul, .kj-post-content ol { padding-left: 1.4em; }
.kj-post-content li { margin-bottom: .5em; }
.kj-post-content blockquote {
	border-left: 4px solid var(--kj-accent);
	padding: 6px 0 6px 20px;
	margin: 1.6em 0;
	font-family: var(--kj-font-heading);
	font-size: 1.18rem;
	font-style: italic;
	color: #3a4a40;
}
.kj-post-content blockquote cite {
	display: block;
	font-family: var(--kj-font-body);
	font-style: normal;
	font-size: .9rem;
	color: #6a766e;
	margin-top: 8px;
}
.kj-post-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .92em;
	background: var(--kj-light);
	padding: 2px 6px;
	border-radius: 4px;
}
.kj-post-content pre {
	background: var(--kj-text);
	color: #f5f2ec;
	padding: 18px 20px;
	border-radius: 8px;
	overflow-x: auto;
	font-size: .92rem;
}
.kj-post-content pre code { background: none; padding: 0; color: inherit; }

/* Bilder im Beitrag */
.kj-post-content .wp-block-image,
.kj-post-content figure {
	margin: 2em 0;
}
.kj-post-content .wp-block-image img,
.kj-post-content figure img {
	border-radius: 10px;
	box-shadow: var(--kj-shadow-card);
	height: auto;
}
.kj-post-content figcaption {
	font-size: .9rem;
	color: #6a766e;
	text-align: center;
	margin-top: 10px;
	font-style: italic;
}

/* Volle Breite / breite Blöcke aus dem Container ausbrechen */
.kj-post-content .alignwide {
	margin-left: -60px; margin-right: -60px;
	max-width: calc(100% + 120px);
}
.kj-post-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}
@media (max-width: 840px) {
	.kj-post-content .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* Tags am Beitragsende */
.kj-post-tags {
	margin-top: 3em;
	padding-top: 1.6em;
	border-top: 1px solid rgba(30,45,36,.1);
	display: flex; flex-wrap: wrap; gap: 8px;
}
.kj-post-tags a {
	font-size: .85rem;
	color: var(--kj-primary);
	background: var(--kj-light);
	padding: 5px 12px;
	border-radius: 14px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.kj-post-tags a:hover {
	background: var(--kj-primary);
	color: #fff;
}

/* ── ABSCHLUSS-BAND ───────────────────────────────────────────── */
.kj-post-footer {
	background: var(--kj-light);
	padding: 36px 0;
	border-top: 1px solid rgba(30,45,36,.06);
}
.kj-post-footer__inner {
	display: flex; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; align-items: center;
}
.kj-post-back {
	font-family: var(--kj-font-body);
	font-weight: 600; font-size: .98rem;
	color: var(--kj-primary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.kj-post-back:hover { color: var(--kj-accent); border-color: var(--kj-accent); }


/* ── Single Event: Eckdaten-Box + Quellenangabe ──────────────────── */
.kj-event-facts {
	display: flex; flex-wrap: wrap; gap: 18px 28px;
	background: var(--kj-light);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 0 0 32px;
}
.kj-event-fact {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 1rem; line-height: 1.4; color: var(--kj-text);
}
.kj-event-fact__ico { font-size: 1.2rem; line-height: 1; }
.kj-event-fact__sub { color: #6a766e; font-size: .92rem; }
.kj-event-fact a { color: var(--kj-primary); font-weight: 600; text-decoration: none; }
.kj-event-fact a:hover { color: var(--kj-accent); }
.kj-event-source {
	margin-top: 2.5em; padding-top: 1.2em;
	border-top: 1px solid rgba(30,45,36,.1);
	color: #8a948c; font-size: .85rem;
}


/* ════════════════════════════════════════════════════════════════
   JAHRESKALENDER  [kj_jahreskalender]
   ════════════════════════════════════════════════════════════════ */
.kj-jk { margin: 24px 0; }
.kj-jk-head {
	display: flex; align-items: center; justify-content: center; gap: 20px;
	margin-bottom: 8px;
}
.kj-jk-year, .kj-jk-range {
	font-family: var(--kj-font-heading); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700;
	color: var(--kj-text); margin: 0; min-width: 18ch; text-align: center;
}
.kj-jk-nav {
	background: var(--kj-light); border: none; border-radius: 8px;
	width: 40px; height: 40px; font-size: 1.4rem; line-height: 1;
	color: var(--kj-primary); cursor: pointer; transition: background .2s, color .2s;
}
.kj-jk-nav:hover:not(:disabled) { background: var(--kj-primary); color: #fff; }
.kj-jk-nav:disabled { opacity: .35; cursor: default; }

.kj-jk-legend {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	flex-wrap: wrap; margin-bottom: 18px; font-size: .85rem; color: #6a766e;
}
.kj-jk-leg { display: inline-flex; align-items: center; gap: 6px; }
.kj-jk-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.kj-jk-l1 { background: rgba(200,136,42,.30); }
.kj-jk-l2 { background: rgba(200,136,42,.60); }
.kj-jk-l3 { background: var(--kj-accent); }
.kj-jk-hint { font-style: italic; }

.kj-jk-months {
	display: grid; gap: 22px;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .kj-jk-months { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .kj-jk-months { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .kj-jk-months { grid-template-columns: 1fr; } }

.kj-jk-month {
	background: var(--kj-bg); border: 1px solid rgba(30,45,36,.07);
	border-radius: 12px; padding: 12px;
}
.kj-jk-mname {
	font-family: var(--kj-font-heading); font-weight: 600; font-size: 1rem;
	color: var(--kj-primary-dk); text-align: center; margin-bottom: 8px;
}
.kj-jk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kj-jk-wd {
	font-size: .65rem; font-weight: 600; color: #9aa49c;
	text-align: center; padding-bottom: 2px;
}
.kj-jk-cell {
	position: relative; aspect-ratio: 1; border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	font-size: .8rem; color: var(--kj-text); background: transparent;
}
.kj-jk-empty-cell { background: transparent; }
.kj-jk-cell.has { cursor: pointer; font-weight: 600; transition: transform .12s, box-shadow .12s; }
.kj-jk-cell.has:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 2; }
.kj-jk-cell.has.kj-jk-l1 { background: rgba(200,136,42,.30); }
.kj-jk-cell.has.kj-jk-l2 { background: rgba(200,136,42,.60); }
.kj-jk-cell.has.kj-jk-l3 { background: var(--kj-accent); color: #fff; }
.kj-jk-cell.today { outline: 2px solid var(--kj-primary); outline-offset: -2px; }
.kj-jk-num { line-height: 1; }
.kj-jk-badge {
	position: absolute; top: 1px; right: 2px;
	font-size: .55rem; font-weight: 700; line-height: 1;
	background: var(--kj-primary); color: #fff;
	border-radius: 8px; padding: 1px 4px; min-width: 12px; text-align: center;
}
.kj-jk-cell.kj-jk-l3 .kj-jk-badge { background: var(--kj-primary-dk); }

.kj-jk-day {
	margin-top: 24px; background: var(--kj-light);
	border-radius: 12px; padding: 20px 24px;
}
.kj-jk-day-head {
	font-family: var(--kj-font-heading); font-weight: 700; font-size: 1.15rem;
	color: var(--kj-text); margin-bottom: 14px;
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.kj-jk-day-cnt { font-family: var(--kj-font-body); font-size: .85rem; font-weight: 500; color: var(--kj-accent-dk); }
.kj-jk-day-list { list-style: none; margin: 0; padding: 0; }
.kj-jk-day-list li {
	padding: 12px 0; border-top: 1px solid rgba(30,45,36,.1);
	display: flex; flex-direction: column; gap: 4px;
}
.kj-jk-day-list li:first-child { border-top: none; }
.kj-jk-day-list a {
	font-weight: 600; font-size: 1.02rem; color: var(--kj-primary);
	text-decoration: none;
}
.kj-jk-day-list a:hover { color: var(--kj-accent); text-decoration: underline; }
.kj-jk-time, .kj-jk-loc { font-size: .85rem; color: #6a766e; }
.kj-jk-empty, .kj-jk-day-empty { color: #6a766e; font-style: italic; }


/* Archiv-Zwischenüberschriften (Veranstaltungen) */
.kj-archive-subhead {
	font-family: var(--kj-font-heading); font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--kj-text);
	margin: 48px 0 18px; padding-top: 8px;
	border-top: 1px solid rgba(30,45,36,.1);
}
.kj-archive-subhead:first-of-type { border-top: none; padding-top: 0; }


/* ════════════════════════════════════════════════════════════════
   UNTERKÜNFTE-VERZEICHNIS  [kj_unterkuenfte]
   ════════════════════════════════════════════════════════════════ */
.kj-uk-grid { display: grid; gap: 24px; margin: 24px 0; }
.kj-uk-cols-1 { grid-template-columns: 1fr; }
.kj-uk-cols-2 { grid-template-columns: repeat(2, 1fr); }
.kj-uk-cols-3 { grid-template-columns: repeat(3, 1fr); }
.kj-uk-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .kj-uk-cols-3, .kj-uk-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kj-uk-grid { grid-template-columns: 1fr; } }

.kj-uk-card {
	display: flex; flex-direction: column; text-decoration: none;
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 2px 10px rgba(30,45,36,.08); transition: transform .15s, box-shadow .15s;
}
.kj-uk-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(30,45,36,.16); }
.kj-uk-card__img {
	position: relative; aspect-ratio: 3/2; background-size: cover; background-position: center;
	background-color: var(--kj-light);
}
.kj-uk-card__img[data-empty="1"]::after {
	content: "🏨"; position: absolute; inset: 0; display: flex; align-items: center;
	justify-content: center; font-size: 2.4rem; opacity: .35;
}
.kj-uk-card__badge {
	position: absolute; top: 10px; left: 10px;
	background: rgba(61,107,79,.92); color: #fff; font-size: .72rem; font-weight: 600;
	padding: 3px 9px; border-radius: 20px;
}
.kj-uk-card__body { padding: 14px 16px 18px; }
.kj-uk-card__title {
	font-family: var(--kj-font-heading); font-size: 1.1rem; font-weight: 600;
	color: var(--kj-text); margin: 0 0 6px; line-height: 1.25;
}
.kj-uk-card__ort { font-size: .85rem; color: #6a766e; margin: 0; }
.kj-uk-empty { color: #6a766e; font-style: italic; }


/* Touren-Kacheln: Platzhalter-Icon */
.kj-uk-card__img[data-empty="tour"]::after {
	content: "🥾"; position: absolute; inset: 0; display: flex; align-items: center;
	justify-content: center; font-size: 2.4rem; opacity: .35;
}
.kj-tour-card .kj-uk-card__badge { background: rgba(200,136,42,.95); }