/* Responsive Anpassungen */

  /* Anpassungen für Smartphones */

  @media (max-width: 700px) {

    .haupt-container {

      align-items: center;

    }

    .name-oben-links {

      text-align: center;

    }

    .kachel-raster {

      grid-template-columns: repeat(2, 1fr);

      grid-auto-rows: calc(50vw - 25px);

    }

    .kachel-abstandsname {
      top: calc((50vw - 25px) * 3 + 20px);
      left: 0;
      width: 100%;
    }

    .kachel-ortsname {
      top: calc((50vw - 25px) * 2 + 20px);
      left: calc(50% - 5px);
      height: calc(50vw - 25px);
    }

  }