/* Wertschätzung Fotokollage */
.collage {
  --collage-paper: #f7f2e8;
  --collage-ink: #273526;
  --collage-gold: #b98a36;
  --collage-line: rgba(185, 138, 54, 0.56);
  width: min(1180px, 100%);
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1.18fr) minmax(230px, 0.94fr) minmax(0, 1.23fr) 42px;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "left festival lights church right"
    "left conversation message trust right"
    "left community community trust right"
    ". footer footer footer .";
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--collage-line);
  background: rgba(255, 255, 255, 0.3);
  color: var(--collage-ink);
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
}

.collage .tile {
  margin: 0;
  overflow: hidden;
  background: #e8e1d5;
  min-height: 0;
}

.collage .tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage .tile--festival {
  grid-area: festival;
  aspect-ratio: 375 / 505;
}

.collage .tile--lights {
  grid-area: lights;
  aspect-ratio: 300 / 397;
}

.collage .tile--church {
  grid-area: church;
  aspect-ratio: 390 / 505;
}

.collage .tile--conversation {
  grid-area: conversation;
  aspect-ratio: 375 / 405;
}

.collage .tile--trust {
  grid-area: trust;
}

.collage .tile--community {
  grid-area: community;
  aspect-ratio: 683 / 294;
}

.collage .message {
  grid-area: message;
  min-height: 100%;
  padding: clamp(22px, 4vw, 52px) clamp(18px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 242, 232, 0.96));
}

.collage .message__icon {
  width: 72px;
  color: var(--collage-gold);
  margin-bottom: 22px;
}

.collage .message__title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  color: var(--collage-ink);
}

.collage .message__script {
  margin: 2px 0 22px;
  color: var(--collage-gold);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-style: italic;
}

.collage .message__ornament {
  width: 84px;
  height: 1px;
  background: var(--collage-gold);
  position: relative;
  margin-bottom: 26px;
}

.collage .message__ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--collage-paper);
  border: 1px solid var(--collage-gold);
}

.collage .message__text {
  margin: 0;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.35;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.collage .heart {
  color: var(--collage-gold);
  font-size: 2.2rem;
  margin-top: 28px;
}

.collage .side-label {
  margin: 0;
  border: 1px solid var(--collage-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #6c5a34;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
}

.collage .side-label span {
  color: var(--collage-gold);
}

.collage .side-label--left {
  grid-area: left;
}

.collage .side-label--right {
  grid-area: right;
  transform: none;
}

.collage .footer-claim {
  grid-area: footer;
  margin: 8px 0 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(0.8rem, 1.6vw, 1.15rem);
  color: #5d5037;
}

@media (max-width: 800px) {
  .collage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "message message"
      "festival church"
      "lights conversation"
      "trust trust"
      "community community"
      "footer footer";
    border-inline: 0;
  }

  .collage .side-label {
    display: none;
  }

  .collage .tile--trust {
    aspect-ratio: 390 / 707;
  }

  .collage .message {
    min-height: 420px;
  }
}

@media (max-width: 520px) {
  .collage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "message"
      "festival"
      "church"
      "lights"
      "conversation"
      "trust"
      "community"
      "footer";
  }

  .collage .tile--festival,
  .collage .tile--lights,
  .collage .tile--church,
  .collage .tile--conversation,
  .collage .tile--community,
  .collage .tile--trust {
    aspect-ratio: auto;
  }

  .collage .tile img {
    height: auto;
  }

  .collage .footer-claim {
    letter-spacing: 0.18em;
    line-height: 1.5;
  }
}