/* ── Digifom Job Board Extensions ── style.css ─────────────────────────── */

.djbe-board {
	--djbe-primary:      #1565c0;
	--djbe-primary-dark: #0d4c93;
	--djbe-text:         #1f2933;
	--djbe-muted:        #6b7280;
	--djbe-border:       #e2e5ea;
	--djbe-bg-soft:      #f6f8fb;
	--djbe-danger:       #b3261e;
	--djbe-radius:       14px;

	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	font-family: inherit;
	color: var(--djbe-text);
	box-sizing: border-box;
	overflow-x: hidden;
}

.djbe-board * {
	box-sizing: border-box;
}

/* Reset gegen Theme-Overrides (Elementor, Astra etc.) auf Buttons/Links */
.djbe-board button,
.djbe-board a.djbe-apply-btn {
	font-family: inherit;
	line-height: 1.3;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* ── Filter-Leiste ──────────────────────────────────────────────────────── */

.djbe-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: end;
	background: var(--djbe-bg-soft);
	border: 1px solid var(--djbe-border);
	border-radius: var(--djbe-radius);
	padding: 20px 22px;
	margin-bottom: 22px;
}

.djbe-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 180px;
	min-width: 150px;
}

.djbe-field-keyword {
	flex: 2 1 260px;
}

.djbe-field label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--djbe-muted);
	text-transform: uppercase;
}

/* Inputs & Selects: identische Höhe + weißer Hintergrund, gegen Theme-Overrides gesichert */
.djbe-board .djbe-input {
	border: 1px solid var(--djbe-border) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	font-size: 15px;
	line-height: 1.3;
	background-color: #fff !important;
	color: var(--djbe-text) !important;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

/* Eigener Pfeil, da appearance:none den nativen Browser-Pfeil entfernt */
.djbe-board select.djbe-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 15px !important;
	padding-right: 36px !important;
}

.djbe-board .djbe-input:focus {
	outline: none;
	border-color: var(--djbe-primary) !important;
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

/* Reset-Link: nur sichtbar wenn .is-visible via JS gesetzt */
.djbe-field-reset {
	flex: 0 0 auto;
	align-self: center;
	display: none;
}

.djbe-field-reset.is-visible {
	display: flex;
	justify-content: center;
}

.djbe-board .djbe-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	min-height: auto;
	padding: 4px 2px;
	font-size: 13.5px;
	color: var(--djbe-danger) !important;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.djbe-board .djbe-reset-btn:hover {
	text-decoration: underline;
}

.djbe-reset-icon {
	font-size: 12px;
	line-height: 1;
}

/* Focus-Ring für Tastaturnavigation */
.djbe-board .djbe-reset-btn:focus-visible,
.djbe-board .djbe-apply-btn:focus-visible,
.djbe-board .djbe-page-btn:focus-visible,
.djbe-board .djbe-view-btn:focus-visible {
	outline: 2px solid var(--djbe-primary);
	outline-offset: 2px;
}

/* ── Meta-Zeile (Zähler + Ansicht-Toggle) ───────────────────────────────── */

.djbe-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.djbe-count {
	font-size: 14px;
	color: var(--djbe-muted);
	margin: 0;
}

.djbe-view-toggle {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.djbe-board .djbe-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	border: 1px solid var(--djbe-border) !important;
	border-radius: 8px !important;
	min-height: 36px;
	min-width: 36px;
	padding: 6px;
	color: var(--djbe-muted) !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.djbe-board .djbe-view-btn svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

.djbe-board .djbe-view-btn:hover {
	border-color: var(--djbe-primary) !important;
	color: var(--djbe-primary) !important;
}

.djbe-board .djbe-view-btn.is-active {
	background: var(--djbe-primary) !important;
	border-color: var(--djbe-primary) !important;
	color: #fff !important;
}

/* ── Ergebnisbereich ────────────────────────────────────────────────────── */

.djbe-results {
	position: relative;
	min-height: 80px;
}

.djbe-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ── Kartenraster ───────────────────────────────────────────────────────── */

.djbe-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}

.djbe-card {
	background: #fff;
	border: 1px solid var(--djbe-border);
	border-radius: var(--djbe-radius);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.djbe-card:hover {
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
	transform: translateY(-2px);
}

.djbe-card-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Chiffre-Badge */
.djbe-board .djbe-chiffre {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	color: var(--djbe-muted) !important;
	background: var(--djbe-bg-soft) !important;
	border: none !important;
	border-radius: 999px;
	padding: 3px 10px;
}

.djbe-card-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.djbe-card-title a {
	color: var(--djbe-text);
	text-decoration: none;
}

.djbe-card-title a:hover {
	color: var(--djbe-primary);
}

/* Kategorie-Zeile */
.djbe-card-category {
	margin: 0;
	font-size: 13px;
	color: var(--djbe-muted);
	font-weight: 600;
}

/* Badge-Zeile: Art / Standort / Ort */
/* Kartenansicht: Badges fließen horizontal, wrappen wenn nötig */
.djbe-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: flex-start;
}

.djbe-board .djbe-badge {
	display: inline-block;
	font-size: 11.5px;
	border-radius: 999px !important;
	padding: 3px 10px;
	background: var(--djbe-bg-soft) !important;
	color: var(--djbe-text) !important;
	border: 1px solid var(--djbe-border) !important;
	white-space: nowrap;
}

/* "Art der Anstellung" bekommt einen leichten Blau-Tint */
.djbe-board .djbe-badge-type {
	color: var(--djbe-primary-dark) !important;
	border-color: rgba(21, 101, 192, 0.25) !important;
	background: rgba(21, 101, 192, 0.07) !important;
}

/* Auszug */
.djbe-card-excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--djbe-muted);
}

/* CTA – immer am unteren Rand der Karte */
.djbe-card-cta {
	flex: 0 0 auto;
	margin-top: auto;
}

/* "Zur Stelle" – pillenförmig als einzige echte Haupt-Aktion */
.djbe-board .djbe-apply-btn {
	display: inline-block;
	background: var(--djbe-primary) !important;
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px !important;
	border: none !important;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.djbe-board .djbe-apply-btn:hover {
	background: var(--djbe-primary-dark) !important;
	color: #fff !important;
}

/* ── Listenansicht ──────────────────────────────────────────────────────── */

.djbe-cards.is-list-view {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.djbe-cards.is-list-view .djbe-card {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 24px;
}

.djbe-cards.is-list-view .djbe-card-left {
	flex: 1 1 auto;
	min-width: 0;
}

/* Kategorie + Auszug werden in der Listenansicht ausgeblendet */
.djbe-cards.is-list-view .djbe-card-category,
.djbe-cards.is-list-view .djbe-card-excerpt {
	display: none;
}

.djbe-cards.is-list-view .djbe-card-title {
	font-size: 16.5px;
}

.djbe-cards.is-list-view .djbe-card-cta {
	margin-top: 0;
}

/* Badge-Ausrichtung in der Listenansicht: Flex + min-width auf dem
   Typ-Badge sorgt dafür, dass Einrichtung in allen Zeilen am gleichen
   horizontalen Punkt startet. Stadt folgt direkt nach der Einrichtung
   statt am Kartenrand zu hängen (das war das "1fr"-Problem vorher).
   Pixel-perfekte Ausrichtung aller 3 Spalten über unabhängige Karten
   wäre nur mit fixen Breiten möglich, was lange Einrichtungsnamen klippen
   würde – deshalb dieser Kompromiss. */
.djbe-cards.is-list-view .djbe-card-meta {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
}

.djbe-cards.is-list-view .djbe-badge-type {
	min-width: 120px;
	text-align: center;
	flex-shrink: 0;
}

/* ── Leer-Zustand ───────────────────────────────────────────────────────── */

.djbe-no-results {
	background: var(--djbe-bg-soft);
	border: 1px dashed var(--djbe-border);
	border-radius: var(--djbe-radius);
	padding: 30px;
	text-align: center;
	color: var(--djbe-muted);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.djbe-pagination-wrap {
	margin-top: 26px;
}

.djbe-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.djbe-board .djbe-page-btn {
	background: none !important;
	border: none !important;
	border-radius: 6px !important;
	min-width: 32px;
	min-height: 32px;
	padding: 4px 8px;
	font-size: 14px;
	cursor: pointer;
	color: var(--djbe-muted) !important;
	transition: background 0.15s, color 0.15s;
}

.djbe-board .djbe-page-btn:hover:not(:disabled) {
	background: var(--djbe-bg-soft) !important;
	color: var(--djbe-primary) !important;
}

.djbe-board .djbe-page-btn.is-current {
	background: var(--djbe-primary) !important;
	color: #fff !important;
	font-weight: 600;
}

.djbe-board .djbe-page-btn.djbe-page-arrow {
	font-size: 18px;
}

.djbe-board .djbe-page-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.djbe-page-ellipsis {
	color: var(--djbe-muted);
	padding: 0 2px;
	font-size: 14px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	/* Bugfix: flex-basis 180px wird in flex-direction:column als Min-Höhe
	   interpretiert → erzeugte riesige Lücken zwischen Feldern. */
	.djbe-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.djbe-field,
	.djbe-field-keyword {
		flex: 0 1 auto;
		min-width: 0;
	}

	.djbe-field-reset {
		align-self: center;
		margin-top: 4px;
	}

	.djbe-meta-row {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/* Listenansicht auf Mobile: Button auf volle Breite */
	.djbe-cards.is-list-view .djbe-card {
		flex-wrap: wrap;
	}

	.djbe-cards.is-list-view .djbe-card-cta {
		width: 100%;
	}

	.djbe-cards.is-list-view .djbe-apply-btn {
		display: block;
		text-align: center;
	}

	/* Badges auf Mobile (alle Ansichten): untereinander statt horizontal
	   abgeschnitten, min-width zurücksetzen damit keine zu breiten Pills */
	.djbe-card-meta,
	.djbe-cards.is-list-view .djbe-card-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.djbe-cards.is-list-view .djbe-badge-type {
		min-width: 0;
		text-align: left;
	}
}

/* ============================================================
   Single-Job-Seite: Pill-Zeile für Stellenart, Standort, Stadt
   ============================================================ */
.djbe-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 18px;
}

/* Auf der Single-Seite existiert kein .djbe-board-Wrapper,
   daher Badges hier explizit ohne Board-Parent-Selektor. */
.djbe-single-meta .djbe-badge {
	display: inline-block;
	font-size: 12px;
	border-radius: 999px;
	padding: 4px 12px;
	background: #f6f8fb;
	color: #1f2933;
	border: 1px solid #e2e5ea;
	white-space: nowrap;
	font-weight: 500;
}

.djbe-single-meta .djbe-badge-type {
	color: #0d4c93;
	border-color: rgba(21, 101, 192, 0.25);
	background: rgba(21, 101, 192, 0.07);
}