:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --maxw: 1320px;
  --grid-maxw: 1080px;
}

html, body { font-family: var(--font-ui); }

/* Seite */
.page-spielstaette { padding: 28px 16px 64px; }
.page-head { margin: 0 auto 20px; max-width: var(--maxw); text-align: center; }
.page-title { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: .2px; }
.page-sub { margin: 0 0 12px; color: #6e6e6e; }

/* Sprungnav */
.spielstaette-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px;
}
.spielstaette-nav .nav-chip {
  text-decoration: none; color: #0d47a1; border: 1px solid #0d47a1;
  padding: 8px 12px; font-size: 15px; letter-spacing: .2px;
}
.spielstaette-nav .nav-chip:hover { background: #0d47a1; color: #fff; }

/* Bereiche */
.story { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 56px; }
.story-row { display: grid; grid-template-columns: 1fr; gap: 22px; justify-items: center; }
.story-text { text-align: center; }
.story-text h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: .2px; color: #fff; }
.story-text .muted { color: #ccc; margin-top: 6px; }
.story-flow { display: grid; gap: 22px; width: 100%; }

/* Textabsätze */
.story-paragraph { max-width: 860px; margin: 0 auto; text-align: center; }
.story-paragraph p { margin: 0; line-height: 1.65; font-size: 1.04rem; color: #fff; }

/* ===== Mosaic-Grid (zentriert) ===== */
.story-media.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
}

/* Responsive Spalten */
@media (max-width: 1100px) { .story-media.mosaic { grid-template-columns: repeat(10, 1fr); } }
@media (max-width: 860px)  { .story-media.mosaic { grid-template-columns: repeat(8,  1fr); } }
@media (max-width: 640px)  { .story-media.mosaic { grid-template-columns: repeat(4,  1fr); } }

/* Kachel-Basis – ohne Rahmen; Bilder bleiben sicher in der Kachel */
.tile { margin: 0; border: none; }
.tile .ph {
  position: relative;
  width: 100%;
  overflow: hidden;       /* Bild bleibt im Rahmen */
  background: transparent;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* kein Verzerren */
  display: block;
}

/* Spans/Verhältnisse */
.size-a { grid-column: span 6; }  .size-a .ph { aspect-ratio: 5 / 3; }
.size-b { grid-column: span 4; }  .size-b .ph { aspect-ratio: 4 / 5; }
.size-c { grid-column: span 8; }  .size-c .ph { aspect-ratio: 16 / 9; }
.size-d { grid-column: span 3; }  .size-d .ph { aspect-ratio: 3 / 4; }
.size-e { grid-column: span 12; } .size-e .ph { aspect-ratio: 21 / 9; }

/* Mobile: alle vollbreit im 4er Grid */
@media (max-width: 640px) {
  .size-a, .size-b, .size-c, .size-d, .size-e { grid-column: span 4; }
  .size-e .ph { aspect-ratio: 16 / 9; }
}

/* ===== Mosaic-Grid: zentriert & gleich hohe Bilder ===== */
.story-media.mosaic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* <--- zentriert die Bildreihen */
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Kacheln: alle gleiche Höhe, flexbasiert */
.story-media.mosaic .tile {
  flex: 1 1 300px;           /* Mindestbreite 300px, wächst mit */
  max-width: 33%;            /* maximal 3 pro Reihe */
  display: flex;
  justify-content: center;
}

.story-media.mosaic .ph {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* alle gleich hoch */
  overflow: hidden;
  background: transparent;
  border-radius: 0;
}

.story-media.mosaic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.story-media.mosaic img:hover {
  transform: scale(1.02);
}

/* Einzelne Bilder mittig und breiter */
.story-media.mosaic:has(.tile:only-child) {
  justify-content: center;
}
.story-media.mosaic .tile:only-child {
  flex: 0 1 70%;
  max-width: 900px;
}

/* Responsive Anpassung */
@media (max-width: 900px) {
  .story-media.mosaic .tile { flex: 1 1 45%; max-width: 45%; }
}
@media (max-width: 600px) {
  .story-media.mosaic .tile { flex: 1 1 100%; max-width: 100%; }
  .story-media.mosaic .tile .ph { aspect-ratio: 16 / 9; }
}