.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 92%;
  max-width: 1400px;
  margin: 0 auto 3em;
  text-align: left;
}
.tile {
  --accent: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 8px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding: 18px 20px 24px;
  overflow-x: auto;
}
.tile.herren { --accent: #1f5fa8; }
.tile.damen  { --accent: #c2185b; }
.tile.mixed  { --accent: #e68a00; }
.tile.jugend { --accent: #2e8b57; }
.tile h2 {
  color: var(--accent);
  font-size: 1.6em;
  margin-bottom: .6em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--accent);
}
.tile h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6em; }
.tile h2 small { font-size: .5em; font-weight: normal; color: #666; }
.tile h3 { margin: 1.2em 0 .5em; font-size: 1.05em; color: #333; }
.tile .vapi { margin-bottom: 1em; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .tiles { width: 100%; gap: 14px; padding: 0 10px; box-sizing: border-box; }
  .tile { padding: 12px 10px 16px; border-top-width: 6px; }
  .tile h2 { font-size: 1.35em; }
}