/* Kachelraster, Beschriftungen und Größen */

  .kachel-raster {

    display: grid;

    position: relative;

    grid-template-columns: repeat(4, 150px);

    grid-auto-rows: 150px;

    gap: 10px;

    width: 100%;

  }

  /* Der Namenszug nutzt ausschließlich den vorhandenen 10px-Zwischenraum
     unterhalb der Uhr-Kachel; er erzeugt keine zusätzliche Grid-Zeile. */
  .kachel-abstandsname {
    position: absolute;
    top: 150px;
    left: 320px;
    z-index: 20;
    width: 310px;
    height: 10px;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
    letter-spacing: -0.2px;
    transform: translateY(1px);
    pointer-events: none;
  }

  .name-antonio { color: #da55ba; }
  .name-biagio { color: #bada55; }
  .name-parrinelli { color: #55bada; }

  /* Der Ortsname füllt ausschließlich den senkrechten 10px-Zwischenraum
     zwischen Uhr- und Werkstatt-Kachel. */
  .kachel-ortsname {
    position: absolute;
    top: 0;
    left: 470px;
    z-index: 20;
    width: 10px;
    height: 150px;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
    letter-spacing: 0;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    direction: ltr;
    pointer-events: none;
  }

  /* Gleicht die asymmetrische Grundlinie seitwärts gesetzter Schrift aus,
     ohne den 10px-Zwischenraum oder die Textebene zu transformieren. */
  .kachel-ortsname > span {
    position: relative;
    left: -1px;
  }

  .ort-gemeinde { color: #da55ba; }
  .ort-wallenhorst { color: #78da55; }

  .kachel {

    width: 100%;

    height: 100%;

  }



  .kachel-breit {

    grid-column: span 2;

  }



  .kachel-gross {

    grid-column: span 2;

    grid-row: span 2;

  }