:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html, body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; background:#fff; }
.wrap { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.head h1 { margin: 0 0 4px; color:#111; }
.muted { opacity:.7; }
.card { border: 1px solid #ddd; border-radius: 14px; padding: 16px; margin: 16px 0; background:#fff; color:#111; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }

/* ===== Lesbarkeit Bankdaten verbessern ===== */
/* Bankdaten-Tabelle (untereinander, Label normal – Wert fett) */
/* Bankdaten-Tabelle (untereinander, Label normal – Wert fett in Code-Box) */
.kv {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  margin-top: 14px;
}

.kv .k {
  font-weight: 500;
  margin-top: 8px;
  color:#111;
}

.kv .v {
  font-weight: 700;
  word-break: break-word;
  margin-top: 2px;
  color:#111;
}

.kv .v code {
  display: inline-block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fafafa;
  color:#111;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  user-select: all;
  font-weight: 700;
  text-transform: uppercase;       /* immer Großbuchstaben */
}

/* etwas Luft unter dem Titel */
#bankTitle { margin-bottom: 10px; }

.btns { display:flex; flex-wrap:wrap; gap:10px; }
button.paybtn { border:1px solid #ccc; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:600; background:#fff; color:#111; }
button.paybtn:hover { filter:brightness(0.98); }
.hidden { display:none !important; }
.foot { text-align:center; margin: 24px 0; }
code { padding: 2px 6px; border-radius:6px; border:1px solid #ccc; background:#fff; color:#111; }

.form .row { align-items: center; }
.lbl { width: 180px; display:inline-block; color:#111; }
.form input[type="email"],
.form input[type="text"] { flex:1; min-width: 220px; padding:8px 10px; border:1px solid #ccc; border-radius:10px; background:#fff; color:#111; }

/* Betragsblock unter "Zu zahlen:" */
#amountValue div {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  color:#111;
}
#amountValue strong {
  display: inline-block;
  min-width: 150px;  /* Abstand zwischen Label und Zahl */
  color:#111;
}

/* ==================== Dark Mode ==================== */
@media (prefers-color-scheme: dark) {
  html, body { background:#0b0b0b; color:#eee; }
  .head h1 { color:#fff; }
  .card { background:#141414; color:#eee; border-color:#333; }
  .row { color:#eee; }
  .kv .k { color:#eee; }
  .kv .v { color:#eee; }
  .kv .v code {
    background:#111; color:#fff; border-color:#333;
  }
  button.paybtn { background:#1a1a1a; color:#eee; border-color:#333; }
  code { background:#111; color:#eee; border-color:#333; }
  .lbl { color:#eee; }
  .form input[type="email"],
  .form input[type="text"] {
    background:#111; color:#eee; border-color:#333;
  }
  #amountValue div,
  #amountValue strong { color:#eee; }
}