/* ===========================
   BUTTON GRUNDSTIL
=========================== */

.button-base {
	border: none;
	border-radius: 10px;
	padding: 0px;
	color: white;
	font-size: 1em;
	line-height: 2.5;
	width: 8em;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;

	display: flex;
	justify-content: center; /* Text horizontal zentriert */
	align-items: center; /* Text vertikal zentriert */

	box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.3),
		inset -2px -2px 3px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}

.button-base:disabled {
	background: #ccc;
	color: #666;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
}

.button-base:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

/* ===========================
   FARBVARIANTEN
=========================== */

.button-green {
	background: radial-gradient(
		circle at center,
		rgb(0, 168, 70) 40%,
		rgb(80, 139, 105)
	);
}

.button-red {
	background: radial-gradient(circle at center, rgb(200, 0, 0), rgb(140, 0, 0));
}

.button-blue {
	background: radial-gradient(
		circle at center,
		rgb(0, 80, 255),
		rgb(30, 30, 200)
	);
}
.button-gray {
	background: radial-gradient(
		circle at center,
		rgb(160, 160, 160),
		rgb(100, 100, 100)
	);
}

.button-grey {
	background: radial-gradient(
		circle at center,
		rgb(160, 160, 160),
		rgb(100, 100, 100)
	);
}

.button-yellow {
	background: radial-gradient(
		circle at center,
		rgb(254, 254, 2),
		rgb(158, 158, 1)
	);
	color: #0e0e0e;
}

/* ===========================
   AUSRICHTUNG
=========================== */

/* Button nach rechts */
.button-align-right {
	display: flex;
	justify-content: flex-end;
}

/* Button nach links */
.button-align-left {
	display: flex;
	justify-content: flex-start;
}

/* Button zentriert */
.button-align-center {
	display: flex;
	justify-content: center;
}

/* Optional: Abstand zu Seitenrändern */
.button-align-right,
.button-align-left,
.button-align-center {
	padding: 10px;
}

/* ===========================
   RESPONSIVE VERHALTEN
=========================== */

/* Auf kleinen Bildschirmen: alle Buttons zentrieren */
@media (max-width: 600px) {
	.button-align-left,
	.button-align-right {
		justify-content: center !important;
	}
}