@font-face {
  font-family: "AlteHaasGroteskRegular";
  src: url("../../font/AlteHaasGroteskRegular.ttf");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Ovo-Regular";
  src: url("../../font/Ovo-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}

html, body {
      background-color: #fe6fbe;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Top area */
    .top {
      flex: 9;
      background-color: #fe6fbe;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 1.5rem;
      color: black;
    }

    .top h1 {
      font-size: 3rem;
      line-height: 1.2;
      margin: 0;
      text-align: left;
    }

    .top a {
      color: black;
      font-size: 3rem;
      line-height: 1.2;
      margin: 0;
      text-align: left;
    }

    /* Bottom area */
    .bottom {
      flex: 1;
      background-color: #e3e3e3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.3rem 1.5rem; /* weniger Abstand zum Rand */
      font-size: 1.5rem;
    }

    .bottom-left {
      display: flex;
      gap: 3rem; /* Abstand zwischen den Spalten links */
    }

    .column {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.2rem; /* Abstand zwischen den Zeilen */
    }

    .column a {
      color: black;
      text-decoration: none;
    }

    .column a:hover {
      text-decoration: underline;
    }

    .bottom-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end; /* rechtsbündig */
      gap: 0.3rem;
      font-size: 1.5rem;
      text-align: right;
    }


    /* Responsive for mobile devices */
    @media (max-width: 600px) {
      .top{
        flex: 92;
        padding: 1rem;
      }

      .top h1 {
        font-size: 1.5rem;
      }

      .top a {
        font-size: 1.5rem;
      }

      .bottom {
        flex: 8;
        flex-direction: row; /* linke Spalten nebeneinander */
        justify-content: flex-start;
        align-items: center;
        font-size: 1rem;
        padding: 0.5rem 1rem;
      }

      .bottom-left {
        display: flex;
        flex-direction: row;
        gap: 1rem;
      }

      /* Datum/Uhrzeit ausblenden auf Mobile */
      .bottom-right {
        display: none;
      }

      .column {
        gap: 0.2rem;
      }