Quelltext der Seite Test4

<div style="display: flex; flex-wrap: wrap; width: 100%; gap: 1em;">

<!-- Holz -->
<div style="flex: 0 0 calc(25% - 0.1em);">
  <div onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'flex' : 'none';" 
       style="background-color: black; border-radius: 9999px; padding: 0.5em; text-align: center; cursor: pointer;">
    <h3 style="color: white; margin: 0;">Holz</h3>
  </div>
  <div style="display: none; flex-wrap: wrap; gap: 1em; margin-top: 1em;">
    <div style="max-width: 300px;">
      [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
      <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
    </div>
    <!-- Repeat -->
  </div>
</div>

<!-- Metalle -->
<div style="flex: 0 0 calc(25% - 0.1em);">
  <div onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'flex' : 'none';" 
       style="background-color: black; border-radius: 9999px; padding: 0.5em; text-align: center; cursor: pointer;">
    <h3 style="color: white; margin: 0;">Metalle</h3>
  </div>
  <div style="display: none; flex-wrap: wrap; gap: 1em; margin-top: 1em;">
    <div style="max-width: 300px;">
      [[File:Test image1.jpg|300px|left|link=Smoky Quartz|style=max-width:100%;]]
      <div style="margin-top: 0.5em;">[[Smoky Quartz]]</div>
    </div>
  </div>
</div>

<!-- Repeat same structure for Gestein, Tierische Werkstoffe... -->

</div>