/* Zettel-Raster der Spender-Seite und die Vorderseite der Zettel (Wunsch, Mystery, Gutschein,
   Freier Betrag). Drehen und Rückseite: zettel-flip.css. Farben aus den Variablen in zettel.css. */
.inhalt {
  margin-top: 1rem;
}

/* Große Kacheln: Handy eine Spalte, Tablet zwei, Desktop drei bis vier */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 2rem 1.5rem;
  align-items: stretch;
  padding: 1rem 0 1.5rem;
  list-style: none;
}

.zettel {
  --farbe: var(--zettel-gelb);
  --dreh: 0deg;
  --klebe: var(--klebeband);
  position: relative;
  transform: rotate(var(--dreh));
}

.zettel.wunsch:nth-child(4n + 1) {
  --farbe: var(--zettel-gelb);
  --dreh: -1deg;
}

.zettel.wunsch:nth-child(4n + 2) {
  --farbe: var(--zettel-mint);
  --dreh: 0.8deg;
}

.zettel.wunsch:nth-child(4n + 3) {
  --farbe: var(--zettel-rosa);
  --dreh: -0.6deg;
}

.zettel.wunsch:nth-child(4n) {
  --farbe: var(--zettel-blau);
  --dreh: 1deg;
}

.zettel.mystery {
  --farbe: var(--zettel-blau);
  --dreh: 1deg;
}

.zettel.gutschein {
  --farbe: var(--zettel-mint);
  --dreh: -0.8deg;
}

.zettel.frei {
  --farbe: var(--zettel-rosa);
  --dreh: 0.6deg;
}

/* "Im Beitrag": rotes Klebeband */
.zettel.ist-korb {
  --klebe: rgb(194 54 47 / 0.6);
}

/* Eine Seite des Zettels (Vorder- und Rückseite teilen sich diese Grundform) */
.seite {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-height: 19rem;
  padding: 1.6rem 1.2rem 1.2rem;
  font: inherit;
  color: var(--dunkelblau);
  background: var(--farbe);
  border: 0;
  border-radius: 2px 2px 14px 2px;
  box-shadow: 2px 4px 10px var(--schatten);
}

/* Klebestreifen oben */
.seite::before {
  position: absolute;
  top: -0.7rem;
  left: calc(50% - 2.2rem);
  width: 4.4rem;
  height: 1.3rem;
  content: "";
  background: var(--klebe);
  transform: rotate(-3deg);
}

.zettel.ist-korb .seite {
  box-shadow:
    inset 0 -7px 0 var(--rot),
    2px 4px 10px var(--schatten);
}

/* Vorderseite: ein großer Knopf */
.vorn {
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.vorn .emoji {
  font-size: 4.2rem;
  line-height: 1;
}

/* Icon statt Emoji (js/icons.js setzt data-icon und --icon). Das Emoji-Zeichen bleibt im Knoten,
   ist aber unsichtbar. Die Stile färben über --icon-farbe und geben mit --icon-abstand Platz
   für einen Kreis darum. */
.vorn .emoji[data-icon] {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  font-size: 0;
}

.vorn .emoji[data-icon]::before {
  position: absolute;
  inset: var(--icon-abstand, 0);
  content: "";
  background: var(--icon-farbe, var(--dunkelblau));
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.vorn .nr {
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  font-size: 0.95rem;
  color: #3c4668;
}

.vorn .alter {
  font-size: 1.2rem;
}

.vorn .wunschtext {
  font-family: var(--schrift-hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.vorn .preis {
  font-family: var(--schrift-hand);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.vorn .balken {
  width: 100%;
  height: 1.2rem;
  background: var(--schnee);
}

.vorn .offen {
  font-size: 1.05rem;
  color: #3c4668;
}

.hinweis-drehen {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 1rem;
  color: #3c4668;
}

/* Rote Schleife mit Haken oben rechts */
.abzeichen {
  position: absolute;
  top: -0.8rem;
  right: -0.5rem;
  z-index: 1;
  padding: 0.1rem 0.7rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--rot);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 1px 2px 4px var(--schatten);
  transform: rotate(6deg);
}

/* Erfüllt: grüner Stempel, leicht abgedunkelt */
.zettel.ist-erfuellt {
  filter: brightness(0.93);
}

.zettel.ist-erfuellt .vorn::after {
  position: absolute;
  top: 38%;
  left: 12%;
  padding: 0 0.5rem;
  font-family: var(--schrift-hand);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gruen);
  content: "Erfüllt!";
  background: rgb(255 255 255 / 0.6);
  border: 3px solid var(--gruen);
  border-radius: 6px;
  transform: rotate(-14deg);
}

/* Der kleine Zettel am Ende: "Alle Wünsche erfüllen" */
.zettel.alle {
  display: grid;
  gap: 0.8rem;
  align-content: center;
  justify-items: center;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--schnee);
  border: 3px dashed var(--blau);
  border-radius: 4px 4px 14px 4px;
}

.zettel.alle .haupt {
  font-size: 1.5rem;
}

.leer {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 0.5rem;
  text-align: center;
}

/* Bewegung nur, wenn erlaubt: Wackeln beim Drüberfahren, Hüpfen beim Mystery-Geschenk */
@media (prefers-reduced-motion: no-preference) {
  .zettel:not(.gedreht, .ist-erfuellt, .alle):hover {
    animation: wackeln 0.5s ease-in-out;
  }

  .zettel.mystery:not(.gedreht) .emoji {
    display: inline-block;
    animation: huepfen 1.8s ease-in-out infinite;
  }
}

@keyframes wackeln {
  25% {
    transform: rotate(calc(var(--dreh) - 1.8deg)) scale(1.02);
  }

  75% {
    transform: rotate(calc(var(--dreh) + 1.8deg)) scale(1.02);
  }
}

@keyframes huepfen {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-0.7rem) rotate(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zettel,
  .zettel .emoji {
    animation: none !important;
    transition: none !important;
  }
}