/* tiles.css – Kachelblock stabil (2x3) + responsive */

/* Kachelblock (rechte Spalte) */
.tiles{
  width: 100%;
  max-width: 640px;       /* wie bisher auf Home */
  margin-left: auto;      /* rechts „anliegen“ */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;               /* dünne Fugen wie Original */
}

/* Jede Kachel ist ein Linkblock */
.tiles .tile{
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #000;
}

.tiles .tile{
  transition: transform .2s ease, filter .2s ease;
}

.tiles .tile:hover{
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Bild füllt die Kachel */
.tiles .tile img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Label im Bild */
.tiles .tile-label{
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85);
  pointer-events: none;
}

/* Farblabels */
.tiles .tile.label-yellow .tile-label{ color:#d8ff00; }
.tiles .tile.label-green  .tile-label{ color:#6ee000; }
.tiles .tile.label-light  .tile-label{ color:#bfeaff; }
.tiles .tile.label-dark   .tile-label{ color:#111; text-shadow:none; }

/* Hall of Fame: Logo nicht abschneiden */
.tiles .tile-hof{
  background: #2f3336;
}
.tiles .tile-hof img{
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Tablet: Block darf voll werden */
@media (max-width:1100px){
  .tiles{
    max-width: none;
    margin-left: 0;
    gap: 6px;
  }
}

/* Handy: 1 Spalte */
@media (max-width:600px){
  .tiles{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}