.bwk-wrapper {
	--bwk-fill-color: #9aa5b1;
	--bwk-hover-color: #c0392b;
	--bwk-border-color: #ffffff;
	--bwk-text-color: #ffffff;
	--bwk-legend-color: #1f2933;
	--bwk-bodensee-color: #b3def3;
	--bwk-bodensee-text-color: #008fd9;
	--bwk-tooltip-bg: #1f2933;
	--bwk-tooltip-text: #ffffff;
	--bwk-tooltip-max-width: 260px;
	--bwk-tooltip-font-size: 14px;
	--bwk-font-size-map: 18px;
	--bwk-font-size-legend: 18px;
	--bwk-font-size-legend-title: 24px;
	--bwk-max-width: 100%;
	position: relative;
	max-width: var(--bwk-max-width);
	margin: 0 auto;
}

.bwk-map {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 752.86133 / 867.68457;
}

.bwk-kreis .bwk-fill {
	fill: var(--bwk-fill-color);
	transition: fill 0.15s ease;
}

.bwk-kreis .bwk-border {
	fill: none;
	stroke: var(--bwk-border-color);
	stroke-width: 0.6;
}

.bwk-kreis {
	cursor: pointer;
	outline: none;
}

.bwk-kreis:hover .bwk-fill,
.bwk-kreis:focus-visible .bwk-fill,
.bwk-kreis.is-active .bwk-fill {
	fill: var(--bwk-hover-color);
}

.bwk-landesgrenze {
	fill: none;
	stroke: var(--bwk-border-color);
	stroke-width: 2;
	pointer-events: none;
}

.bwk-regierungsbezirke {
	fill: none;
	stroke: var(--bwk-border-color);
	stroke-width: 1.2;
	pointer-events: none;
}

.bwk-label-group text {
	font-family: inherit;
	pointer-events: none;
	user-select: none;
}

.bwk-label-district {
	fill: var(--bwk-text-color);
	font-size: var(--bwk-font-size-map);
}

.bwk-label-regierungsbezirk {
	fill: var(--bwk-text-color);
	font-size: var(--bwk-font-size-map);
}

.bwk-hide-rb-labels .bwk-label-regierungsbezirk {
	display: none;
}

.bwk-label-legend {
	fill: var(--bwk-legend-color);
	font-size: var(--bwk-font-size-legend);
}

.bwk-label-legend-title {
	fill: var(--bwk-legend-color);
	font-size: var(--bwk-font-size-legend-title);
}

.bwk-hide-legend-title .bwk-label-legend-title {
	display: none;
}

.bwk-bodensee-fill {
	fill: var(--bwk-bodensee-color);
}

.bwk-label-water {
	fill: var(--bwk-bodensee-text-color);
	font-size: var(--bwk-font-size-map);
}

.bwk-tooltip {
	position: absolute;
	z-index: 10;
	max-width: var(--bwk-tooltip-max-width);
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--bwk-tooltip-bg);
	color: var(--bwk-tooltip-text);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
	font-size: var(--bwk-tooltip-font-size);
	line-height: 1.4;
}

.bwk-tooltip-body a {
	color: inherit;
	text-decoration: underline;
}

/* The tooltip body renders admin-entered rich text (wp_editor), which can
   carry its own inline font-size — the global tooltip font-size setting is
   meant to take precedence over that. */
.bwk-tooltip-body,
.bwk-tooltip-body * {
	font-size: var(--bwk-tooltip-font-size) !important;
}

.bwk-tooltip[hidden] {
	display: none;
}

.bwk-tooltip-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.bwk-tooltip-body p {
	margin: 0 0 6px;
}

.bwk-tooltip-body p:last-child {
	margin-bottom: 0;
}

/* [bwk_daten] */
.bwk-data-list {
	--bwk-data-cols-desktop: 2;
	--bwk-data-cols-tablet: 2;
	--bwk-data-cols-mobile: 1;
	--bwk-data-row-gap: 24px;
	--bwk-data-column-gap: 40px;
}

/*
 * Multi-column flow instead of CSS Grid: with Grid, every row is forced to
 * the height of its tallest cell, so one unusually long entry leaves a
 * blank gap next to it in the other column. Columns here fill and balance
 * independently, so items of very different lengths no longer waste space.
 */
.bwk-data-grid {
	column-count: var(--bwk-data-cols-desktop);
	column-gap: var(--bwk-data-column-gap);
}

@media (max-width: 1024px) {
	.bwk-data-grid {
		column-count: var(--bwk-data-cols-tablet);
	}
}

@media (max-width: 600px) {
	.bwk-data-grid {
		column-count: var(--bwk-data-cols-mobile);
	}
}

.bwk-data-item {
	break-inside: avoid;
	margin-bottom: var(--bwk-data-row-gap);
}

.bwk-data-name {
	margin: 0 0 4px;
	font-size: 16px;
}

.bwk-data-text {
	font-size: 14px;
	line-height: 1.5;
}

.bwk-data-text p {
	margin: 0 0 6px;
}

.bwk-data-empty {
	opacity: 0.7;
}