/*
 * Der Schritt "Bezahlung".
 * Alle Farben, Schriftgroessen und Radien kommen aus dem Kern.
 */

.abz { max-width: 560px; }
.abz__titel {
  margin: 0 0 14px;
  font-size: var(--schrift-groesse-21);
  line-height: 1.3;
  color: var(--farbe-text);
}
.abz__text {
  margin: 0 0 12px;
  font-size: var(--schrift-groesse-16);
  line-height: 1.6;
  color: var(--farbe-text-mittel);
}
.abz__fehler {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-8);
  background: var(--farbe-falsch-flaeche);
  color: var(--farbe-falsch-text);
  font-size: var(--schrift-groesse-15);
}

.abz .mx-meldekasten p { margin: 0 0 6px; }
.abz__hinweis { margin-top: 18px; }
.abz__text strong { color: var(--farbe-text); font-weight: var(--schrift-gewicht-fett); }
.abz__weiter { margin-top: 22px; }
.abz-knopf--weiter { display: inline-block; text-decoration: none; line-height: 1.5; }
.abz-knopf--weiter:hover,
.abz-knopf--weiter:focus { color: var(--farbe-grund); }

.abz-aufstellung {
  margin: 0 0 18px;
  padding: 4px 16px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-12);
  background: var(--farbe-grund);
}
.abz-aufstellung__zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: var(--schrift-groesse-16);
  color: var(--farbe-text);
}
.abz-aufstellung__zeile + .abz-aufstellung__zeile { border-top: 1px solid var(--farbe-linie); }
.abz-aufstellung__zeile dt,
.abz-aufstellung__zeile dd { margin: 0; }
.abz-aufstellung__zeile dd { white-space: nowrap; }
.abz-aufstellung__zeile--summe { font-weight: var(--schrift-gewicht-fett); color: var(--farbe-marke); }

.abz-zahlart {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-12);
  background: var(--farbe-grund);
}
.abz-zahlart__titel {
  margin: 0 0 12px;
  font-size: var(--schrift-groesse-16);
  color: var(--farbe-marke);
}
.abz-zahlart__felder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.abz-feld { flex: 1 1 220px; display: block; }
.abz-feld__name {
  display: block;
  margin: 0 0 4px;
  font-size: var(--schrift-groesse-14);
  color: var(--farbe-text-mittel);
}
.abz-feld__eingabe {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-8);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--schrift-groesse-16);
  text-transform: uppercase;
}
.abz-knopf {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--farbe-marke);
  border-radius: var(--radius-8);
  background: var(--farbe-marke);
  color: var(--farbe-grund);
  font: inherit;
  font-size: var(--schrift-groesse-16);
  cursor: pointer;
}

/* Der Knopf von PayPal. Sein Aussehen bestimmt PayPal; hier steht nur der Platz. */
.abz-paypal { flex: 1 1 100%; max-width: 360px; min-height: 46px; }
.abz-paypal__meldung { flex: 1 1 100%; margin: 0; }

@media (max-width: 600px) {
  .abz-knopf { flex: 1 1 100%; }
}