/* =========================================================
   Dengg Theme Override (Brown base + Green accents)
   - Keep green as accent
   - Use brown for dark UI (header, footer, some dark blocks)
   - Use light neutral for large section backgrounds
   ========================================================= */

:root {
	/* Core palette */
	--dengg-brown: #2b2020;   /* base / brand brown */
	--dengg-green: #6eb792;   /* accent green (original) */
	--dengg-surface: #f6f3f2; /* light background surface */
	--dengg-text: #333333;
	--dengg-text-muted: #5a5a5a;

	/* Optional: hover variants */
	--dengg-brown-hover: #584c4c;
	--dengg-green-hover: #7fbf9f;
}

/* ---------- Global link accent (optional) ---------- */
a {
	color: var(--dengg-green);
}
a:hover {
	color: var(--dengg-green-hover);
}

/* ---------- Header: brown (premium/handwerk), accents green ---------- */#header {
	background: var(--dengg-brown) !important;
}

/* If you use the alt header over hero: keep it transparent */
/* #header.alt {
	background-color: transparent !important;
} */

/* Dropdown hover/active stays green */
.dropotron li.active > a,
.dropotron a:hover,
.dropotron a:focus {
	background-color: var(--dengg-green) !important;
}

/* ---------- Banner: keep the green vibe ---------- */
/* Leave #banner green (original look) but make border brown if you want */
#banner {
	border-top-color: var(--dengg-green) !important; /* keep original */
	/* border-top-color: var(--dengg-brown) !important;  // alternative */
}

/* ---------- Big colored sections: use light surface instead of full brown ---------- */
.wrapper.style1,
.wrapper.style1.special {
	background-color: var(--dengg-surface) !important;
	color: var(--dengg-text-muted) !important;
}

/* Ensure headings in light sections look normal */
.wrapper.style1 h1,
.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4,
.wrapper.style1 h5,
.wrapper.style1 h6 {
	color: var(--dengg-text) !important;
}

/* Buttons inside light sections: primary = green */
.wrapper.style1 .button.primary,
.wrapper.style1 input[type="submit"].primary,
.wrapper.style1 button.primary {
	background-color: var(--dengg-green) !important;
	color: #ffffff !important;
}

/* ---------- Keep "quotes" section as brown, but accents green ---------- */
.quotes {
	background-color: var(--dengg-brown) !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Quote icon bubble: green pop */
.quotes > article:before {
	background-color: var(--dengg-green) !important;
	color: #ffffff !important;
}

/* Author highlight in quotes: green */
.quotes > article .author .name {
	color: var(--dengg-green) !important;
}

/* ---------- Tabs: active indicator green ---------- */
.tabs .titles li.active {
	color: var(--dengg-green) !important;
}

/* In wrapper.style1 tabs you had border-bottom-color green already; keep it */
.wrapper.style1 .tabs .titles li.active {
	border-bottom-color: var(--dengg-green) !important;
}

/* ---------- Progress / ratings: green accent line ---------- */
.progress {
	color: var(--dengg-green) !important;
}
.progress:before {
	background-color: currentColor !important;
}

/* ---------- Primary buttons globally: green ---------- */
.button.primary,
input[type="submit"].primary,
button.primary {
	background-color: var(--dengg-green) !important;
	color: #ffffff !important;
}
.button.primary:hover,
input[type="submit"].primary:hover,
button.primary:hover {
	background-color: var(--dengg-green-hover) !important;
}

/* Secondary buttons: brown outline */
.button,
input[type="submit"],
button {
	box-shadow: inset 0 0 0 1px var(--dengg-brown) !important;
	color: var(--dengg-brown) !important;
}
.button:hover,
input[type="submit"]:hover,
button:hover {
	background-color: rgba(102, 89, 89, 0.08) !important;
}

/* ---------- Footer: keep green OR switch to brown (choose one) ---------- */
/* Option A: keep original green footer */
#footer {
	background-color: var(--dengg-brown) !important;
}

/* Option B: brown footer (comment Option A and uncomment below)
#footer {
	background-color: var(--dengg-brown) !important;
}
#footer input[type="submit"].primary,
#footer .button.primary {
	color: var(--dengg-brown) !important;
}
*/

/* =======================================================
   Regional Page – automatische Bild/Text-Wechsel-Logik
   ======================================================= */

/* Nur innerhalb der regional.html */
#main .split {
	display: flex;
	align-items: center;
	gap: 3rem;
	margin: 4rem 0;
}

/* Standard: Bild links */
#main .split section:first-child {
	order: 1;
}

#main .split section:last-child {
	order: 2;
}

/* Jeder zweite Split wird umgedreht */
#main .split:nth-of-type(even) section:first-child {
	order: 2;
}

#main .split:nth-of-type(even) section:last-child {
	order: 1;
}

/* Mobile wieder untereinander */
@media screen and (max-width: 980px) {
	#main .split {
		flex-direction: column;
	}
	
	#main .split section {
		order: unset !important;
	}
}

/* =======================================================
   Vertrieb Page - Karten
   ======================================================= */
.map-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.map-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =======================================================
   Vertrieb Page - Großhandel Karte + Übersicht
   ======================================================= */
.leaflet-map {
	width: 100%;
	height: 30rem;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	margin: 1.25rem 0 2rem;
}

.grosshandel-overview,
	.einzelhandel-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.grosshandel-overview h3,
.einzelhandel-overview h3 {
	margin-bottom: 0.6rem;
}

.grosshandel-overview ul,
.einzelhandel-overview ul {
	margin-bottom: 1.6rem;
}

@media screen and (max-width: 980px) {
	.leaflet-map {
		height: 24rem;
	}

	.grosshandel-overview,
	.einzelhandel-overview {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}
/* =======================================================
   Consent Banner + Drittinhalte
   ======================================================= */
.cookie-banner {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 10000;
	display: none;
	justify-content: center;
}

.cookie-banner.is-visible {
	display: flex;
}

.cookie-banner__content {
	max-width: 54rem;
	background: #ffffff;
	color: #2b2020;
	border-radius: 0.6rem;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
	padding: 1rem 1rem 0.9rem;
	border: 1px solid rgba(43, 32, 32, 0.15);
}

.cookie-banner__content h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.cookie-banner__content p {
	margin: 0 0 0.8rem;
	font-size: 0.9rem;
	line-height: 1.45;
}

.cookie-banner__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.cookie-settings-toggle {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	border: 0;
	background: #2b2020;
	color: #fff;
	padding: 0.45rem 0.7rem;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	cursor: pointer;
}

.consent-placeholder {
	position: relative;
	background: #f2efee;
}

.consent-placeholder__notice {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1rem;
	gap: 0.5rem;
	background: rgba(246, 243, 242, 0.94);
}

.consent-placeholder__notice p {
	margin: 0;
	font-size: 0.9rem;
}

@media screen and (max-width: 640px) {
	.cookie-settings-toggle {
		left: 1rem;
		right: 1rem;
	}
}
/* Cookie settings button: force readable contrast on hover/focus */
.cookie-settings-toggle,
.cookie-settings-toggle:hover,
.cookie-settings-toggle:focus {
	color: #ffffff !important;
	box-shadow: none !important;
}

.cookie-settings-toggle:hover,
.cookie-settings-toggle:focus {
	background: #584c4c !important;
}
/* Anchor offset for fixed header */
#main h2[id],
#main h3[id],
#main section[id],
#main div[id] {
	scroll-margin-top: 5rem;
}
/* Hero readability tuning: stronger contrast */
#banner:before {
	opacity: 0.58 !important;
	background: linear-gradient(180deg, rgba(18, 13, 13, 0.62) 0%, rgba(18, 13, 13, 0.54) 100%) !important;
}

#banner h1,
#banner p,
#banner .button {
	text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65);
}

#banner h1 {
	color: #ffffff !important;
	font-weight: 800;
	letter-spacing: 0.01em;
}

#banner p {
	color: rgba(255, 255, 255, 0.98) !important;
	font-weight: 600;
}

#banner .actions {
	border-top-color: rgba(255, 255, 255, 0.55) !important;
}
/* Hero CTA button */
#banner .actions .button {
	background: var(--dengg-green) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
	border: 0 !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0 2.4rem;
	border-radius: 999px;
}

#banner .actions .button:hover,
#banner .actions .button:focus {
	background: var(--dengg-green-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34) !important;
}

#banner .actions .button:active {
	transform: translateY(0);
}

/* =======================================================
   Index refresh safe (color + atmosphere only)
   ======================================================= */
:root {
	--dengg-brown: #2f2222;
	--dengg-brown-hover: #463434;
	--dengg-green: #66b18a;
	--dengg-green-hover: #7ac09a;
	--dengg-surface: #f6f2ef;
	--dengg-surface-alt: #efe8e3;
	--dengg-ink: #2f2323;
	--dengg-accent-warm: #b97e66;
}
#header {
	background: linear-gradient(90deg, #2a1e1e 0%, #3a2a2a 60%, #2f2222 100%) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#header.alt {
	background: rgba(42, 30, 30, 0.82) !important;
	backdrop-filter: blur(4px);
}

#banner {
	border-top-color: var(--dengg-accent-warm) !important;
}

#banner:before {
	opacity: 0.54 !important;
	background: linear-gradient(180deg, rgba(22, 16, 16, 0.58) 0%, rgba(22, 16, 16, 0.48) 100%) !important;
}

#banner:after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 78% 20%, rgba(185, 126, 102, 0.18) 0%, rgba(185, 126, 102, 0) 42%);
}
#one .features article,
#two .stats article,
#five .ratings article {
	border-color: rgba(47, 35, 35, 0.12) !important;
}

#one .features article .icon,
#four .features article .icon {
	color: var(--dengg-green) !important;
}

#main .tabs .titles li.active {
	color: var(--dengg-accent-warm) !important;
}

#main .tabs .titles li.active:before {
	background-color: var(--dengg-accent-warm) !important;
}

#footer {
	background: linear-gradient(180deg, #2a1e1e 0%, #1f1616 100%) !important;
}

/* keep CTA punchy */
#banner .actions .button {
	background: var(--dengg-green) !important;
	color: #ffffff !important;
}

#banner .actions .button:hover,
#banner .actions .button:focus {
	background: var(--dengg-green-hover) !important;
}

/* Homepage sections stay white (no tinted backgrounds) */
#one.wrapper,
#two.wrapper,
#three.wrapper,
#four.wrapper,
#five.wrapper,
#two.wrapper.style1.special,
#four.wrapper.style1 {
	background: #ffffff !important;
}
/* =======================================================
   Modern accent refresh (layout-safe)
   - No structural overrides for feature/stats layout
   - White section backgrounds stay untouched
   ======================================================= */
:root {
	--dengg-accent-fresh: #2f9d74;
	--dengg-accent-warm: #d97745;
	--dengg-accent-gold: #dfae46;
	--dengg-accent-deep: #2f6f8f;
}

/* keep all content sections white */
#one.wrapper,
#two.wrapper,
#three.wrapper,
#four.wrapper,
#five.wrapper,
#two.wrapper.style1.special,
#four.wrapper.style1 {
	background: #ffffff !important;
}

/* premium header + visible accent line */
#header {
	background: linear-gradient(90deg, #1f2b27 0%, #2b3a34 45%, #3a2a2a 100%) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

#header #nav > ul > li > a {
	position: relative;
	color: rgba(255, 255, 255, 0.94) !important;
}

#header #nav > ul > li > a:after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	height: 3px;
	background: linear-gradient(90deg, var(--dengg-accent-fresh) 0%, var(--dengg-accent-warm) 60%, var(--dengg-accent-gold) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
	opacity: 0.95;
}

#header #nav > ul > li > a:hover:after,
#header #nav > ul > li > a.active:after {
	transform: scaleX(1);
}

/* hero readability only */
#banner {
	border-top-color: var(--dengg-accent-fresh) !important;
}

#banner:before {
	opacity: 0.56 !important;
	background: linear-gradient(180deg, rgba(16, 18, 19, 0.62) 0%, rgba(16, 18, 19, 0.50) 100%) !important;
}

#banner:after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 82% 18%, rgba(217, 119, 69, 0.16) 0%, rgba(217, 119, 69, 0) 42%),
		radial-gradient(circle at 16% 78%, rgba(47, 157, 116, 0.14) 0%, rgba(47, 157, 116, 0) 38%);
}

/* heading accents */
#main .inner > h2,
#main .inner > header h1 {
	position: relative;
	padding-bottom: 0.4rem;
}

#main .inner > h2:after,
#main .inner > header h1:after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: 0.45rem;
	background: linear-gradient(90deg, var(--dengg-accent-fresh) 0%, var(--dengg-accent-warm) 100%);
	border-radius: 99px;
}

/* image depth only */
#one .image img,
#three .image img,
#four .image img,
#five .image img {
	box-shadow: 0 14px 32px rgba(20, 16, 16, 0.14);
}

/* feature section: keep native layout, only accent colors */
#main .features > article {
	border-color: rgba(45, 39, 37, 0.18) !important;
}

#main .features > article:before { color: var(--dengg-accent-fresh) !important; }
#main .features > article:nth-child(2):before { color: var(--dengg-accent-warm) !important; }
#main .features > article:nth-child(3):before { color: var(--dengg-accent-gold) !important; }
#main .features > article:nth-child(4):before { color: var(--dengg-accent-deep) !important; }

/* stats section: keep native layout, only accent colors */
#main .stats > article {
	border-color: rgba(45, 39, 37, 0.18) !important;
}

#main .stats > article h3 span { color: var(--dengg-accent-fresh) !important; }
#main .stats > article:nth-child(2) h3 span { color: var(--dengg-accent-warm) !important; }
#main .stats > article:nth-child(3) h3 span { color: var(--dengg-accent-gold) !important; }

/* tabs: color refresh without geometry changes */
#main .tabs .titles li {
	background-color: rgba(47, 157, 116, 0.06);
	border-color: rgba(45, 39, 37, 0.18);
}

#main .tabs .titles li.active {
	color: var(--dengg-accent-warm) !important;
	background-color: #ffffff;
}

#main .tabs .titles li.active:before {
	background-color: var(--dengg-accent-warm) !important;
}

/* button treatment */
.button,
input[type="submit"],
button {
	box-shadow: inset 0 0 0 1px rgba(45, 39, 37, 0.46) !important;
	color: #2f2a28 !important;
}

.button:hover,
input[type="submit"]:hover,
button:hover {
	background-color: rgba(47, 157, 116, 0.12) !important;
}

#banner .actions .button,
.button.primary,
input[type="submit"].primary,
button.primary {
	background: linear-gradient(90deg, #2f9d74 0%, #3ea883 100%) !important;
	border: 0 !important;
	color: #ffffff !important;
	box-shadow: 0 10px 22px rgba(47, 157, 116, 0.28) !important;
}

#banner .actions .button:hover,
#banner .actions .button:focus,
.button.primary:hover,
input[type="submit"].primary:hover,
button.primary:hover {
	background: linear-gradient(90deg, #2a8d68 0%, #379874 100%) !important;
}

/* cookie settings button with modern accent */
.cookie-settings-toggle {
	background: linear-gradient(90deg, #243a34 0%, #2f5048 100%) !important;
}

/* =======================================================
   Global Content Accents (all pages)
   ======================================================= */
#main > .inner > header > p {
	color: #5e5652;
}

#main .image.main img,
#main .image.fit img {
	box-shadow: 0 12px 30px rgba(20, 16, 16, 0.12);
}

#main hr.major {
	border-bottom-color: rgba(47, 157, 116, 0.24) !important;
}

#main h3 {
	color: #3d312f;
}

/* Vertrieb/Regional content blocks */
.leaflet-map,
.map-frame,
.grosshandel-overview > section,
.einzelhandel-overview > section {
	box-shadow: 0 10px 24px rgba(20, 16, 16, 0.08);
}

.grosshandel-overview > section,
.einzelhandel-overview > section {
	background: #ffffff;
	border: 1px solid rgba(45, 39, 37, 0.12);
	border-top: 3px solid var(--dengg-accent-fresh);
	border-radius: 0.7rem;
	padding: 1rem 1.1rem 0.4rem;
}

.grosshandel-overview > section h3,
.einzelhandel-overview > section h3 {
	color: var(--dengg-accent-warm);
}

.grosshandel-overview > section ul li::marker,
.einzelhandel-overview > section ul li::marker {
	color: var(--dengg-accent-fresh);
}

/* =======================================================
   Critical Accent Fixes (restore index accents + nav hover)
   ======================================================= */
:root {
	--dengg-accent-fresh: #2f9d74;
	--dengg-accent-warm: #d97745;
	--dengg-accent-gold: #dfae46;
	--dengg-accent-deep: #2f6f8f;
}

/* Header in warm brown brand tone */
#header {
	background: #3a2924 !important;
}

#header > .logo > a {
	display: inline-flex;
	align-items: center;
	max-width: 15rem;
}

#header > .logo > a img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 3.5rem;
	object-fit: contain;
}

@media screen and (max-width: 980px) {
	#header > .logo > a {
		max-width: 12rem;
	}
}

@media screen and (max-width: 736px) {
	#header > .logo > a {
		max-width: 9.5rem;
	}
}

/* Prevent strike-through look on nav hover */
#header #nav > ul > li > a {
	text-decoration: none !important;
	padding: 0.45rem 0.9rem !important;
	line-height: 1.2 !important;
	border-radius: 999px;
	transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

#header #nav > ul > li > a:after {
	display: none !important;
}

#header #nav > ul > li > a:hover,
#header #nav > ul > li > a.active {
	color: #ffffff !important;
	background: rgba(185, 126, 102, 0.22);
	box-shadow: inset 0 -2px 0 #b97e66, 0 0 0 1px rgba(185, 126, 102, 0.28);
}

/* Restore feature icon accents on index + main pages */
#one .features > article:before,
#main .features > article:before {
	color: var(--dengg-accent-fresh) !important;
}

#one .features > article:nth-child(2):before,
#main .features > article:nth-child(2):before {
	color: var(--dengg-accent-warm) !important;
}

#one .features > article:nth-child(3):before,
#main .features > article:nth-child(3):before {
	color: var(--dengg-accent-gold) !important;
}

#one .features > article:nth-child(4):before,
#main .features > article:nth-child(4):before {
	color: var(--dengg-accent-deep) !important;
}

/* Restore stats headline accents (Regional/Saisonal/Handarbeit) */
#two .stats > article h3 span,
#main .stats > article h3 span {
	color: var(--dengg-accent-fresh) !important;
}

#two .stats > article:nth-child(2) h3 span,
#main .stats > article:nth-child(2) h3 span {
	color: var(--dengg-accent-warm) !important;
}

#two .stats > article:nth-child(3) h3 span,
#main .stats > article:nth-child(3) h3 span {
	color: var(--dengg-accent-gold) !important;
}

/* Restore tabs accent colors (index product switcher + pages with tabs) */
#three .tabs .titles li,
#main .tabs .titles li {
	background-color: rgba(47, 157, 116, 0.08) !important;
	border-color: rgba(37, 83, 74, 0.28) !important;
}

#three .tabs .titles li.active,
#main .tabs .titles li.active {
	color: var(--dengg-accent-deep) !important;
	background-color: #ffffff !important;
	border-bottom-color: #ffffff !important;
}

#three .tabs .titles li.active:before,
#main .tabs .titles li.active:before {
	background-color: var(--dengg-accent-fresh) !important;
}