/**
 * Bienenkiste – Gestaltung für Divi 5 (Stil „Klar & Frisch“)
 *
 * 1. Schriften (lokal eingebunden, keine Google-Server)
 * 2. Design-Variablen
 * 3. Grundlagen (Schrift, Links, Zitate)
 * 4. Kopfbereich (Divi-Standardkopf)
 * 5. Hilfsklassen für Divi-Module (im Builder unter „CSS-Klasse“ eintragen)
 * 6. Startseite: Hero und Fakten
 * 7. Unterseiten: Seitenkopf
 * 8. Inhalte aus dem Import (Produktkarten, Spalten, Galerien)
 * 9. Blog
 * 10. Fußbereich
 */

/* 1. Schriften
-----------------------------------------------------------*/
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url( "../fonts/fraunces-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url( "../fonts/fraunces-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: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( "../fonts/inter-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( "../fonts/inter-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;
}

/* 2. Design-Variablen
-----------------------------------------------------------*/
:root {
	--bk-gelb: #ffcc00;
	--bk-gelb-mittel: #ffe680;
	--bk-gelb-hell: #fff6d1;
	--bk-creme: #fffbea;
	--bk-braun: #6b4a00;
	--bk-ocker: #8a6a00;
	--bk-text: #2a2618;
	--bk-grau: #6b6555;
	--bk-linie: #eee6cc;
	--bk-weiss: #fff;
	--bk-radius: 14px;
	--bk-radius-klein: 8px;
	--bk-schatten: 0 10px 30px rgba( 60, 45, 0, 0.1 );
	--bk-schrift: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bk-serif: "Fraunces", Georgia, serif;
	--bk-waben: url( "../img/waben.svg" ) 0 0 / 54px auto, linear-gradient( 180deg, #ffc800 0%, var( --bk-gelb-mittel ) 60%, var( --bk-weiss ) 100% );
	--bk-sechseck: polygon( 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50% );
}

/* 3. Grundlagen
-----------------------------------------------------------*/
body,
input,
textarea,
select,
button,
#top-menu,
.et_pb_module,
.et_pb_button {
	font-family: var( --bk-schrift );
}

/* Schriftgröße: Divi-Einstellung body_font_size (Customizer), Standard im Theme 16 px. */
body {
	color: var( --bk-text );
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.entry-title {
	color: var( --bk-text );
	font-family: var( --bk-serif );
	font-weight: 700;
	line-height: 1.2;
}

h2 {
	font-size: clamp( 28px, 3.2vw, 40px );
}

.entry-content a,
.et_pb_text a,
.et_pb_post .post-content a {
	color: var( --bk-braun );
	text-decoration: underline;
	text-decoration-color: var( --bk-gelb );
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content a:hover,
.et_pb_text a:hover,
.et_pb_post .post-content a:hover {
	color: var( --bk-text );
	text-decoration-color: var( --bk-braun );
}

blockquote {
	border-left: 4px solid var( --bk-gelb );
	background: var( --bk-creme );
	padding: 16px 20px;
	font-family: var( --bk-serif );
	font-size: 1.15em;
}

::selection {
	background: var( --bk-gelb );
	color: var( --bk-text );
}

/* 4. Kopfbereich
-----------------------------------------------------------*/
#main-header {
	box-shadow: none;
	border-bottom: 1px solid var( --bk-linie );
}

/* Etwas mehr Breite, damit Logo und alle Menüpunkte in eine Zeile passen. */
#main-header .container {
	width: 90%;
	max-width: 1200px;
}

#top-menu li {
	padding-right: 18px;
}

#top-menu li a {
	font-size: 15px;
	font-weight: 600;
}

/* Aktiver Menüpunkt: gelber Balken direkt unter dem Text. */
#top-menu > li.current-menu-item > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current_page_item > a {
	text-decoration: underline;
	text-decoration-color: var( --bk-gelb );
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}

/* Letzter Menüpunkt als gelbe Schaltfläche (Menüpunkt-CSS-Klasse bk-menu-button). */
#top-menu > li.bk-menu-button {
	padding-right: 0;
}

#top-menu > li.bk-menu-button > a {
	padding: 10px 20px !important;
	background: var( --bk-gelb );
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba( 255, 204, 0, 0.45 );
	color: var( --bk-text );
	text-decoration: none !important;
	transition: transform 0.2s, box-shadow 0.2s;
}

#top-menu > li.bk-menu-button > a:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( 255, 204, 0, 0.6 );
}

@media ( min-width: 981px ) and ( max-width: 1150px ) {
	#top-menu li {
		padding-right: 11px;
	}

	#top-menu li a {
		font-size: 13px;
	}

	/* Zu wenig Platz für die Schaltfläche: als normaler Menüpunkt zeigen. */
	#top-menu > li.bk-menu-button > a {
		padding: 0 0 45px !important;
		background: none;
		box-shadow: none;
	}

	.et-fixed-header #top-menu > li.bk-menu-button > a {
		padding-bottom: 20px !important;
	}
}

/*
 * Untermenü: ohne gelben Strich oben (der markiert schon den aktiven Menüpunkt)
 * und immer im gleichen Abstand unter dem Menütext. Divi hängt es an die
 * Header-Unterkante; die liegt oben auf der Seite 45 px unter dem Text, im
 * geschrumpften Header nach dem Scrollen nur 20 px.
 */
#top-menu > li > .sub-menu {
	margin-top: -25px;
	border-top: 0;
	border-radius: 12px;
	padding: 12px 0;
	box-shadow: var( --bk-schatten );
}

.et-fixed-header #top-menu > li > .sub-menu {
	margin-top: 0;
}

#top-menu li a:hover,
#top-menu li li a:hover {
	opacity: 1;
	color: var( --bk-text );
}

#top-menu li li a {
	border-radius: 8px;
}

#top-menu li li a:hover {
	background: var( --bk-gelb-hell );
}

.mobile_menu_bar::before {
	color: var( --bk-text );
}

.et_mobile_menu {
	border-top: 0;
	border-radius: 0 0 12px 12px;
}

.et_mobile_menu li a:hover {
	background: var( --bk-gelb-hell );
	opacity: 1;
}

/* 5. Hilfsklassen für Divi-Module
-----------------------------------------------------------*/

/* Honiggelber Verlauf mit dem Wabenmuster aus dem Banner – für Abschnitte. */
.bk-waben,
.et_pb_section.bk-waben {
	background: var( --bk-waben );
}

/* Kleine Überzeile mit gelbem Sechseck. */
.bk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var( --bk-ocker );
	font-family: var( --bk-schrift );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bk-eyebrow::before {
	content: "";
	width: 14px;
	height: 12px;
	background: var( --bk-gelb );
	clip-path: var( --bk-sechseck );
}

/* Heller Abschnitt in Honigcreme. */
.et_pb_section.bk-abschnitt-hell {
	background-color: var( --bk-creme );
}

/* Hervorgehobener Hinweis. */
.bk-hinweis {
	background: var( --bk-gelb-hell );
	border-left: 5px solid var( --bk-gelb );
	border-radius: 0 var( --bk-radius-klein ) var( --bk-radius-klein ) 0;
	padding: 18px 22px;
}

/* Abgerundete Bilder mit leichtem Schatten. */
.bk-bild img,
.et_pb_image.bk-bild img {
	border-radius: var( --bk-radius );
	box-shadow: var( --bk-schatten );
}

/* Bild in Wabenform. */
.et_pb_image.bk-wabenbild .et_pb_image_wrap {
	display: block;
	filter: drop-shadow( 0 20px 40px rgba( 0, 0, 0, 0.2 ) );
}

.et_pb_image.bk-wabenbild img {
	width: 100%;
	aspect-ratio: 1.1547;
	object-fit: cover;
	clip-path: var( --bk-sechseck );
}

/* Schaltflächen: gelb gefüllt (bk-button) oder mit Rand (bk-button-rand). */
body #page-container .et_pb_button.bk-button,
body #page-container .et_pb_button.bk-button-rand {
	display: inline-block;
	padding: 13px 26px !important;
	border: 2px solid var( --bk-gelb );
	border-radius: 999px;
	background: var( --bk-gelb );
	color: var( --bk-text );
	font-family: var( --bk-schrift );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

body #page-container .et_pb_button.bk-button {
	box-shadow: 0 6px 18px rgba( 255, 204, 0, 0.45 );
}

body #page-container .et_pb_button.bk-button-rand {
	border-color: var( --bk-text );
	background: transparent;
}

body #page-container .et_pb_button.bk-button::after,
body #page-container .et_pb_button.bk-button-rand::after {
	display: none;
}

body #page-container .et_pb_button.bk-button:hover {
	transform: translateY( -2px );
}

body #page-container .et_pb_button.bk-button-rand:hover {
	background: var( --bk-text );
	color: var( --bk-weiss );
}

/* 6. Startseite: Hero und Fakten
-----------------------------------------------------------*/
.et_pb_section.bk-hero {
	position: relative;
	overflow: hidden;
	padding: 70px 0 90px;
	background: var( --bk-weiss );
}

/* Wabenfläche rechts, wie im Banner. */
.et_pb_section.bk-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 53%;
	background: var( --bk-waben );
	border-bottom-left-radius: 120px;
}

.bk-hero .et_pb_row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

.bk-hero .et_pb_column {
	position: relative;
}

.bk-hero h1 {
	padding-bottom: 18px;
	font-size: clamp( 40px, 4.6vw, 64px );
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.bk-hero h1 em {
	font-style: normal;
	background: linear-gradient( transparent 62%, var( --bk-gelb ) 62% );
}

.bk-lead {
	color: var( --bk-grau );
	font-size: 20px;
	line-height: 1.6;
}

.bk-hero .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 6px 12px 0 0;
}

.bk-hero .et_pb_image.bk-wabenbild {
	max-width: 520px;
	margin: 0 auto;
}

/* Logo als Etikett auf dem Foto. */
.et_pb_image.bk-marke {
	position: absolute;
	right: 0;
	bottom: 18px;
	z-index: 2;
	width: auto;
	margin: 0;
	padding: 12px 16px;
	background: var( --bk-weiss );
	border-radius: 12px;
	box-shadow: var( --bk-schatten );
}

.et_pb_image.bk-marke img {
	width: 160px;
}

/* Fakten-Leiste unter dem Hero. */
.et_pb_section.bk-fakten {
	padding: 30px 0;
	background: var( --bk-creme );
	border-top: 1px solid var( --bk-linie );
	border-bottom: 1px solid var( --bk-linie );
}

.bk-fakten .et_pb_row {
	padding: 0;
}

.bk-fakt {
	display: flex;
	align-items: center;
	gap: 16px;
	line-height: 1.45;
}

.bk-hex {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 50px;
	background: var( --bk-gelb );
	clip-path: var( --bk-sechseck );
	font-size: 18px;
	font-weight: 800;
}

.bk-fakt strong {
	display: block;
	font-size: 16px;
}

.bk-fakt__text {
	color: var( --bk-grau );
	font-size: 15px;
}

@media ( max-width: 980px ) {
	.et_pb_section.bk-hero {
		padding: 40px 0 0;
	}

	.bk-hero .et_pb_row {
		flex-direction: column;
		align-items: stretch;
	}

	/* Wabenfläche als Band hinter dem Foto. */
	.et_pb_section.bk-hero::before {
		top: auto;
		left: 0;
		height: 380px;
		border-radius: 0;
	}

	.bk-hero .et_pb_column:last-child {
		padding: 30px 0 40px;
	}
}

/* 7. Unterseiten: Seitenkopf
-----------------------------------------------------------*/
.et_pb_section.bk-seitenkopf {
	position: relative;
	overflow: hidden;
	padding: 64px 0 56px;
	background: var( --bk-weiss );
	border-bottom: 1px solid var( --bk-linie );
}

/* Wabenfläche rechts, gleiche Kante wie im Hero der Startseite. */
.et_pb_section.bk-seitenkopf::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 47%;
	background: var( --bk-waben );
	border-bottom-left-radius: 90px;
}

.bk-seitenkopf .et_pb_row {
	position: relative;
	z-index: 1;
	padding: 0;
}

/* Titel endet vor der Wabenfläche. */
.bk-seitenkopf h1 {
	max-width: 50%;
	padding-bottom: 0;
	font-size: clamp( 34px, 4.2vw, 56px );
	line-height: 1.12;
}

@media ( max-width: 767px ) {
	.et_pb_section.bk-seitenkopf {
		padding: 40px 0 52px;
	}

	.et_pb_section.bk-seitenkopf::before {
		top: auto;
		width: 100%;
		height: 16px;
		border-radius: 0;
	}

	.bk-seitenkopf h1 {
		max-width: none;
	}
}

/* Kontaktseite: Verkaufsstellen als Karten (Zeile bk-orte, Text-Module bk-ort). */
.et_pb_row.bk-orte {
	display: flex;
	align-items: stretch;
}

.bk-orte .et_pb_column {
	display: flex;
}

.et_pb_text.bk-ort {
	flex: 1;
	margin-bottom: 0;
	overflow: hidden;
	background: var( --bk-weiss );
	border-radius: var( --bk-radius );
	box-shadow: var( --bk-schatten );
}

/* Kartenkopf im Etikett-Stil: Wabenband oben, darunter der Ortsname auf Weiß. */
.et_pb_text.bk-ort .et_pb_text_inner::before {
	content: "";
	display: block;
	height: 16px;
	background: url( "../img/waben.svg" ) 0 -6px / 40px auto, var( --bk-gelb );
}

.bk-ort__kopf {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 26px 30px 22px;
	background: var( --bk-weiss );
	border-bottom: 1px solid var( --bk-linie );
}

.bk-ort__hex {
	flex: none;
	display: grid;
	place-items: center;
	width: 62px;
	height: 54px;
	background: var( --bk-gelb );
	clip-path: var( --bk-sechseck );
	color: var( --bk-text );
}

.bk-ort__label {
	display: block;
	color: var( --bk-ocker );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bk-ort__kopf > div {
	min-width: 0;
}

.bk-ort h2 {
	padding: 2px 0 0;
	font-size: clamp( 24px, 2.4vw, 30px );
	overflow-wrap: break-word;
	hyphens: auto;
}

.bk-ort__inhalt {
	padding: 24px 30px 28px;
}

.bk-ort__inhalt ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bk-ort__inhalt li {
	line-height: 1.85;
}

.bk-ort__inhalt a[href^="tel"] {
	white-space: nowrap;
}

.bk-ort__inhalt li > strong:first-child {
	display: block;
	margin-bottom: 4px;
	font-family: var( --bk-serif );
	font-size: 19px;
}

@media ( max-width: 980px ) {
	.et_pb_row.bk-orte {
		flex-direction: column;
		gap: 30px;
	}

	.bk-orte .et_pb_column {
		width: 100%;
		margin-right: 0;
	}
}

@media ( max-width: 767px ) {
	.bk-ort__kopf {
		gap: 14px;
		padding: 22px 20px 20px;
	}

	.bk-ort__hex {
		width: 48px;
		height: 42px;
	}

	.bk-ort h2 {
		font-size: 22px;
	}

	.bk-ort__inhalt {
		padding: 20px 20px 24px;
	}
}

/* 8. Inhalte aus dem Import
-----------------------------------------------------------*/

/* Produktkarten (Bild, Titel, Beschreibung) in klassischen Inhalten. */
.bk-karten {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 24px;
	margin: 1.5em 0;
}

.bk-karte {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var( --bk-weiss );
	border-radius: var( --bk-radius );
	box-shadow: var( --bk-schatten );
}

.bk-karte a {
	display: block;
}

.bk-karte img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
}

.bk-karte figcaption {
	flex: 1;
	padding: 16px 18px 20px;
	border-top: 5px solid var( --bk-gelb );
	line-height: 1.5;
}

.bk-karte__titel {
	display: block;
	margin-bottom: 4px;
	color: var( --bk-text );
	font-family: var( --bk-serif );
	font-size: 19px;
	font-weight: 700;
}

.bk-karte__text {
	display: block;
	color: var( --bk-grau );
	font-size: 14px;
}

/* Produktkarte als Divi-Blurb (CSS-Klasse bk-karte). */
.et_pb_blurb.bk-karte {
	height: calc( 100% - 30px );
	overflow: hidden;
	background: var( --bk-weiss );
	border-radius: var( --bk-radius );
	box-shadow: var( --bk-schatten );
	transition: transform 0.25s;
}

.et_pb_blurb.bk-karte:hover {
	transform: translateY( -6px );
}

.et_pb_blurb.bk-karte .et_pb_blurb_content {
	max-width: none;
	text-align: left;
}

.et_pb_blurb.bk-karte .et_pb_main_blurb_image {
	margin-bottom: 0;
	border-bottom: 5px solid var( --bk-gelb );
}

.et_pb_blurb.bk-karte .et_pb_main_blurb_image .et_pb_image_wrap {
	display: block;
	width: 100%;
	max-width: none;
}

.et_pb_blurb.bk-karte .et_pb_main_blurb_image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

.et_pb_blurb.bk-karte .et_pb_blurb_container {
	padding: 20px 22px 24px;
}

.et_pb_blurb.bk-karte .et_pb_module_header {
	padding-bottom: 6px;
	font-size: 22px;
}

.et_pb_blurb.bk-karte .et_pb_module_header a {
	color: var( --bk-text );
}

.et_pb_blurb.bk-karte .et_pb_blurb_description {
	color: var( --bk-grau );
	font-size: 15px;
}

/* Zweispaltige Bereiche (klassische Darstellung ohne Divi-Layout). */
.bk-spalten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 1.5em;
}

@media ( max-width: 767px ) {
	.bk-spalten {
		grid-template-columns: 1fr;
	}
}

/* Bilder im Text: einheitliche Abstände zum umfließenden Text. */
.gallery img,
.entry-content .wp-block-image img,
.et_pb_text img {
	border-radius: var( --bk-radius-klein );
}

.et_pb_text .alignright,
.entry-content .alignright {
	float: right;
	margin: 6px 0 24px 32px;
}

.et_pb_text .alignleft,
.entry-content .alignleft {
	float: left;
	margin: 6px 32px 24px 0;
}

.et_pb_text .aligncenter,
.entry-content .aligncenter {
	margin: 28px auto;
}

.et_pb_text figure.alignright img,
.et_pb_text figure.alignleft img,
.entry-content figure.alignright img,
.entry-content figure.alignleft img {
	margin: 0;
}

/* Bildblöcke ohne Ausrichtung: Abstand zum Text darüber und darunter. */
.et_pb_text figure:not( .alignleft ):not( .alignright ),
.entry-content figure:not( .alignleft ):not( .alignright ) {
	margin: 28px 0;
}

.et_pb_text figcaption,
.entry-content figcaption {
	margin-top: 8px;
	color: var( --bk-grau );
	font-size: 14px;
}

@media ( max-width: 767px ) {
	/* Auf dem Handy steht das Bild über dem Text statt daneben. */
	.et_pb_text .alignright,
	.et_pb_text .alignleft,
	.entry-content .alignright,
	.entry-content .alignleft {
		float: none;
		display: block;
		margin: 8px 0 24px;
	}
}

/* WordPress-Galerien in Beiträgen (WordPress setzt die Ränder per ID, daher !important). */
.entry-content .gallery {
	margin: 28px 0 !important;
}

.gallery .gallery-item img {
	border: 0 !important;
}

.gallery .gallery-caption {
	color: var( --bk-grau );
	font-size: 13px;
}

/*
 * Divi-Galerie-Modul als Raster mit festen Abständen. Divi gibt jeder Reihe einen
 * prozentualen Rand nach unten mit; dadurch schwankte der Abstand zum Text danach.
 */
.et_pb_gallery_grid .et_pb_gallery_items {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

.et_pb_gallery_grid .et_pb_gallery_items::after {
	display: none;
}

.et_pb_gallery_grid .et_pb_gallery_item {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
}

@media ( max-width: 980px ) {
	.et_pb_gallery_grid .et_pb_gallery_items {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.et_pb_gallery_item .et_pb_gallery_image img {
	border-radius: var( --bk-radius-klein );
}

.et_pb_gallery_grid .et_pb_gallery_image img {
	width: 100%;
	aspect-ratio: 400 / 284;
	object-fit: cover;
}

.et_pb_gallery .et_overlay {
	background-color: rgba( 255, 204, 0, 0.75 );
	border-color: var( --bk-gelb );
}

.et_pb_gallery .et_overlay::before {
	color: var( --bk-text ) !important;
}

/* 9. Blog
-----------------------------------------------------------*/
.et_pb_post .entry-featured-image-url img,
.single .et_post_meta_wrapper img {
	border-radius: var( --bk-radius );
}

/* Blog-Raster und Archive: Beitragsbilder einheitlich im Querformat. */
body:not( .single ) #left-area .et_pb_post .entry-featured-image-url img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.et_pb_blog_grid .et_pb_image_container img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.et_pb_blog_grid .et_pb_post {
	border: 0;
	border-top: 3px solid var( --bk-text );
	padding: 18px 0 0;
	background: transparent;
}

.et_pb_post .entry-title a,
.et_pb_post h2 a {
	color: var( --bk-text );
}

.et_pb_post .entry-title a:hover {
	color: var( --bk-braun );
}

.post-meta,
.post-meta a {
	color: var( --bk-ocker ) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.more-link,
.et_pb_post a.more-link {
	color: var( --bk-braun );
	font-weight: 700;
}

/* 10. Fußbereich
-----------------------------------------------------------*/
/* Eigene Ebene, damit der Inhalt darüber die Bienen nicht verdeckt. */
#main-footer {
	position: relative;
	z-index: 2;
}

/* Die zwei Bienen vom alten Seitenfuß, halb über der Kante schwebend. */
#main-footer::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -46px;
	right: 5%;
	width: 133px;
	height: 75px;
	background: url( "../img/bienchen.png" ) no-repeat center / contain;
	pointer-events: none;
}

#main-footer .footer-widget h4 {
	font-weight: 700;
}

#main-footer .footer-widget a:hover {
	text-decoration: underline;
}

/* Datum unter den Beitragstiteln im Widget „Aktuelle Beiträge“: kleiner und gedämpft. */
#main-footer .widget_recent_entries .post-date {
	display: block;
	margin-top: 1px;
	color: rgba( 42, 38, 24, 0.75 ); /* auf Gelb noch gut lesbar (Kontrast > 5:1) */
	font-size: 13px;
}

#footer-info {
	line-height: 1.8;
}

#footer-info a {
	color: inherit;
	font-weight: 700;
}

.et_pb_scroll_top.et-pb-icon {
	background: var( --bk-text );
	color: var( --bk-gelb );
}

.et_pb_scroll_top.et-pb-icon:hover {
	background: var( --bk-gelb );
	color: var( --bk-text );
}