/* ------------------------------------
   Daruma – Band auf der Startseite
-------------------------------------*/

.home-daruma-list{
  margin:8px 0 0;
  padding-left:18px;
  font-size:0.9rem;
}

Daruma-Band unter dem Text 
.daruma-section{
  text-align:center;
}



.daruma-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:1.2rem;
}

.daruma-item{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

/* NUR im Band: kleine Größen */
.daruma-row .daruma-img{
  max-width:80px;
  height:auto;
  display:block;
}

/* Roter Daruma im Band größer */
.daruma-row .daruma-img--red{
  max-width:110px;
}




/* ------------------------------------
   Daruma – Chaos-Seite
-------------------------------------*/

/* .daruma-chaos-wrapper{
  max-width:1200px;
  margin:80px auto 40px;
  padding:0 20px 40px;
  box-sizing:border-box;
}*/

/*.daruma-chaos-header{
  text-align:center;
  margin-bottom:24px;
}*/

/*.daruma-chaos-header h1{
  margin:0 0 8px;
  font-size:2rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.daruma-chaos-header p{
  margin:0;
  font-size:1rem;
  color:#555;
}*/

/* Chaos-Feld: Verhältnis Breite:Höhe = 3:1 */
.daruma-chaos-field{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:3 / 1;
}

/* Items im Chaos-Feld absolut positioniert */
.daruma-chaos-field .daruma-item{
  position:absolute;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Bilder im Chaos-Feld – Größe kommt aus JS */
.daruma-chaos-field .daruma-img{
  display:block;
  width:100%;
  height:auto;
  max-width:none; /* keine Begrenzung, JS steuert die Breite */
}

/* Tooltip für Daruma (Band + Chaos) */
.daruma-item{
  position:relative; /* wichtig für Tooltip-Positionierung */
}

.daruma-item[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%) translateY(-8px);
  padding:4px 8px;
  background: #ffffff;
  color:#000000;
  font-size:0.7rem;
  font-weight:300;
  white-space:nowrap;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:10;
}

.daruma-item[data-tooltip]:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}
.daruma-gif{
  display:block;
  margin:0 auto 1rem;
  max-width:400px;
  height:auto;
}

/* Mobile: im Band nur 3 Daruma (rot, weiß, grün) */
@media (max-width: 900px){
  .daruma-item--yellow,
  .daruma-item--pink{
    display:none;
  }
  .daruma-gif{
    max-width: 300px;
  }
}