/**
 * CB Search -- Responsive Styles
 * Alle Einheiten in em (ausser border-width und max-width Container).
 * CSS Custom Properties werden vom Admin Design-Editor ueberschrieben.
 */

:root {
	/* Farben -- Cottbus Corporate Design */
	--cb-search-primary: #003F57;
	--cb-search-primary-hover: #002D3F;
	--cb-search-secondary: #389EC3;
	--cb-search-accent: #E40033;
	--cb-search-accent-hover: #C5002D;
	--cb-search-bg: #EEEEEE;
	--cb-search-border: #ccc;
	--cb-search-text: #000;
	--cb-search-text-light: #555;
	--cb-search-highlight: #FDEBD0;

	/* Suchfeld */
	--cb-search-input-bg: #fff;
	--cb-search-input-border-color: #ccc;
	--cb-search-input-border-width: 2px;
	--cb-search-input-radius: 0.25em;
	--cb-search-input-padding: 0.75em;
	--cb-search-input-font-size: 1em;
	--cb-search-btn-bg: #E40033;
	--cb-search-btn-bg-hover: #C5002D;
	--cb-search-btn-color: #fff;
	--cb-search-btn-radius: 0.25em;

	/* Karten */
	--cb-search-card-bg: #fff;
	--cb-search-card-border-color: #eee;
	--cb-search-card-border-width: 1px;
	--cb-search-card-radius: 0;
	--cb-search-card-padding: 1em;
	--cb-search-card-gap: 1em;
	--cb-search-card-title-color: #000;
	--cb-search-card-title-size: 1.125em;
	--cb-search-card-excerpt-color: #555;
	--cb-search-card-excerpt-size: 0.875em;

	/* Badge */
	--cb-search-badge-bg: #003F57;
	--cb-search-badge-color: #fff;
	--cb-search-badge-radius: 0.2em;
	--cb-search-badge-padding: 0.15em;
	--cb-search-badge-font-size: 0.7em;

	/* Filter-Sidebar */
	--cb-search-filter-bg: transparent;
	--cb-search-filter-border-color: transparent;
	--cb-search-filter-border-width: 0px;
	--cb-search-filter-radius: 0;
	--cb-search-filter-width: 16em;
	--cb-search-filter-legend-color: #555;
	--cb-search-filter-legend-size: 0.8em;

	/* Buergerportal */
	--cb-search-og-bg: #e8f3f7;
	--cb-search-og-border-color: #389EC3;
	--cb-search-og-border-width: 2px;
	--cb-search-og-radius: 0.25em;
	--cb-search-og-title-color: #003F57;
	--cb-search-og-title-size: 0.9375em;
	--cb-search-og-card-bg: #fff;
	--cb-search-og-card-border-color: #389EC3;

	/* Layout */
	--cb-search-radius: 0.25em;
	--cb-search-gap: 1.5em;
	--cb-search-sidebar-width: 16em;
	--cb-search-font: inherit;
	--cb-search-more-border-color: #E40033;
	--cb-search-more-hover-bg: #E40033;
}

/* ================================================================== */
/* Container                                                          */
/* ================================================================== */

.cb-search {
	max-width: 1200px;
	margin: 0 auto;
	font-family: var(--cb-search-font);
	color: var(--cb-search-text);
}

/* ================================================================== */
/* Suchformular                                                       */
/* ================================================================== */

.cb-search__form {
	position: relative;
	margin-bottom: var(--cb-search-gap);
}

.cb-search__input-wrap {
	display: flex;
	gap: 0.5em;
}

.cb-search__input {
	flex: 1;
	padding: var(--cb-search-input-padding) calc(var(--cb-search-input-padding) * 1.33);
	font-size: var(--cb-search-input-font-size);
	background: var(--cb-search-input-bg);
	border: var(--cb-search-input-border-width) solid var(--cb-search-input-border-color);
	border-radius: var(--cb-search-input-radius);
	outline: none;
	transition: border-color 0.2s;
}

.cb-search__input:focus {
	border-color: var(--cb-search-primary);
}

.cb-search__btn {
	padding: var(--cb-search-input-padding) calc(var(--cb-search-input-padding) * 2);
	font-size: var(--cb-search-input-font-size);
	font-weight: 600;
	color: var(--cb-search-btn-color);
	background: var(--cb-search-btn-bg);
	border: none;
	border-radius: var(--cb-search-btn-radius);
	cursor: pointer;
	transition: background 0.2s;
}

.cb-search__btn:hover {
	background: var(--cb-search-btn-bg-hover);
}

/* ================================================================== */
/* Autocomplete                                                       */
/* ================================================================== */

.cb-search__suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--cb-search-border);
	border-top: none;
	border-radius: 0 0 var(--cb-search-radius) var(--cb-search-radius);
	box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
	z-index: 100;
	max-height: 20em;
	overflow-y: auto;
}

.cb-search__suggest-item {
	padding: 0.6em 1em;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.cb-search__suggest-item:hover {
	background: var(--cb-search-bg);
}

.cb-search__suggest-type {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cb-search-primary);
	margin-right: 0.4em;
}

/* ================================================================== */
/* Treffer-Header                                                     */
/* ================================================================== */

.cb-search__header {
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--cb-search-border);
}

.cb-search__count {
	font-size: 0.875em;
	color: var(--cb-search-text-light);
}

/* ================================================================== */
/* Layout: Sidebar + Ergebnisse                                       */
/* ================================================================== */

.cb-search__main {
	display: flex;
	gap: var(--cb-search-gap);
	align-items: flex-start;
}

.cb-search__filters {
	flex: 0 0 var(--cb-search-filter-width);
	min-width: var(--cb-search-filter-width);
	background: var(--cb-search-filter-bg);
	border: var(--cb-search-filter-border-width) solid var(--cb-search-filter-border-color);
	border-radius: var(--cb-search-filter-radius);
	position: sticky;
	top: 2em;
	align-self: flex-start;
}

.cb-search__filters-toggle {
	display: none;
	width: 100%;
	padding: 0.6em;
	font-size: 0.875em;
	font-weight: 600;
	background: var(--cb-search-bg);
	border: 1px solid var(--cb-search-border);
	border-radius: var(--cb-search-radius);
	cursor: pointer;
	margin-bottom: 0.75em;
}

.cb-search__filter-group {
	border: none;
	padding: 0;
	margin: 0 0 1.25em 0;
}

.cb-search__filter-group legend {
	font-weight: 600;
	font-size: var(--cb-search-filter-legend-size);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cb-search-filter-legend-color);
	margin-bottom: 0.5em;
}

.cb-search__filter-check {
	display: block;
	padding: 0.25em 0;
	font-size: 0.875em;
	cursor: pointer;
}

.cb-search__filter-check input {
	margin-right: 0.4em;
}

.cb-search__filter-count {
	color: var(--cb-search-text-light);
	font-size: 0.75em;
}

.cb-search__select {
	width: 100%;
	padding: 0.4em 0.5em;
	font-size: 0.875em;
	border: 1px solid var(--cb-search-border);
	border-radius: var(--cb-search-radius);
}

.cb-search__date-range {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.cb-search__date-range span {
	font-size: 0.75em;
	color: var(--cb-search-text-light);
}

.cb-search__date {
	width: 100%;
	padding: 0.4em 0.5em;
	font-size: 0.8em;
	border: 1px solid var(--cb-search-border);
	border-radius: var(--cb-search-radius);
	box-sizing: border-box;
}

/* ================================================================== */
/* Ergebnisse                                                         */
/* ================================================================== */

.cb-search__results {
	flex: 1;
	min-width: 0;
}

.cb-search__empty {
	padding: 2.5em 1.25em;
	text-align: center;
	color: var(--cb-search-text-light);
	font-size: 1em;
}

.cb-search__item {
	background: var(--cb-search-card-bg);
	border: var(--cb-search-card-border-width) solid var(--cb-search-card-border-color);
	border-radius: var(--cb-search-card-radius);
	padding: var(--cb-search-card-padding);
	margin-bottom: var(--cb-search-card-gap);
}

.cb-search__item-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.cb-search__item-link:hover .cb-search__item-title {
	color: var(--cb-search-primary);
}

.cb-search__item-type {
	display: inline-block;
	font-size: var(--cb-search-badge-font-size);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cb-search-badge-color);
	background: var(--cb-search-badge-bg);
	padding: var(--cb-search-badge-padding) calc(var(--cb-search-badge-padding) * 3.3);
	border-radius: var(--cb-search-badge-radius);
	margin-bottom: 0.25em;
}

.cb-search__item-title {
	font-size: var(--cb-search-card-title-size);
	font-weight: 600;
	color: var(--cb-search-card-title-color);
	margin: 0.25em 0;
	line-height: 1.3;
}

.cb-search__ref {
	font-weight: 400;
	color: var(--cb-search-primary);
	font-size: 0.875em;
}

.cb-search__item-date {
	font-size: 0.8em;
	color: var(--cb-search-text-light);
}

.cb-search__item-excerpt {
	font-size: var(--cb-search-card-excerpt-size);
	color: var(--cb-search-card-excerpt-color);
	line-height: 1.5;
	margin: 0.4em 0 0;
}

.cb-search__item-excerpt mark {
	background: var(--cb-search-highlight);
	padding: 0.05em 0.15em;
	border-radius: 0.15em;
}

/* ================================================================== */
/* Mehr laden                                                         */
/* ================================================================== */

.cb-search__more {
	display: block;
	width: 100%;
	padding: 0.75em;
	font-size: 0.9375em;
	font-weight: 600;
	color: var(--cb-search-more-border-color);
	background: #fff;
	border: 2px solid var(--cb-search-more-border-color);
	border-radius: var(--cb-search-radius);
	cursor: pointer;
	transition: all 0.2s;
	margin-top: 1em;
}

.cb-search__more:hover {
	background: var(--cb-search-more-hover-bg);
	border-color: var(--cb-search-more-hover-bg);
	color: #fff;
}

/* ================================================================== */
/* Loading                                                            */
/* ================================================================== */

.cb-search__loading {
	text-align: center;
	padding: 1.25em;
	color: var(--cb-search-text-light);
}

/* ================================================================== */
/* OptiGov Bürgerportal                                               */
/* ================================================================== */

.cb-search__optigov {
	background: var(--cb-search-og-bg);
	border: var(--cb-search-og-border-width) solid var(--cb-search-og-border-color);
	border-radius: var(--cb-search-og-radius);
	padding: 1em 1.25em;
	margin-bottom: var(--cb-search-gap);
}

.cb-search__optigov-header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.75em;
	font-size: var(--cb-search-og-title-size);
	color: var(--cb-search-og-title-color);
}

.cb-search__optigov-icon {
	font-size: 1.25em;
}

.cb-search__optigov-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
	gap: 0.6em;
	margin-bottom: 0.75em;
}

.cb-search__optigov-item {
	display: block;
	padding: 0.6em 0.875em;
	background: var(--cb-search-og-card-bg);
	border: 1px solid var(--cb-search-og-card-border-color);
	border-radius: var(--cb-search-og-radius);
	text-decoration: none;
	color: var(--cb-search-text);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.cb-search__optigov-item:hover {
	border-color: var(--cb-search-primary);
	box-shadow: 0 0.125em 0.5em rgba(0, 115, 170, 0.12);
}

.cb-search__optigov-title {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--cb-search-primary);
	margin-bottom: 0.25em;
}

.cb-search__optigov-teaser {
	display: block;
	font-size: 0.75em;
	color: var(--cb-search-text-light);
	line-height: 1.4;
}

.cb-search__optigov-link {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--cb-search-primary);
	text-decoration: none;
}

.cb-search__optigov-link:hover {
	text-decoration: underline;
}

/* ================================================================== */
/* Mobile (< 768px)                                                   */
/* ================================================================== */

@media (max-width: 767px) {
	.cb-search__main {
		flex-direction: column;
	}

	.cb-search__filters {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.cb-search__filters-toggle {
		display: block;
	}

	.cb-search__filters-body {
		display: none;
		padding: 0.75em 0;
	}

	.cb-search__filters-body--open {
		display: block;
	}

	.cb-search__input-wrap {
		flex-direction: column;
	}

	.cb-search__btn {
		width: 100%;
	}

	.cb-search__item-title {
		font-size: 1em;
	}

	.cb-search__optigov-list {
		grid-template-columns: 1fr;
	}
}

/* ================================================================== */
/* [cb_suchfeld] -- Eigenständiges Suchfeld                           */
/* ================================================================== */

.cb-suchfeld {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	min-width: 0;
	box-sizing: border-box;
	font-family: var(--cb-search-font, inherit);
}

.cb-suchfeld,
.cb-suchfeld__wrap,
.cb-suchfeld__input {
	box-sizing: border-box;
}

/* Elementor: Eltern-Container soll volle Breite geben wenn cb-suchfeld drin ist */
.elementor-widget:has(.cb-suchfeld) {
	width: 100%;
	flex: 1 1 100%;
}

.cb-suchfeld__wrap {
	display: flex;
	gap: 0.5em;
}

.cb-suchfeld__input {
	flex: 1;
	border: 2px solid var(--cb-search-border);
	border-radius: var(--cb-search-radius);
	outline: none;
	transition: border-color 0.2s;
}

.cb-suchfeld__input:focus {
	border-color: var(--cb-search-primary);
}

.cb-suchfeld__btn {
	font-weight: 600;
	color: #fff;
	background: var(--cb-search-accent);
	border: none;
	border-radius: var(--cb-search-radius);
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
}

.cb-suchfeld__btn:hover {
	background: var(--cb-search-accent-hover);
}

.cb-suchfeld--small .cb-suchfeld__input { padding: 0.5em 0.75em; font-size: 0.875em; }
.cb-suchfeld--small .cb-suchfeld__btn   { padding: 0.5em 1em;    font-size: 0.875em; }

.cb-suchfeld--medium .cb-suchfeld__input { padding: 0.75em 1em;   font-size: 1em; }
.cb-suchfeld--medium .cb-suchfeld__btn   { padding: 0.75em 1.5em; font-size: 1em; }

.cb-suchfeld--large .cb-suchfeld__input { padding: 1em 1.25em;  font-size: 1.125em; }
.cb-suchfeld--large .cb-suchfeld__btn   { padding: 1em 2em;     font-size: 1.125em; }

@media (max-width: 767px) {
	.cb-suchfeld__wrap {
		flex-direction: column;
	}
	.cb-suchfeld__btn {
		width: 100%;
	}
}