/* Masonry-Layout über CSS-Spalten */
.ttiles-grid.masonry {
  column-gap: 20px;
}

/* Spaltenanzahl je nach eingestellter columns */
.ttiles-grid.masonry.cols-2 { column-count: 2; }
.ttiles-grid.masonry.cols-3 { column-count: 3; }
.ttiles-grid.masonry.cols-4 { column-count: 4; }

/* Responsive: automatisch weniger Spalten */
@media (max-width: 900px){ .ttiles-grid.masonry { column-count: 2 !important; } }
@media (max-width: 600px){ .ttiles-grid.masonry { column-count: 1 !important; } }

.ttile {
  display: inline-block;      /* wichtig für Spalten-Flow */
  width: 100%;
  margin: 0 0 20px;           /* Abstand nach unten zwischen Kacheln */
  break-inside: avoid;        /* verhindert Spaltenumbruch innerhalb der Kachel */
  position: relative;
  padding: 28px 24px;
  background: #f7f7f8;
  border: 1px solid #e6e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.ttile-text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 10px;
  text-align: center;
}

.ttile-author {
  text-align: center;
  font-size: 13px;
  color: #666;
}

.ttile-copy {
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    opacity: .6;
    padding: 0;
    display: block;
    margin-left: auto;
    margin-bottom: 10px;
}
.ttile-copy:hover { opacity: 1; }