/*
Theme Name:   Divi Wald Jacob
Theme URI:    https://wwjacob.de
Description:  Child-Theme für Wald Jacob GmbH & Co. KG auf Basis von Divi 5. Übernimmt das Design der bisherigen TYPO3-Website (Waldgrün, Raleway, Ornament-Muster) in verfeinerter Form.
Author:       J&J Media
Author URI:   https://jandj-media.de
Template:     Divi
Version:      1.0.0
Text Domain:  divi-waldjacob
*/

/* ==========================================================================
   Design-Tokens
   Alle Werte kommen aus den globalen Divi-Variablen (inc/variables.php,
   gepflegt im Divi-Variablen-Manager). Hier stehen nur Kurznamen dafür.
   ========================================================================== */
:root {
	/* Farben */
	--wwj-gruen: var(--gcid-wwj-gruen);
	--wwj-gruen-hell: var(--gcid-wwj-gruen-hell);
	--wwj-gruen-dunkel: var(--gcid-wwj-gruen-dunkel);
	--wwj-rot: var(--gcid-wwj-rot);
	--wwj-braun: var(--gcid-wwj-braun);
	--wwj-erde: var(--gcid-wwj-erde);
	--wwj-blattgruen: var(--gcid-wwj-blattgruen);
	--wwj-mai: var(--gcid-wwj-mai);
	--wwj-mint: var(--gcid-wwj-mint);
	--wwj-orange: var(--gcid-wwj-orange);
	--wwj-grau: var(--gcid-wwj-grau);
	--wwj-weiss: var(--gcid-wwj-weiss);
	--wwj-linie: var(--gcid-wwj-linie);
	--wwj-feldrand: var(--gcid-wwj-feldrand);
	--wwj-schwarz: #000;

	/* Schriften */
	--wwj-font: var(--gvid-wwj-schrift), Helvetica, Arial, sans-serif;
	--wwj-font-akzent: var(--gvid-wwj-schrift-akzent), "Times New Roman", serif;

	/* Layout */
	--wwj-breite: var(--gvid-wwj-breite);
	--wwj-abstand-sektion: var(--gvid-wwj-abstand-sektion);
	--wwj-abstand-zeile: var(--gvid-wwj-abstand-zeile);
	--wwj-abstand-modul: var(--gvid-wwj-abstand-modul);
	--wwj-abstand-kacheln: var(--gvid-wwj-abstand-kacheln);
	--wwj-ecken: var(--gvid-wwj-ecken);
	--wwj-logo-hoehe: var(--gvid-wwj-logo-hoehe);
	--wwj-kachel-deckkraft: var(--gvid-wwj-kachel-deckkraft);

	/* Typografie */
	--wwj-text: var(--gvid-wwj-text-groesse);
	--wwj-text-zeilenhoehe: var(--gvid-wwj-text-zeilenhoehe);
	--wwj-text-klein: var(--gvid-wwj-text-klein);
	--wwj-text-mini: var(--gvid-wwj-text-mini);
	--wwj-h-laufweite: var(--gvid-wwj-h-laufweite);
	--wwj-h-zeilenhoehe: var(--gvid-wwj-h-zeilenhoehe);
	--wwj-h1: var(--gvid-wwj-h1-groesse);
	--wwj-h1-hero: var(--gvid-wwj-h1-hero-groesse);
	--wwj-hero-unterzeile: var(--gvid-wwj-hero-unterzeile);
	--wwj-h2: var(--gvid-wwj-h2-groesse);
	--wwj-h3: var(--gvid-wwj-h3-groesse);
	--wwj-h4: var(--gvid-wwj-h4-groesse);
	--wwj-h5: var(--gvid-wwj-h5-groesse);
	--wwj-fragen: var(--gvid-wwj-fragen-groesse);
	--wwj-telefon: var(--gvid-wwj-telefon-groesse);
	--wwj-menue: var(--gvid-wwj-menue-groesse);
	--wwj-button: var(--gvid-wwj-button-groesse);
	--wwj-button-innen: var(--gvid-wwj-button-innen-v) var(--gvid-wwj-button-innen-h);
	--wwj-kachel-titel: var(--gvid-wwj-kachel-titel);
	--wwj-navkachel-titel: var(--gvid-wwj-navkachel-titel);
	--wwj-hero-text: var(--gvid-wwj-hero-text);
	--wwj-icon: var(--gvid-wwj-icon-groesse);
	--wwj-hamburger: var(--gvid-wwj-hamburger-groesse);

	/* Bilder */
	--wwj-muster: var(--gvid-wwj-muster);
	--wwj-muster-hell: var(--gvid-wwj-muster-hell);

	/* Abgeleitete Töne (Transparenzen der Grundfarben) */
	--wwj-weiss-85: color-mix(in srgb, var(--wwj-weiss) 85%, transparent);
	--wwj-weiss-55: color-mix(in srgb, var(--wwj-weiss) 55%, transparent);
	--wwj-weiss-50: color-mix(in srgb, var(--wwj-weiss) 50%, transparent);
	--wwj-weiss-35: color-mix(in srgb, var(--wwj-weiss) 35%, transparent);
	--wwj-weiss-15: color-mix(in srgb, var(--wwj-weiss) 15%, transparent);
	--wwj-weiss-12: color-mix(in srgb, var(--wwj-weiss) 12%, transparent);
	--wwj-schatten-leicht: 0 2px 12px color-mix(in srgb, var(--wwj-schwarz) 6%, transparent);
	--wwj-schatten: 0 6px 18px color-mix(in srgb, var(--wwj-schwarz) 18%, transparent);
	--wwj-schatten-menue: 0 8px 20px color-mix(in srgb, var(--wwj-schwarz) 15%, transparent);
}

/* Divi-Primärfarbe (Hamburger, Links, Akzente der Standardmodule) auf Waldgrün */
body {
	--gcid-primary-color: var(--wwj-gruen);
}

/* ==========================================================================
   Grundtypografie
   ========================================================================== */
body,
body .et_pb_text,
body .et_pb_menu {
	font-family: var(--wwj-font);
	color: var(--wwj-braun);
}

body {
	font-size: var(--wwj-text);
	line-height: var(--wwj-text-zeilenhoehe);
}

h1, h2, h3, h4,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
	font-family: var(--wwj-font);
	letter-spacing: var(--wwj-h-laufweite);
	line-height: var(--wwj-h-zeilenhoehe);
	text-transform: uppercase;
}

h2, .et_pb_module h2 { color: var(--wwj-gruen); font-weight: 700; }
h3, .et_pb_module h3 { color: var(--wwj-gruen); font-weight: 300; }
h4, .et_pb_module h4 { color: var(--wwj-erde); font-weight: 600; }

a { color: var(--wwj-gruen); transition: color .2s ease; }
a:hover, a:focus { color: var(--wwj-rot); }

/* Buttons im Stil der alten Seite: Blattgrün, Versalien, Rot im Hover */
body .et_pb_button,
a.btn {
	background: var(--wwj-blattgruen);
	border: 1px solid var(--wwj-blattgruen);
	border-radius: var(--wwj-ecken);
	color: var(--wwj-weiss) !important;
	font-family: var(--wwj-font);
	font-size: var(--wwj-button);
	letter-spacing: var(--wwj-h-laufweite);
	padding: var(--wwj-button-innen) !important;
	text-decoration: none;
	text-transform: uppercase;
	transition: background .25s ease, border-color .25s ease;
}

body .et_pb_button:hover,
a.btn:hover, a.btn:focus {
	background: var(--wwj-rot);
	border-color: var(--wwj-rot);
	padding: var(--wwj-button-innen) !important;
}

body .et_pb_button::after { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.wwj-header {
	background: var(--wwj-weiss);
	box-shadow: var(--wwj-schatten-leicht);
	padding: 0 !important;
	position: relative;
	z-index: 100;
}

.wwj-header .et_pb_row {
	max-width: var(--wwj-breite);
	padding: 8px 0 !important;
	width: 90%;
}

.wwj-header .et_pb_menu__logo img {
	max-height: var(--wwj-logo-hoehe);
	width: auto;
}

/* Logo links, Navigation rechts */
.wwj-header .et_pb_menu_inner_container { align-items: center; }
.wwj-header .et_pb_menu.et_flex_module .et_pb_menu__wrap { flex: 1 1 auto; justify-content: flex-end; }

.wwj-header .et_pb_menu .et-menu > li {
	padding-left: 0;
	padding-right: 0;
}

.wwj-header .et_pb_menu .et-menu > li > a {
	color: var(--wwj-braun);
	font-size: var(--wwj-menue);
	font-weight: 500;
	letter-spacing: .04em;
	padding: 26px 14px 34px !important;
	position: relative;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}

/* Drei Quadrate unter jedem Menüpunkt (Markenzeichen der alten Seite) */
.wwj-header .et_pb_menu .et-menu > li > a::before {
	background: repeating-linear-gradient(to right, var(--wwj-mint) 0 6px, transparent 6px 10px);
	bottom: 20px;
	content: "";
	height: 6px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 26px;
}

.wwj-header .et_pb_menu .et-menu > li > a:hover,
.wwj-header .et_pb_menu .et-menu > li.current-menu-item > a,
.wwj-header .et_pb_menu .et-menu > li.current-menu-ancestor > a,
.wwj-header .et_pb_menu .et-menu > li.current-menu-parent > a {
	background: var(--wwj-gruen-hell);
	color: var(--wwj-weiss) !important;
	opacity: 1;
}

.wwj-header .et_pb_menu .et-menu > li.current-menu-item > a::before,
.wwj-header .et_pb_menu .et-menu > li.current-menu-ancestor > a::before,
.wwj-header .et_pb_menu .et-menu > li.current-menu-parent > a::before {
	background: repeating-linear-gradient(to right, var(--wwj-orange) 0 6px, transparent 6px 10px);
}

/* Divi-Pfeil bei Untermenüs ausblenden, die Quadrate übernehmen die Rolle */
.wwj-header .et_pb_menu .et-menu > li.menu-item-has-children > a::after { display: none; }

/* Haus-Icon statt Text für „Startseite“ */
/* Gleiche Box wie die Textpunkte (26px oben / 34px unten), Icon auf Höhe der Schriftmitte */
.wwj-header .et-menu > li.menu-home > a {
	align-items: flex-start;
	font-size: 0 !important;
	padding: 35px 18px 23px !important;
}

.wwj-header .et-menu > li.menu-home > a::before { display: none; }

.wwj-header .et-menu > li.menu-home > a::after {
	background: var(--wwj-mai);
	content: "";
	display: block;
	height: 22px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 12h3v9h6v-6h3v6h6v-9h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 12h3v9h6v-6h3v6h6v-9h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	position: static;
	width: 24px;
}

.wwj-header .et-menu > li.menu-home > a:hover { background: none; }
.wwj-header .et-menu > li.menu-home > a:hover::after,
.wwj-header .et-menu > li.menu-home.current-menu-item > a::after { background: var(--wwj-rot); }
.wwj-header .et-menu > li.menu-home.current-menu-item > a { background: none; }

/* Dropdown: halbtransparentes Grün wie im Original */
.wwj-header .et_pb_menu .et-menu .sub-menu {
	background: color-mix(in srgb, var(--wwj-gruen-hell) 95%, transparent);
	border-top: 0;
	box-shadow: var(--wwj-schatten-menue);
	padding: 0;
	width: 260px;
}

.wwj-header .et_pb_menu .et-menu .sub-menu li { padding: 0; width: 100%; }

.wwj-header .et_pb_menu .et-menu .sub-menu a {
	border-top: 1px solid var(--wwj-weiss-50);
	color: var(--wwj-weiss) !important;
	font-size: var(--wwj-menue);
	padding: 16px 20px !important;
	text-transform: none;
	width: 100%;
}

.wwj-header .et_pb_menu .et-menu .sub-menu a:hover,
.wwj-header .et_pb_menu .et-menu .sub-menu .current-menu-item > a {
	background: var(--wwj-gruen-dunkel);
	opacity: 1;
}

/* Suche */
.wwj-header .et_pb_menu__search-button::after,
.wwj-header .et_pb_menu__icon.et_pb_menu__search-button { color: var(--wwj-mai); font-size: var(--wwj-icon); }
.wwj-header .et_pb_menu__search-button:hover::after { color: var(--wwj-rot); }

/* Mobile-Navigation */
.wwj-header .mobile_menu_bar::before { color: var(--wwj-gruen); font-size: var(--wwj-hamburger); }
.wwj-header .et_mobile_menu { background: var(--wwj-gruen); border-top: 3px solid var(--wwj-rot); }
.wwj-header .et_mobile_menu li a { border-bottom: 1px solid var(--wwj-weiss-15); color: var(--wwj-weiss) !important; text-transform: uppercase; }
.wwj-header .et_mobile_menu li.menu-home a { font-size: var(--wwj-button) !important; }
.wwj-header .et_mobile_menu li.menu-home a::after { display: none; }
.wwj-header .et_mobile_menu .sub-menu a { text-transform: none; padding-left: 30px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.wwj-footer {
	background-color: var(--wwj-braun) !important;
	color: var(--wwj-weiss-85);
	font-size: var(--wwj-text-klein);
	padding: var(--wwj-abstand-sektion) 0 0 !important;
}

.wwj-footer .et_pb_row { max-width: var(--wwj-breite); width: 90%; }

.wwj-footer .et_pb_text,
.wwj-footer .et_pb_text p,
.wwj-footer address { color: var(--wwj-weiss-85); }

.wwj-footer a { color: var(--wwj-weiss); text-decoration: none; }
.wwj-footer a:hover { color: var(--wwj-rot); }

.wwj-footer .wwj-footer-logo img {
	background: var(--wwj-weiss);
	max-width: 200px;
	padding: 8px 12px;
}

.wwj-footer address {
	font-style: normal;
	line-height: 2;
}

.wwj-footer .wwj-telefon {
	color: var(--wwj-weiss);
	display: inline-block;
	font-size: var(--wwj-telefon);
	font-weight: 600;
	letter-spacing: .02em;
	margin-top: 14px;
	padding-left: 36px;
	position: relative;
}

.wwj-footer .wwj-telefon::before {
	background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/ico-phone.svg") center / contain no-repeat;
	content: "";
	height: 26px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
}

.wwj-footer .wwj-fragen { text-align: center; }

.wwj-footer .wwj-fragen h2 {
	color: var(--wwj-mai);
	font-size: var(--wwj-fragen);
	font-weight: 300;
	padding-bottom: 12px;
	text-align: center;
}

.wwj-footer .wwj-fragen .et_pb_button_module_wrapper,
.wwj-footer .wwj-fragen p { text-align: center; }

/* Metanavigation mit Icons */
.wwj-meta {
	list-style: none !important;
	margin: 0;
	padding: 0 0 0 40px !important;
}

.wwj-meta li {
	margin: 0 0 18px;
	position: relative;
}

.wwj-meta a {
	font-size: var(--wwj-button);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.wwj-meta li::before {
	content: "";
	height: 22px;
	left: -36px;
	opacity: .45;
	position: absolute;
	top: -1px;
	width: 22px;
}

.wwj-meta li:hover::before { opacity: 1; }
.wwj-meta .kontakt::before { background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/meta-contact.svg") center / contain no-repeat; }
.wwj-meta .anfahrt::before { background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/meta-marker.svg") center / contain no-repeat; }
.wwj-meta .agb::before { background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/meta-agb.svg") center / contain no-repeat; }
.wwj-meta .datenschutz::before { background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/meta-security.svg") center / contain no-repeat; }
.wwj-meta .impressum::before { background: url("//wwj.jandj-media.de/wp-content/themes/divi-waldjacob/assets/icons/meta-imprint.svg") center / contain no-repeat; }

.wwj-social {
	display: flex;
	gap: 14px;
	margin-top: 10px;
	padding-left: 40px;
}

.wwj-social a {
	align-items: center;
	border: 1px solid var(--wwj-weiss-35);
	border-radius: 50%;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease;
	width: 40px;
}

.wwj-social a:hover { background: var(--wwj-rot); border-color: var(--wwj-rot); }
.wwj-social a::before { background: var(--wwj-weiss); content: ""; height: 18px; width: 18px; }
.wwj-social .facebook::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V14h2.7v8z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V14h2.7v8z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.wwj-social .instagram::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 7.3A4.7 4.7 0 1 0 12 16.7 4.7 4.7 0 0 0 12 7.3zm0 7.7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm6-7.9a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0zM21.9 8.2c-.1-1.6-.4-3-1.6-4.2S17.4 2.3 15.8 2.2C14.2 2.1 9.8 2.1 8.2 2.2 6.6 2.3 5.2 2.6 4 3.8S2.3 6.6 2.2 8.2c-.1 1.6-.1 6 0 7.6.1 1.6.4 3 1.6 4.2s2.6 1.5 4.2 1.6c1.6.1 6 .1 7.6 0 1.6-.1 3-.4 4.2-1.6s1.5-2.6 1.6-4.2c.1-1.6.1-6 0-7.6zM19.8 17.5a3.1 3.1 0 0 1-1.7 1.7c-1.2.5-4 .4-5.3.4s-4.1.1-5.3-.4a3.1 3.1 0 0 1-1.7-1.7c-.5-1.2-.4-4-.4-5.3s-.1-4.1.4-5.3a3.1 3.1 0 0 1 1.7-1.7c1.2-.5 4-.4 5.3-.4s4.1-.1 5.3.4a3.1 3.1 0 0 1 1.7 1.7c.5 1.2.4 4 .4 5.3s.1 4.1-.4 5.3z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 7.3A4.7 4.7 0 1 0 12 16.7 4.7 4.7 0 0 0 12 7.3zm0 7.7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm6-7.9a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0zM21.9 8.2c-.1-1.6-.4-3-1.6-4.2S17.4 2.3 15.8 2.2C14.2 2.1 9.8 2.1 8.2 2.2 6.6 2.3 5.2 2.6 4 3.8S2.3 6.6 2.2 8.2c-.1 1.6-.1 6 0 7.6.1 1.6.4 3 1.6 4.2s2.6 1.5 4.2 1.6c1.6.1 6 .1 7.6 0 1.6-.1 3-.4 4.2-1.6s1.5-2.6 1.6-4.2c.1-1.6.1-6 0-7.6zM19.8 17.5a3.1 3.1 0 0 1-1.7 1.7c-1.2.5-4 .4-5.3.4s-4.1.1-5.3-.4a3.1 3.1 0 0 1-1.7-1.7c-.5-1.2-.4-4-.4-5.3s-.1-4.1.4-5.3a3.1 3.1 0 0 1 1.7-1.7c1.2-.5 4-.4 5.3-.4s4.1-.1 5.3.4a3.1 3.1 0 0 1 1.7 1.7c.5 1.2.4 4 .4 5.3s.1 4.1-.4 5.3z%22/%3E%3C/svg%3E") center / contain no-repeat; }

.wwj-zertifikat img {
	background: var(--wwj-weiss);
	border-radius: 50%;
	margin-top: 18px;
	max-width: 90px;
	padding: 8px;
}

/* Untere Leiste */
.wwj-footer-bottom {
	border-top: 1px solid var(--wwj-weiss-12);
	font-size: var(--wwj-text-mini);
	margin-top: 40px;
	padding: 18px 0 !important;
}

.wwj-footer-bottom p { color: var(--wwj-weiss-55); text-align: center; }

/* ==========================================================================
   Wiederverwendbare Klassen für Inhaltsseiten
   ========================================================================== */
.wwj-muster {
	background-color: var(--wwj-gruen) !important;
	background-image: var(--wwj-muster) !important;
	background-repeat: repeat !important;
	color: var(--wwj-weiss);
}

.wwj-muster h1, .wwj-muster h2, .wwj-muster h3 { color: var(--wwj-weiss); }

/* ==========================================================================
   Seiteninhalte (importierte TYPO3-Seiten)
   ========================================================================== */
.c { text-align: center; }

h2 span, .et_pb_module h2 span {
	color: var(--wwj-erde);
	display: block;
	font-size: .65em;
	font-weight: 400;
	margin-top: 10px;
}

.wwj-inhalt { padding: var(--wwj-abstand-sektion) 0 !important; }
.wwj-inhalt .et_pb_row { max-width: var(--wwj-breite); padding: var(--wwj-abstand-zeile) 0 !important; width: 90%; }
.wwj-inhalt + .wwj-inhalt--zwei,
.wwj-inhalt--zwei { background: var(--wwj-muster-hell) repeat var(--wwj-grau) !important; }

/* .wwj-hN: Überschrift wurde für eine saubere Hierarchie abgestuft, behält aber ihr bisheriges Aussehen */
.wwj-inhalt h2, .wwj-inhalt .wwj-h2 { font-size: var(--wwj-h2); margin-bottom: .6em; text-align: center; }
.wwj-inhalt h3, .wwj-inhalt .wwj-h3 { color: var(--wwj-gruen); font-size: var(--wwj-h3); font-weight: 300; margin: .4em 0 .6em; text-align: center; }
.wwj-inhalt h4, .wwj-inhalt .wwj-h4 { color: var(--wwj-erde); font-size: var(--wwj-h4); font-weight: 600; letter-spacing: .06em; margin: 0 0 .5em; text-align: left; }
.wwj-inhalt h5, .wwj-inhalt .wwj-h5 { color: var(--wwj-gruen); font-size: var(--wwj-h5); font-weight: 600; letter-spacing: .03em; margin: 0; padding-bottom: 10px; text-align: left; }

/* Rechtstexte (Datenschutz): linksbündig, ruhiger als normale Inhaltsseiten */
.wwj-rechtstext .et_pb_row { max-width: calc(var(--wwj-breite) * .75); }
.wwj-inhalt.wwj-rechtstext h2 { font-size: var(--wwj-h4); margin: 1.6em 0 .6em; text-align: left; }
.wwj-inhalt.wwj-rechtstext h3 { color: var(--wwj-erde); font-size: var(--wwj-text); font-weight: 600; margin: 1em 0 .4em; text-align: left; text-transform: none; letter-spacing: 0; }
.wwj-rechtstext ul, .wwj-rechtstext ol { padding-bottom: 1em; }

/* Offene Punkte in Entwürfen – vor Veröffentlichung klären */
mark.wwj-offen { background: color-mix(in srgb, var(--wwj-orange) 30%, transparent); color: inherit; padding: 0 .2em; }
.wwj-offen-hinweis { background: var(--wwj-grau); border-left: 4px solid var(--wwj-orange); font-size: var(--wwj-text-klein); padding: 12px 16px !important; }

/* Fußnoten wie „*Lieferung ab 20 rm“ */
.wwj-hinweis { color: var(--wwj-erde); font-size: var(--wwj-text-klein); font-style: italic; }
.wwj-inhalt p { padding-bottom: 1em; }
.wwj-inhalt ul:not(.wwj-downloads) { padding-left: 1.2em; }
.wwj-inhalt li { padding-bottom: .3em; }

/* Bilder füllen immer die Spaltenbreite – auch kleine Originale (z. B. 300 × 200 px) */
.wwj-bild .et_pb_image_wrap { display: block; width: 100%; }
.wwj-bild img { height: auto; width: 100%; }

/* Gleichmäßiger Abstand zwischen Zeilen und Modulen */
.wwj-inhalt { gap: 0 !important; }
.wwj-inhalt .et_pb_column { gap: var(--wwj-abstand-modul); }
.wwj-bildspalte .wwj-bild { margin-bottom: 20px !important; }
.wwj-bildunterschrift { color: var(--wwj-erde); font-size: var(--wwj-button); font-style: italic; margin-top: -10px; }

.wwj-grid .et_pb_module { margin-bottom: 0 !important; }
.wwj-grid h4 { margin-top: 8px; }

/* Bilder im Raster einheitlich hoch */
.wwj-grid .wwj-bild img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Tabellen (Brennholzpreise) */
.wwj-tabelle {
	border-collapse: collapse;
	margin-bottom: 1em;
	width: 100%;
}

.wwj-tabelle th,
.wwj-tabelle td {
	border-bottom: 1px solid var(--wwj-linie);
	padding: 10px 12px;
	text-align: left;
}

.wwj-tabelle th { background: var(--wwj-gruen); color: var(--wwj-weiss) !important; font-weight: 600; }
.wwj-tabelle tr:nth-child(even) td { background: var(--wwj-grau); }

/* Downloads */
.wwj-downloads { list-style: none !important; padding: 0 !important; }
.wwj-downloads li { border-bottom: 1px solid var(--wwj-linie); padding: 10px 0 10px 28px !important; position: relative; }
.wwj-downloads li::before { color: var(--wwj-rot); content: "↓"; font-weight: 700; left: 6px; position: absolute; }

/* Titelband mit Unterseiten-Kacheln (wie lib.navigation_sub) */
.wwj-band { padding: 40px 0 50px !important; }
.wwj-band .et_pb_row { max-width: var(--wwj-breite); padding: 10px 0 !important; width: 90%; }

.wwj-bandtitel h1 {
	color: var(--wwj-weiss);
	font-size: var(--wwj-h1);
	font-weight: 300;
	letter-spacing: .12em;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Kacheln teilen sich die Zeilenbreite gleichmäßig und stehen mittig */
.wwj-band .et_pb_row.wwj-navkacheln { column-gap: var(--wwj-abstand-kacheln) !important; justify-content: center; }
.wwj-navkacheln > .et_pb_column { flex: 1 1 0 !important; max-width: none !important; }

.wwj-navkachel {
	background: var(--wwj-weiss);
	box-shadow: var(--wwj-schatten);
	height: 100%;
	margin-bottom: 0 !important;
	transition: transform .25s ease;
}

.wwj-navkachel:hover { transform: translateY(-4px); }
.wwj-navkachel .et_pb_main_blurb_image { margin: 0 !important; overflow: hidden; position: relative; }
.wwj-navkachel .et_pb_main_blurb_image img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; width: 100%; }
.wwj-navkachel:hover .et_pb_main_blurb_image img { transform: scale(1.06); }

.wwj-navkachel .et_pb_blurb_container { padding: 22px 14px; text-align: center; }

.wwj-navkachel .et_pb_module_header,
.wwj-navkachel .et_pb_module_header a {
	color: var(--wwj-braun);
	font-size: var(--wwj-navkachel-titel);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	padding: 0;
	text-transform: uppercase;
}

.wwj-navkachel--aktiv .et_pb_module_header a,
.wwj-navkachel:hover .et_pb_module_header a { color: var(--wwj-rot); }

/* Startseite: Hero mit Drohnenvideo */
.wwj-hero {
	align-items: center;
	display: flex;
	min-height: 78vh;
	padding: 100px 0 !important;
	position: relative;
}

.wwj-hero::before {
	background: linear-gradient(180deg, color-mix(in srgb, var(--wwj-gruen) 55%, transparent), color-mix(in srgb, var(--wwj-gruen) 75%, transparent));
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* Zeile/Spalte statisch, damit der Störer sich am ganzen Hero ausrichtet */
.wwj-hero .et_pb_row,
.wwj-hero .et_pb_column { max-width: 860px; position: static !important; width: 90%; }
.wwj-hero .et_pb_column { max-width: none; width: 100%; }
.wwj-hero .et_pb_module { position: relative; z-index: 2; }
.wwj-hero-text { color: var(--wwj-weiss); text-align: center; }

.wwj-hero-text h1 {
	color: var(--wwj-weiss);
	font-size: var(--wwj-h1-hero);
	font-weight: 700;
	letter-spacing: var(--wwj-h-laufweite);
	line-height: 1.3;
}

.wwj-hero-unterzeile {
	color: var(--wwj-mai);
	font-family: var(--wwj-font-akzent);
	font-size: var(--wwj-hero-unterzeile);
	font-weight: 700;
	letter-spacing: .08em;
	padding: 10px 0 24px !important;
	text-transform: uppercase;
}

.wwj-hero-text p { color: var(--wwj-weiss); font-size: var(--wwj-hero-text); }
.wwj-hero-text strong { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* Brennholz-Störer unten links im Hero */
.wwj-hero .wwj-badge {
	bottom: 40px;
	left: 5%;
	margin: 0 !important;
	position: absolute !important;
	transition: transform .25s ease;
	width: 170px;
	z-index: 3;
}

.wwj-badge:hover { transform: rotate(-4deg) scale(1.04); }

/* Startseite: farbige Kachelnavigation */
.wwj-kachelbereich { gap: 0 !important; padding: 0 !important; }

/* Divi begrenzt Blurbs standardmäßig auf 550px – Kacheln sollen die Spalte füllen */
.wwj-kachel .et_pb_blurb_content,
.wwj-navkachel .et_pb_blurb_content { max-width: none !important; }
.wwj-kachel .et_pb_image_wrap,
.wwj-navkachel .et_pb_image_wrap { display: block; width: 100%; }
.wwj-kachelbereich .et_pb_row.wwj-kacheln { gap: 0 !important; margin: 0 !important; max-width: 100%; padding: 0 !important; width: 100%; }
.wwj-kacheln > .et_pb_column { flex: 0 0 33.3333% !important; margin: 0 !important; max-width: 33.3333%; }

.wwj-kachel {
	margin: 0 !important;
	overflow: hidden;
	position: relative;
}

.wwj-kachel .et_pb_main_blurb_image { margin: 0 !important; }
.wwj-kachel .et_pb_main_blurb_image img { aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; width: 100%; }
.wwj-kachel:hover .et_pb_main_blurb_image img { transform: scale(1.06); }

.wwj-kachel .et_pb_blurb_container {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 50%;
	justify-content: center;
	left: 0;
	padding: 20px;
	position: absolute;
	right: 0;
	transition: height .3s ease;
}

.wwj-kachel:hover .et_pb_blurb_container { height: 56%; }

.wwj-kachel .et_pb_module_header,
.wwj-kachel .et_pb_module_header a {
	color: var(--wwj-weiss);
	font-size: var(--wwj-kachel-titel);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.25;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

/* Linkfläche über die ganze Kachel */
.wwj-kachel .et_pb_module_header a::after { content: ""; inset: 0; position: absolute; }

.wwj-kachel--1 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-1) var(--wwj-kachel-deckkraft), transparent); }  /* Holzernte */
.wwj-kachel--2 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-2) var(--wwj-kachel-deckkraft), transparent); }  /* Waldbau */
.wwj-kachel--3 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-3) var(--wwj-kachel-deckkraft), transparent); }  /* Forstplanung */
.wwj-kachel--4 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-4) var(--wwj-kachel-deckkraft), transparent); }  /* Privatforst */
.wwj-kachel--5 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-5) var(--wwj-kachel-deckkraft), transparent); }  /* Angebote */
.wwj-kachel--6 .et_pb_blurb_container { background: color-mix(in srgb, var(--gcid-wwj-kachel-6) var(--wwj-kachel-deckkraft), transparent); }  /* Über uns */

/* Formulare */
.wwj-formhinweis { background: var(--wwj-grau); border-left: 4px solid var(--wwj-blattgruen); font-size: var(--wwj-text-klein); margin-bottom: 20px !important; padding: 16px 20px; }
.wwj-formhinweis p:last-child { padding-bottom: 0; }

.wwj-formular .input,
.wwj-formular input[type="text"],
.wwj-formular textarea,
.wwj-formular select {
	background: var(--wwj-weiss) !important;
	border: 1px solid var(--wwj-feldrand) !important;
	border-radius: var(--wwj-ecken) !important;
	color: var(--wwj-braun) !important;
	font-family: var(--wwj-font);
	padding: 14px !important;
}

.wwj-formular .input:focus { border-color: var(--wwj-gruen) !important; }
.wwj-formular .et_pb_contact_field_options_title { color: var(--wwj-gruen); font-weight: 600; }
.wwj-formular .et_pb_contact_submit { background: var(--wwj-blattgruen) !important; border: 0 !important; color: var(--wwj-weiss) !important; text-transform: uppercase; }
.wwj-formular .et_pb_contact_submit:hover { background: var(--wwj-rot) !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.wwj-navkacheln { flex-wrap: wrap !important; }
	.wwj-navkacheln > .et_pb_column { flex: 0 0 calc(50% - var(--wwj-abstand-kacheln) / 2) !important; max-width: calc(50% - var(--wwj-abstand-kacheln) / 2) !important; }
	.wwj-band .et_pb_row.wwj-navkacheln { row-gap: var(--wwj-abstand-kacheln) !important; }
	.wwj-kacheln { flex-wrap: wrap !important; }
	.wwj-kacheln > .et_pb_column { flex: 0 0 50% !important; max-width: 50%; }
	.wwj-hero .wwj-badge { bottom: 20px; width: 120px; }
	.wwj-hero { padding-bottom: 160px !important; }
}
@media (max-width: 980px) {
	.wwj-footer .wwj-fragen { margin: 30px 0; }
	.wwj-meta, .wwj-social { padding-left: 36px !important; }
}

@media (max-width: 767px) {
	.wwj-footer { text-align: center; }
	.wwj-meta { display: inline-block; text-align: left; }
	.wwj-social { justify-content: center; padding-left: 0; }
	.wwj-footer .wwj-fragen h2 { font-size: calc(var(--wwj-fragen) * .76); }
}