/* Watschnbaam – gemeinsames Aussehen aller Seiten im Stil der neuen Startseite (11.11.2026)
   Klassen in Elementor: .wb-hero (Kopfbild-Container), .wb-band (Titelbalken), .wb-text (Fließtexte) */
@font-face {
	font-family: 'Work Sans KH';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../kh-schriften/work-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Work Sans KH';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../kh-schriften/work-sans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
	--wb-gruen: #26502d;
	--wb-gruen-dunkel: #183a1f;
	--wb-rot: #b3261e;
	--wb-rot-dunkel: #8e1c16;
	--wb-papier: #f4ecdf;
	--wb-tinte: #1f1d1a;
	--wb-gelb: #e8b73a;
	--wb-blau: #45a9cf;
	--wb-kopf: 'Work Sans KH', 'Work Sans', Arial, sans-serif;
}

/* --- Kopfzeile ----------------------------------------------------------- */
#masthead .site-title,
#masthead .site-title a { font-family: var(--wb-kopf); font-weight: 800; letter-spacing: .01em; color: var(--wb-gruen-dunkel); }
#masthead .site-description { color: #6b645a; letter-spacing: .04em; }
#site-navigation a { font-family: var(--wb-kopf); font-weight: 600; color: var(--wb-tinte); position: relative; }
/* Unterstrich als Textdekoration – sitzt immer unter der Schrift, egal wie das Theme die Links polstert */
#site-navigation .menu > li > a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 9px;
	transition: text-decoration-color .2s ease, color .2s ease;
}
#site-navigation .menu > li > a:hover,
#site-navigation .menu > li.current-menu-item > a { text-decoration-color: var(--wb-rot); }
#site-navigation .menu > li.current-menu-item > a,
#site-navigation a:hover { color: var(--wb-gruen-dunkel); }

/* --- Kopfbild: Papier-Risskante nach unten ------------------------------- */
.wb-hero { position: relative; }
.wb-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20 L44 14 L90 22 L125 13 L176 13 L221 21 L256 26 L306 15 L341 13 L388 18 L430 24 L470 14 L520 20 L560 12 L606 22 L650 16 L690 25 L740 14 L786 19 L830 12 L874 23 L914 17 L960 25 L1004 14 L1046 21 L1090 13 L1134 22 L1176 16 L1220 24 L1262 14 L1306 20 L1360 19 L1411 18 L1440 19 V40z' fill='%23183a1f'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* --- Titelbalken --------------------------------------------------------- */
.wb-band > .elementor-widget-container {
	background: var(--wb-gruen-dunkel) !important;
	padding: 46px 6% 54px !important;
}
.wb-band .elementor-heading-title {
	display: inline-block;
	position: relative;
	max-width: 900px;
	padding-bottom: 14px;
	font-family: var(--wb-kopf) !important;
	font-size: clamp(24px, 3.2vw, 40px) !important;
	font-weight: 900 !important;
	line-height: 1.12 !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-shadow: none !important;
	color: #fff !important;
}
.wb-band .elementor-heading-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: min(70%, 420px);
	height: 16px;
	transform: translateX(-50%) rotate(-1deg);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M4 26c60-10 140-16 230-17 90-1 190 4 290 1 30-1 52-3 72-5-20 7-48 11-80 13-95 6-200 2-292 4-82 2-160 8-214 12z' fill='%23e8b73a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* --- Fließtexte (Pressetexte, Datenschutz) ------------------------------ */
.wb-text .elementor-widget-container,
.wb-text .elementor-text-editor {
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: #3d3833 !important;
}
.wb-text p,
.wb-text li { font-family: 'Work Sans', Arial, sans-serif !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.wb-text h1,
.wb-text h2,
.wb-text h3,
.wb-text h4,
.wb-text strong { color: var(--wb-gruen-dunkel); }
.wb-text h1,
.wb-text h2,
.wb-text h3,
.wb-text h4 { font-family: var(--wb-kopf); font-weight: 800; }
.wb-text a { color: var(--wb-gruen); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wb-text a:hover { color: var(--wb-rot); }
/* Rechtstexte: linksbündig und lesbar statt zentriert/klein */
.wb-text--recht { max-width: 860px; margin: 0 auto !important; padding: 50px 24px 70px; }
.wb-text--recht .elementor-widget-container,
.wb-text--recht .elementor-widget-container * { text-align: left !important; }
.wb-text--recht h1,
.wb-text--recht h2,
.wb-text--recht h3,
.wb-text--recht h4 { margin: 1.8em 0 .5em; line-height: 1.25; letter-spacing: 0; }
/* „Pressekit herunterladen“ als Knopf */
.wb-text a[href$=".zip"],
.wb-text a[href*="pressekit" i],
.wb-text a[download] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	padding: 11px 20px;
	border-radius: 6px;
	background: var(--wb-rot);
	color: #fff !important;
	font-family: var(--wb-kopf);
	font-size: 14px !important;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.wb-text a[href$=".zip"]:hover,
.wb-text a[href*="pressekit" i]:hover,
.wb-text a[download]:hover { background: var(--wb-rot-dunkel); color: #fff !important; }
.wb-text a[href$=".zip"] img { width: 18px !important; height: 18px !important; margin: 0 !important; filter: brightness(0) invert(1); }

/* Bilder in Programmabschnitten mit leichtem Schatten */
.wb-bild img { border-radius: 10px; box-shadow: 0 12px 30px rgba(60, 40, 20, .18); }

/* --- Kontaktformular (Fluent Forms) -------------------------------------- */
.fluentform .ff-el-input--label label { font-family: var(--wb-kopf); font-weight: 700; font-size: 14px; color: var(--wb-gruen-dunkel); }
.fluentform .ff-el-form-control { border: 1px solid #d8cfc0 !important; border-radius: 6px !important; background: #fffdf8 !important; font-size: 16px !important; padding: 11px 13px !important; }
.fluentform .ff-el-form-control:focus { border-color: var(--wb-gruen) !important; box-shadow: 0 0 0 3px rgba(38, 80, 45, .15) !important; }
.fluentform .ff-btn-submit {
	padding: 15px 30px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--wb-rot) !important;
	color: #fff !important;
	font-family: var(--wb-kopf) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(179, 38, 30, .3);
}
.fluentform .ff-btn-submit:hover { background: var(--wb-rot-dunkel) !important; }
.wb-formular { background: var(--wb-papier); padding: 50px 24px 70px !important; }
.wb-formular .fluentform { max-width: 900px; margin: 0 auto; padding: 34px 36px; border-radius: 10px; background: #fffdf8; box-shadow: 0 12px 34px rgba(60, 40, 20, .12); }

/* --- Karte: Suchfeld ----------------------------------------------------- */
#map-filter-input {
	display: block;
	width: min(560px, calc(100% - 40px)) !important;
	margin: 28px auto 20px !important;
	padding: 14px 18px !important;
	border: 2px solid var(--wb-gruen) !important;
	border-radius: 30px !important;
	font-size: 16px !important;
	text-align: center;
}

/* --- Fußzeile ------------------------------------------------------------ */
#colophon { margin-top: 0; background: var(--wb-gruen-dunkel); border: 0; }
#colophon .bottom-bar { background: transparent; border: 0; padding: 28px 0; }
#colophon .site-info,
#colophon .site-info a { color: #e9e2d4; font-size: 14px; }
#colophon .site-info a:hover { color: var(--wb-gelb); }
#colophon .site-info span + span { display: none; } /* „Theme by Puro“ */
#colophon .site-info span::before,
#colophon .site-info span::after { content: none !important; }

@media (max-width: 767px) {
	.wb-band > .elementor-widget-container { padding: 34px 20px 40px !important; }
	.wb-hero::after { height: 18px; }
	.wb-formular .fluentform { padding: 24px 18px; }
}