/* LLI Post-it Notes: Frontend-Styles
   Alle einstellbaren Werte kommen als CSS-Variablen aus dem Elementor-Widget. */

.lll-notes {
  --lll-min: 200px;
  --lll-minh: 210px;
  --lll-gap: 24px;
  --lll-radius: 2px;
  --lll-shadow: 12%;
  --lll-tape: rgba(140, 138, 125, 0.3);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lll-min), 1fr));
  gap: calc(var(--lll-gap) + 8px) var(--lll-gap);
}

.lll-note {
  position: relative;
  min-height: var(--lll-minh);
  padding: 32px 22px 24px;
  border-radius: var(--lll-radius);
  background: var(--lll-bg, #FAC775);
  color: var(--lll-fg, #412402);
  transform: rotate(var(--lll-rot, 0deg));
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12);
  box-shadow: 2px 3px 6px rgb(0 0 0 / var(--lll-shadow));
  transition: transform 0.18s ease;
}

.lll-notes.has-tape .lll-note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -34px;
  width: 68px;
  height: 19px;
  background: var(--lll-tape);
  border-radius: 1px;
  transform: rotate(-2deg);
}

.lll-notes.has-hover .lll-note:hover,
.lll-notes.has-hover .lll-note:focus-within {
  transform: rotate(0deg) scale(1.03);
  z-index: 2;
}

.lll-note__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.75;
  color: inherit;
}

.lll-note__text {
  margin: 0;
  line-height: 1.45;
  color: inherit;
}

.lll-notes.has-handwriting .lll-note__label,
.lll-notes.has-handwriting .lll-note__text {
  font-family: "Caveat", "Segoe Script", cursive;
}

.lll-notes.has-handwriting .lll-note__text {
  font-size: 1.35em;
  line-height: 1.3;
}

/* Untereinander stehende Zettel wirken bei starker Neigung wie ein Fehler. */
@media (max-width: 767px) {
  .lll-notes.straighten-mobile .lll-note {
    transform: rotate(calc(var(--lll-rot, 0deg) * 0.35));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lll-note { transition: none; }
  .lll-notes.has-hover .lll-note:hover { transform: rotate(var(--lll-rot, 0deg)); }
}