/* =========================================================================
   characters.css — Sektion „Charaktere": Wolken, Köpfe und Genres
   ========================================================================= */

/* Senkrecht sichtbar — die Kreise von ::before/::after ragen über die Kante
   der Wolke hinaus. Waagerecht geklippt: cloud--2 läuft absichtlich über den
   rechten Rand hinaus und schob damit den horizontalen Seiten-Scroll an.
   clip statt hidden, weil hidden hier einen Scroll-Container aufmachte.   */
.clouds {
  position: absolute; inset: 0;
  overflow-x: clip; overflow-y: visible;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: var(--cloud);
  border-radius: 999px;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute;
  background: var(--cloud); border-radius: 50%;
}
.cloud::before { width: 62%; aspect-ratio: 1; left: 8%;  bottom: 42%; }
.cloud::after  { width: 44%; aspect-ratio: 1; right: 10%; bottom: 46%; }

.cloud--1 { width: clamp(180px, 26vw, 400px); height: clamp(48px, 6vw, 92px); top: clamp(8.5rem, 15vw, 13rem);  left: -4%; }
.cloud--2 { width: clamp(150px, 21vw, 320px); height: clamp(40px, 5vw, 76px); top: clamp(7.5rem, 13vw, 11rem);  right: -3%; }
.cloud--3 { width: clamp(130px, 18vw, 270px); height: clamp(36px, 4.4vw, 66px); top: 44%; right: 22%; opacity: .8; }

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

.heads {
  list-style: none; margin: 0 0 clamp(3rem, 7vw, 5.5rem); padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 3vw, 2.5rem);
  align-items: center;
}

.head img {
  width: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 14px 26px rgba(41, 78, 99, .16));
}

/* slight offset — the heads float like in Frame 57 */
.head--1 { transform: translateY(clamp(-14px, -1.6vw, 0px)); }
.head--2 { transform: translateY(clamp(10px, 2.4vw, 34px)); }
.head--3 { transform: translateY(clamp(-20px, -2.6vw, 0px)); }
.head--4 { transform: translateY(clamp(4px, 1.4vw, 20px)); }

.genres {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.genres li {
  padding: .3em 1em;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
}

/* Jedes Genre trägt seine eigene Farbe. Die Selektoren müssen die
   Spezifität von `.genres li` erreichen, sonst gewinnt dort das
   border-Kurzschreiben mit var(--accent). */
.genres .genre--yellow { border-color: var(--yellow); }
.genres .genre--green  { border-color: var(--green); }
.genres .genre--purple { border-color: var(--purple); }
.genres .genre--blue   { border-color: var(--blue); }
.genres .genre--red    { border-color: var(--red); }

/* The detail photo runs off the right edge of the text measure. */
@media (min-width: 61rem) {
  #characters .col-image img {
    width: 132%;
    max-width: none;
  }
}