/* Zusage-Modell (WUNSCH_MODELL=zusage): Rückseite der Wunschkarte (Kaufen, Verpacken, Bringen),
   Karte "Wird geschenkt", Trennzeile vor den Geld-Karten und das Formular "Deine Zusage".
   Farben passend zur Winternacht. */
.zusage {
  display: grid;
  gap: 0.8rem;
}

.zusage-satz {
  font-weight: 600;
}

.zusage-schritte {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.zusage-schritt {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.6rem;
  align-items: start;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Icon als Maske, damit es die Textfarbe übernimmt (Dateien aus img/icons/, Tabler, MIT) */
.zusage-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon-shopping-bag {
  --icon: url("/img/icons/shopping-bag.svg");
}

.icon-gift {
  --icon: url("/img/icons/gift.svg");
}

.icon-map-pin {
  --icon: url("/img/icons/map-pin.svg");
}

.zusage .haupt {
  width: 100%;
}

.zusage-hinweis {
  color: var(--muted);
}

/* Karte "Wird geschenkt" / "Ist schon da": ein Wunsch, den schon jemand übernommen hat.
   Nicht drehbar, ohne Knopf: darum kein Zeiger und kein Wackeln beim Drüberfahren. */
.zettel.zugesagt {
  --farbe: var(--zettel-blau);
}

.zettel.zugesagt:nth-child(odd) {
  --dreh: 0.7deg;
}

.zettel.zugesagt:nth-child(even) {
  --dreh: -0.7deg;
}

.zettel.zugesagt.abgegeben {
  --farbe: var(--zettel-mint);
}

.zettel.zugesagt .seite {
  min-height: 13rem;
}

.zettel.zugesagt .vorn {
  cursor: default;
}

.zugesagt-status {
  margin-top: 0.3rem;
  font-family: var(--schrift-hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.zettel.abgegeben .zugesagt-status {
  color: var(--gruen);
}

.zettel.abgegeben .zugesagt-status::before {
  content: "✓ ";
}

/* Grünes Icon statt rotem Kreis: hier ist nichts mehr zu tun */
.winternacht .zettel.zugesagt .vorn .emoji[data-icon] {
  background: var(--gruen);
  box-shadow: 0 4px 10px rgb(47 107 79 / 0.35);
}

.zettel.zugesagt:hover,
.winternacht .zettel.zugesagt:hover,
.winternacht .zettel.zugesagt:hover .dreher {
  animation: none;
}

/* Trennzeile vor Mystery, Gutscheinen und Freiem Betrag: über die ganze Breite */
.trenner {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.3rem;
  padding: 1.6rem 0 0.4rem;
  text-align: center;
  border-top: 2px dashed currentColor;
}

.trenner h3 {
  font-size: 1.9rem;
}

.winternacht .trenner {
  color: #f3f5ff;
  border-top-color: rgb(255 255 255 / 0.3);
}

.winternacht .trenner h3 {
  font-family: Georgia, "Times New Roman", serif;
}

.winternacht .trenner h3::before,
.winternacht .trenner h3::after {
  color: var(--gelb);
  content: " ✦ ";
}

/* Formular "Deine Zusage": gleiche Grundform wie das Spenden-Formular, nur Abstände */
.zusage-eingabe,
.zusage-fertig {
  display: grid;
  gap: 0.9rem;
}

.zusage-fertig p {
  font-size: 1.2rem;
}