@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    body {
      margin: 0;
      font-family: "Poppins", sans-serif;
      background: #f2f2f2;
      background: url('res.png') repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      font-size: 14px;
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex: 1;
    }
    .container {
      width: 700px;
      position: relative;
    }

    .hex-image {
      width: 100%;
      display: block;
    }

    .hex-link {
      position: absolute;
      width: 38%;
      aspect-ratio: 1 / 1;
      clip-path: polygon(
        50% 0%,
        93% 25%,
        93% 75%,
        50% 100%,
        7% 75%,
        7% 25%
      );
      cursor: pointer;
      text-indent: -9999px;
    }

    .hex-link:hover {
      outline: 2px solid rgba(0,0,0,0.2);
    }

    .ernaehrt    { top: 4%;   left: 14%; }
    .results     { top: 4%;   left: 48%; }
    .trainiert   { top: 34%;  left: -3%; }
    .schoen      { top: 34%;  left: 32%; }
    .sauber      { top: 34%;  left: 65%; }
    .investiert  { top: 64%;  left: 14%; }
    .diskutiert  { top: 64%;  left: 48%; }

    .footer {
      margin: 20px 0 40px;
      font-size: 14px;
      color: #555;
      text-align: center;
    }
    .footer a {
      color: grey;
      margin: 0 8px;
      text-decoration: none;
    }
    @media (max-width: 700px) {
    .container {
      width: 100%; 
    }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  color: #000;
  padding: 30px;
  max-width: 600px;
  width: 100%;
  border-radius: 8px;
  position: relative;
  font-size: 16px;
    max-height: 80vh;     
  overflow-y: auto;     

}

.close-button {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}