/* ==========================================================================
   merz-stellen — Offene Stellen auf /karriere/ (Verhalten: merz-stellen.js)

   Container  merz-stellen            Wurzel der Sektion
     Widgets mit Attribut data-filter|<bereich>   Filterknöpfe („alle" = alle)
     Heading    merz-stellen__anzahl  „N von M Stellen"
     Container  merz-stelle           eine Stelle, Attribut data-bereich|<bereich>
       Container  merz-stelle__kopf     Klickfläche (Titel, Meta, Pfeil)
         Icon      merz-stelle__pfeil     Pfeil, dreht beim Öffnen
       Container  merz-stelle__inhalt   Aufgaben/Profil + Knöpfe — zugeklappt

   Ohne JavaScript (und im Editor) sind alle Stellen offen.
   ========================================================================== */

.merz-stellen.is-bereit .merz-stelle .merz-stelle__inhalt { display: none; }
.merz-stellen.is-bereit .merz-stelle.is-offen .merz-stelle__inhalt { display: flex; }
.merz-stellen .merz-stelle[hidden] { display: none !important; }

.merz-stellen.is-bereit .merz-stelle__kopf { cursor: pointer; }
.merz-stellen .merz-stelle__kopf:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: -3px; border-radius: 5px; }

.merz-stellen .merz-stelle__pfeil .elementor-icon { transform: rotate(90deg); transition: transform .15s ease; }
.merz-stellen .merz-stelle.is-offen .merz-stelle__pfeil .elementor-icon { transform: rotate(-90deg); }
.merz-stellen:not(.is-bereit) .merz-stelle__pfeil .elementor-icon { transform: rotate(-90deg); }

/* Zeile als Link auf die Stellenanzeige (seit 24.09.2026 statt Aufklapper):
   Rückmeldung nur über Farbe und Pfeil — keine Unterstreichung. */
.merz-stellen .merz-stelle--link { text-decoration: none; transition: box-shadow .15s ease; }
.merz-stellen .merz-stelle--link:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.merz-stellen .merz-stelle--link .merz-stelle__pfeil .elementor-icon { transform: none; transition: transform .15s ease; }
.merz-stellen .merz-stelle--link:hover .merz-stelle__pfeil .elementor-icon,
.merz-stellen .merz-stelle--link:focus-visible .merz-stelle__pfeil .elementor-icon { transform: translateX(4px); }
.merz-stellen .merz-stelle--link:hover .merz-stelle__titel .elementor-heading-title { color: var(--merz-rot); }
.merz-stellen .merz-stelle--link:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: 3px; }

/* Aktiver Filterknopf: gefüllt rot wie Primär */
.merz-stellen .merz-btn.is-active .elementor-button,
.merz-stellen .merz-btn.is-active .elementor-button:hover,
.merz-stellen .merz-btn.is-active .elementor-button:focus {
	background-color: var(--merz-rot);
	color: var(--merz-weiss);
	box-shadow: none;
}
.merz-stellen [data-filter] .elementor-button { cursor: pointer; }

/* Bewerbungs-Popup: Datei-Knopf als MERZ-Outline-Button.
   Steht hier und nicht im Custom CSS des Popups: Elementor ersetzt dort jedes
   „selector" — auch das in „::file-selector-button" (24.09.2026). */
.merz-bewerbung input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 16px;
	border: 0;
	border-radius: 5px;
	background: #FFFFFF;
	color: var(--merz-rot);
	box-shadow: inset 0 0 0 1px var(--merz-rot);
	font: 600 16px/1 var(--font-sans);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.merz-bewerbung input[type="file"]::file-selector-button:hover {
	background: var(--merz-rot);
	color: #FFFFFF;
}

/* Stellenanzeige (Unterseite): Kontaktbox mitlaufen lassen — 30 px unter der
   mitlaufenden Menükarte (Unterkante 102 px). Angemeldet schiebt die Adminleiste
   (32 px) das Menü mit nach unten, die Box muss mit. */
@media (min-width: 1025px) {
	.merz-stelle-box { position: sticky; top: 132px; }
	.admin-bar .merz-stelle-box { top: 164px; }
}