body { font-family: sans-serif; }
.container { max-width: 1000px; margin: auto; padding: 8px; }
h2, h3 { margin-bottom: 10px; }
.chip {
  display: inline-block;
  background-color: #e0f7fa;
  padding: 8px 12px;
  border-radius: 20px;
  margin: 5px;
  cursor: grab;
  border: 1px solid #00796b;
}
.emotion-pool, .dropzone {
  background-color: #ffffff;
  border: 2px dashed #b0bec5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  min-height: 60px;
}
.emotion-pool {
  background-color: white;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.dropzone {
  border: 2px dashed #006266;
  background-color: white;
  padding: 20px;
  flex-direction: column;
  margin-top: 30px;
  background-image: url('http://www.ein-eltern-familie.de/wp-content/uploads/2025/02/derek-thomson-PR096oCDa18-unsplash-scaled.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.85);
}
.dropzone h2 { text-align: right; }
.dropzone.dragover { background-color: #e0f7f1; border-color: #26a69a; }
.selected-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.bottomline {
  margin-top: auto;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 1rem;
  color: white;
  text-align: left;
}
.buttons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.buttons button {
  flex: 1 1 45%;
  padding: 10px;
  border: none;
  background-color: #006266;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}
.buttons button:hover { background-color: #004d4d; }
@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.chip-appear { animation: popIn 0.3s ease-out; }
.sortable-ghost { opacity: 0.4; background: #ccc; }

@media (max-width: 1000px) {
  .container { padding: 10px; }
  .buttons button { flex: 1 1 100%; }
  .chip { font-size: 1.1rem; padding: 10px 14px; }
  h2, h3 { font-size: 1.4rem; }
  .bottomline { font-size: 0.9rem; }
}
.container {
  max-width: 1000px !important;
  width: 100% !important;
}