:root {
	--spenden-section-color: #333;
	--spenden-section-h1-color: #2a2a72;
}

[data-theme="dark"] {
	--spenden-section-color: #e7e7dc;
	--spenden-section-h1-color: linear-gradient(140deg, #752cc5, #693dae, #55289d, #6832a3);
}

.spenden-section {
  padding: 2rem;
  border-radius: 1rem;
  margin-top: 5rem;
  margin-top: 0;
  font-family: system-ui, sans-serif;
  color: var(--spenden-section-color);
}

.spenden-section h1 {
	font-size: calc(2rem + var(--font-size-large));
	display: inline-flex;
	margin-bottom: 0;
	margin-top: 0;
	background: var(--spenden-section-h1-color);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spenden-section p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.spenden-section a {
  color: #3295ff;
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.spenden-section a:hover {
  color: #1c6cc1;
  text-decoration: none;
}

.spenden-buttons {
	padding-bottom: 2rem;
}

.spenden-buttons form {
	margin-top: 2rem;
	text-align: center;
	display: flex;
    justify-content: center;
}

.spenden-buttons button {
  background-color: #0070ba;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  color: white;
  border: none;
  position: relative;
  border-radius: 0.5rem;
  height: 3rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.spenden-buttons button:hover {
  background-color: #005c99;
}

.spenden-buttons button span {
	display: inline-flex;
	font-size: calc(1.1rem + var(--font-size-larger));
	padding: 0.75rem 1.5rem;
}

.spenden-buttons button svg {
	height: 150%; 
}