/* Spenden-Teaser (RaiseNow) - Masse aus Figma:
   hellblaue Flaeche (#CCECF9) ueber die ganze Inhaltsbreite, darin die
   zentrierte Formular-Box (max. 800px) mit 48px Innenabstand;
   Reiter 14px Versalien mit
   1px Linie und 4px Balken unter dem aktiven; Kacheln weiss 72px hoch,
   aktiv #212529; Button #009FE3 46px volle Breite; darunter
   "Daten sicher" + ZEWO-Siegel. Gewichte 500, kein Letter-Spacing. */

#content section.mantik-donate,
.mantik-donate { padding: 80px 0; margin: 0; }

/* Farbflaeche so breit wie der Inhalt (Container), nicht nur die Box */
.mantik-donate > .container {
  background: #ccecf9; border-radius: 4px;
  padding-top: 48px; padding-bottom: 48px;
}

.mantik-donate__box { max-width: 800px; margin: 0 auto; }

.mantik-donate__form {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0; background: transparent; margin: 0;
}

/* Reiter */
.mantik-donate__tabs { display: flex; border-bottom: 1px solid #8a9299; margin-bottom: 16px; }
.mantik-donate .mantik-donate__tab {
  flex: 1 1 0; position: relative; padding: 0 .5rem 16px; margin: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  font-size: .875rem; line-height: 1.5; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0; color: #5b646b;
}
.mantik-donate .mantik-donate__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
  background: #212529; transform: scaleX(0); transition: transform .2s ease;
}
.mantik-donate .mantik-donate__tab.is-active { color: #212529; }
.mantik-donate .mantik-donate__tab.is-active::after { transform: scaleX(1); }
.mantik-donate .mantik-donate__tab:hover { color: #212529; }
.mantik-donate .mantik-donate__tab:focus-visible { outline: 2px solid #009fe3; outline-offset: 2px; }

/* Nur ein Reiter: dann ist es eine Ueberschrift - blau, groesser, ohne
   Linien und ohne Grossbuchstaben. Mit mehreren Reitern greift wieder
   die Darstellung darueber. */
.mantik-donate .mantik-donate__tabs--single { border-bottom: 0; margin-bottom: 24px; }
.mantik-donate .mantik-donate__tabs--single .mantik-donate__tab,
.mantik-donate .mantik-donate__tabs--single .mantik-donate__tab.is-active,
.mantik-donate .mantik-donate__tabs--single .mantik-donate__tab:hover {
  padding-bottom: 0; font-size: 1.2rem; text-transform: none; color: #009fe3; cursor: default;
}
.mantik-donate .mantik-donate__tabs--single .mantik-donate__tab::after,
.mantik-donate .mantik-donate__tabs--single .mantik-donate__tab.is-active::after { display: none; }

/* Kacheln */
.mantik-donate__amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mantik-donate__amounts[hidden] { display: none; }

.mantik-donate .mantik-donate__tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 72px; margin: 0; padding: 0 .5rem; background: #fff; color: #212529;
  border-radius: 0; cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.mantik-donate .mantik-donate__tile:hover { background: #f4fbfe; }
.mantik-donate__radio { position: absolute; opacity: 0; pointer-events: none; }
.mantik-donate .mantik-donate__tile:has(.mantik-donate__radio:checked),
.mantik-donate .mantik-donate__tile.is-checked { background: #212529; color: #fff; }
.mantik-donate .mantik-donate__tile:has(.mantik-donate__radio:focus-visible) { outline: 2px solid #009fe3; outline-offset: 2px; }

.mantik-donate__value { font-size: 1.5rem; line-height: 1.2; font-weight: 500; }
.mantik-donate__currency { font-size: .875rem; line-height: 1.5; }

.mantik-donate .mantik-donate__custom {
  width: 100%; max-width: 6rem; padding: 0; margin: 0; border: 0; background: transparent;
  text-align: center; color: inherit; font: inherit;
  font-size: 1.5rem; line-height: 1.2; font-weight: 500;
  -moz-appearance: textfield;
}
.mantik-donate__custom::-webkit-outer-spin-button,
.mantik-donate__custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mantik-donate .mantik-donate__custom::placeholder { color: inherit; opacity: 1; }
.mantik-donate .mantik-donate__custom:focus { outline: none; }

/* Button */
.mantik-donate .mantik-donate__submit {
  display: block; width: 100%; height: 46px; margin: 24px 0 0; padding: 0 1rem;
  border: 0; border-radius: 2rem; background: #009fe3; color: #fff; cursor: pointer;
  font-size: 1rem; line-height: 1.5; font-weight: 500;
  transition: background-color .2s ease;
}
.mantik-donate .mantik-donate__submit:hover,
.mantik-donate .mantik-donate__submit:focus { background: #0089c4; color: #fff; }

/* Vertrauen */
.mantik-donate__trust {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 32px;
}
.mantik-donate__secure {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .875rem; line-height: 1.5; color: #5b646b;
}
.mantik-donate__zewo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .875rem; line-height: 1.25; font-weight: 500; color: #212529;
}
.mantik-donate__zewo img { display: block; width: 40px; height: auto; }

@media (max-width: 991px) {
  #content section.mantik-donate, .mantik-donate { padding: 48px 0; }
  .mantik-donate > .container { padding-top: 32px; padding-bottom: 32px; }
  .mantik-donate__amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}