.form_row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.form_row_filter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 1024px) {
	.form_row_filter {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.form_row_filter {
		grid-template-columns: repeat(2, 1fr);
	}
}

#supporter_form, .supporter-filter-form {
	font-size: 16px;
}

#supporter_form input, #supporter_form select, #supporter_form textarea, .supporter-filter-form input, .supporter-filter-form select, .supporter-filter-form textarea {
	padding: 10px;
	border-radius: 0;
	border: 2px solid gray;
}

.form_datenschutz {
	margin-bottom: 25px;
}

#supporter_form #drop-area {
	border: 2px dashed grey;
	padding: 25px;
	text-align: center;
	margin-bottom: 25px;
}

.preview-wrapper {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 auto;
}

#supporter_form #image-preview {
	width: 100%;
	height: auto; 
}

.statement-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 25px;
}

.statement-box input[type="radio"] {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}

.supporter-form-submit, .filter-form-submit, .back-to-overview-btn {
	background: var(--st-primary-color) !important;
	color: #ffffff;
	border: none !important;
	border-radius: 30px !important;
	padding-top: 1rem !important;
	padding-right: 2.25rem !important;
	padding-bottom: 1rem !important;
	padding-left: 2.25rem !important;
	font-size: var(--wp--preset--font-size--medium);
}

.supporter-form-submit:hover, .filter-form-submit:hover, .back-to-overview-btn:hover {
	background: gray !important;
	cursor: pointer;
}

.supporter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.supporter-item {
	background: #f9f9f9;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}
.supporter-image {
	width: 100px;
	height: 100px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	margin: 0 auto 10px;
}

.supporter-item h3 {
	font-size: 16px;
}

.supporter-statement {
	font-size: 14px;
}

.supporter-job {
	font-size: 14px;
}
@media (max-width: 1024px) {
	.supporter-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.supporter-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.form_row,  .statement-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.supporter-pagination {
	text-align: center;
}

.supporter-pagination .current {
	color: var(--st-primary-color);
}


/*		SHARE		*/
.supporter-share {
	text-align: center;
}

.supporter-share p {
	font-size: 16px;
	margin-bottom: 0;
}


.supporter-share-link {
	margin-right: 5px !important;
} 
	
	
	
.progress-bar-container {
	width: 100%;
	height: 20px;
	background-color: #e0e0e0;
	//border-radius: 10px;
	overflow: hidden;
	//box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar {
	height: 100%;
	background-color: var(--st-primary-color);
	width: 0%; /* Start bei 0% */
	//border-radius: 10px;
	transition: width 1.5s ease-in-out; /* Sanfte Animation */
}

/*		SINGLE PAGE		*/
.supporter-single-container {
	margin-top: 50px !important;
	margin-bottom: 50px !important;
	max-width: 400px;
	margin: 0 auto;
	font-size: 18px;
}

.supporter-single-container .supporter-item .portrait {
	border-radius: 50%;
	max-width: 250px;
}

.supporter-single-container .supporter-item h1 {
	font-size: 24px;
}

.supporter-single-container .supporter-item .supporter-job  {
	font-size: 16px;
}

.supporter-single-container .supporter-item .supporter-statement  {
	font-size: 18px;
}

.supporter-single-container .supporter-item .logo  {
	margin-top: 25px;
	max-width: 250px;
}