/* =========================================================================
   interactions.css — Sektion „Interaktionen": Laub, Hände und Gesten
   ========================================================================= */

#interactions .grid { align-items: start; }

.foliage-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.leaf { position: absolute; opacity: .85; }

.leaf--1 { top: clamp(1rem, 4vw, 2.5rem);  left: -6%;  width: clamp(130px, 18vw, 280px); transform: rotate(-14deg); }
.leaf--2 { bottom: 6%; right: -6%; width: clamp(110px, 15vw, 240px); transform: rotate(12deg); opacity: .55; }
.leaf--3 { top: 42%;  left: -7%;  width: clamp(80px, 11vw, 160px); transform: rotate(-8deg); opacity: .35; }

@media (max-width: 48rem) { .leaf--3 { display: none; } }

/* Zweispaltig auf mittelbreiten Schirmen ist der Seitenrand neben dem
   Track schmaler als der sichtbare Teil der linken Blätter — sie ragten
   in Überschrift und Text. Bis der Rand breit genug ist (~1550px), bleibt
   nur ein schmaler Zipfel sichtbar. */
@media (min-width: 61rem) and (max-width: 102rem) {
  .leaf--1 { left: 0; transform: translateX(calc(-100% + 16px)) rotate(-14deg); }
  .leaf--3 { left: 0; transform: translateX(calc(-100% + 14px)) rotate(-8deg); }
}

/* Einspaltig: die Überschrift steht oben links, wo sonst leaf--1 liegt —
   etwas mehr Luft über der Überschrift schaffen, damit das Blatt komplett
   sichtbar darüber sitzt statt die Schrift zu überdecken. */
@media (max-width: 61rem) {
  #interactions { padding-top: calc(var(--space-y) + 2.5rem); }
  .leaf--1 { width: clamp(64px, 9vw, 84px); top: .75rem; left: -5%; }
}

.hands {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}
.hands img { width: 100%; }

.gestures { list-style: none; margin: 0; padding: 0; }

/* Zweispaltig: Liste optisch am Textblock statt an der Überschrift ausrichten */
@media (min-width: 61rem) {
  .gestures { margin-top: clamp(4.9rem, 12vw, 8.52rem); }
}

.gesture {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5ch;
  padding: clamp(1rem, 2.4vw, 1.9rem) 0;
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.gesture:last-child { border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }

.gesture__word {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 500;
}
.gesture__sentence { color: var(--deep); }

.gesture--blue .gesture__word { color: var(--blue-ink); }
.gesture--pink .gesture__word { color: var(--pink-ink); }
.gesture--yellow .gesture__word { color: var(--yellow-ink); }