/**
 * Westwinkel Jobbörse – Styles
 *
 * Die Farb-Variable --ww-accent kann an die bestehende westwinkel-
 * Markenfarbe angepasst werden. Alle anderen Werte sind bewusst
 * zurückhaltend gehalten, damit sich der Baustein in das Occasio-Theme
 * einfügt statt eine eigene Optik aufzudrängen.
 */

.ww-jobboerse,
.ww-jobboerse *,
.ww-jobboerse *::before,
.ww-jobboerse *::after {
	box-sizing: border-box;
}

.ww-jobboerse {
	--ww-accent: #042B5F;
	--ww-accent-dark: #021c40;
	--ww-border: #e1ddd3;
	--ww-bg-card: #ffffff;
	--ww-bg-muted: #f7f5f0;
	--ww-text: #2a2a28;
	--ww-text-muted: #6b6a64;

	color: var(--ww-text);
	margin: 1.5rem 0;
	width: 100%;
	max-width: 100%;
}

/* Suchformular: Flexbox mit Umbruch statt starrem Grid, damit das Layout
   auch bei unbekannter/eingeschränkter Containerbreite (Theme-Vorgaben)
   nicht nach außen "ausbricht", sondern Felder bei Bedarf umbricht. */
.ww-jobboerse-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--ww-bg-muted);
	border: 1px solid var(--ww-border);
	border-radius: 10px;
	width: 100%;
}

.ww-jobboerse-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 180px;
	min-width: 160px;
}

.ww-jobboerse-reset {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.ww-jobboerse-form {
		flex-direction: column;
		align-items: stretch;
	}

	.ww-jobboerse-field,
	.ww-jobboerse-reset {
		flex: 1 1 auto;
		width: 100%;
	}
}

.ww-jobboerse-field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ww-text-muted);
	letter-spacing: 0.01em;
}

.ww-jobboerse-field input[type="text"],
.ww-jobboerse-field select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ww-border);
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
	color: var(--ww-text);
}

.ww-jobboerse-field select {
	cursor: pointer;
}

.ww-jobboerse-field input[type="text"]:focus-visible,
.ww-jobboerse-field select:focus-visible {
	outline: 2px solid var(--ww-accent);
	outline-offset: 1px;
	border-color: var(--ww-accent);
}

.ww-jobboerse-reset {
	height: 2.6rem;
	padding: 0 1rem;
	border: 1px solid var(--ww-accent);
	border-radius: 6px;
	background: transparent;
	color: var(--ww-accent-dark);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ww-jobboerse-reset:hover,
.ww-jobboerse-reset:focus-visible {
	background: var(--ww-accent);
	color: #fff;
	outline: none;
}

/* Status / Treffer-Anzeige */
.ww-jobboerse-status {
	margin: 1rem 0 0.5rem;
	font-size: 0.9rem;
	color: var(--ww-text-muted);
}

/* Ergebnis-Grid */
.ww-jobboerse-results {
	margin-top: 0.5rem;
}

.ww-jobboerse-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

.ww-jobboerse-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--ww-bg-card);
	border: 1px solid var(--ww-border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ww-jobboerse-card-title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--ww-text);
}

.ww-jobboerse-card-meta {
	margin: 0;
	font-size: 0.92rem;
	color: var(--ww-text-muted);
}

.ww-jobboerse-card-label {
	display: inline-block;
	min-width: 4.5rem;
	font-weight: 600;
	color: var(--ww-text);
}

.ww-jobboerse-card-firmenbild {
	margin: 0.25rem 0;
}

.ww-jobboerse-card-firmenbild img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: center;
	border-radius: 6px;
	border: 1px solid var(--ww-border);
	background: #fff;
}

.ww-jobboerse-card-excerpt {
	margin: 0.25rem 0 0;
	font-size: 0.94rem;
	color: var(--ww-text-muted);
	line-height: 1.5;
}

.ww-jobboerse-card-actions {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding-top: 0.75rem;
}

.ww-jobboerse-btn {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.ww-jobboerse-btn:hover,
.ww-jobboerse-btn:focus-visible {
	opacity: 0.85;
	outline: none;
}

.ww-jobboerse-btn-primary {
	background: var(--ww-accent);
	color: #fff;
}

.ww-jobboerse-btn-secondary {
	background: var(--ww-bg-muted);
	color: var(--ww-text);
	border: 1px solid var(--ww-border);
}

.ww-jobboerse-empty {
	padding: 1.5rem;
	background: var(--ww-bg-muted);
	border: 1px dashed var(--ww-border);
	border-radius: 10px;
	color: var(--ww-text-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.ww-jobboerse-reset,
	.ww-jobboerse-btn {
		transition: none;
	}
}

/* Blendet die allgemeine, gemeinde-/branchen-übergreifende Navigation
   ("Alle Branchen"-Menü aus dem Seiten-Template) NUR auf der Jobbörse-
   Seite aus. Diese Datei wird ohnehin nur auf der Jobbörse-Seite
   geladen, daher bleibt der Block auf allen anderen Seiten unverändert
   sichtbar. */
.nav-branchen {
	display: none !important;
}