.ka-stripe {
  min-height: 120px;
  margin: 0 0 16px;
}

.ka-stripe__error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--tz-radius);
  background: var(--tz-alert-tint);
  color: var(--tz-alert);
  font-size: 14px;
  line-height: 1.45;
}

.ka-stripe__error[hidden] {
  display: none;
}

.ka-mobile[hidden] {
  display: none;
}

.ka-disclose {
  margin: 0 0 16px;
  color: var(--tz-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ka-disclose p {
  margin: 0 0 8px;
}

.ka-disclose p[hidden] {
  display: none;
}

/* The way choice (js/abo-zahlig.js sets body[data-way]): each way shows its own parts, the invoice page's without JavaScript. */
body:not([data-way="stripe"]) .ka-w-stripe,
body[data-way="stripe"] .ka-w-inv,
body[data-way="stripe"] #PPREdiv,
body[data-way="stripe"] #ka-sum-pay,
body[data-way] .ka-w-nojs {
  display: none;
}

/* Light, gifts and Treue have no invoice choice of their own (kasse-abo.css hides the card): the way choice keeps it */
body[data-way] #ka-payment:has(#ka-pay-options[hidden]) {
  display: block;
}

.ka-way {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* the invoice's own choice under "Rächnig", the voucher code (either way) under both ways */
body[data-way] .ka-way {
  display: flex;
  flex-direction: column;
}

body[data-way] #ka-pay-options {
  display: contents;
}

body[data-way] #PPREdiv {
  padding-left: 32px;
}

body[data-way] .ka-way .ka-voucher {
  order: 1;
}

.gk-way {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}