/* Zusatzstile für die Projekt-Detailseite (wiederverwendbare Vorlage) */

.projekt-head {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--edge) clamp(24px, 4vw, 48px);
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--c-sage);
}

.projekt-head h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--c-forest);
}

.projekt-meta {
  display: flex;
  gap: clamp(24px, 6vw, 64px);
  margin: 0;
}

.projekt-meta dt {
  color: var(--c-sage);
  margin-bottom: 6px;
}

.projekt-meta dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-ink);
}

.projekt-hero {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(40px, 7vw, 96px);
}
/* Deutlich kleiner als vorher (war fast bildschirmfüllend) - gleiche
   Größenordnung wie das Video ganz vorne auf der Startseite. */
.projekt-hero .img-block {
  width: min(66vw, 900px);
  aspect-ratio: 4/3;
}

.projekt-text {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(48px, 8vw, 96px);
}

.projekt-text p {
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--c-forest);
  margin: 0 0 16px;
}

/* Bilder, die direkt im Editor-Fließtext eines Projekts stehen (statt in
   einem eigenen Galerie-Block) - zentriert und auf eine angenehme Breite
   begrenzt, statt über die volle Breite zu laufen. */
.projekt-text figure.wp-block-image,
.projekt-text .wp-block-image {
  max-width: 640px;
  margin: 24px auto;
  border-radius: 2px;
  overflow: hidden;
}
.projekt-text .wp-block-image img { display: block; width: 100%; height: auto; }

.projekt-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(60px, 9vw, 120px);
}
.projekt-gallery .img-block { aspect-ratio: 3/4; }

.projekt-gallery .img-block:nth-child(3n+2) {
  transform: translateY(10%);
}

.projekt-next {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(60px, 9vw, 120px);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .projekt-meta { flex-wrap: wrap; gap: 20px 40px; }
  .projekt-hero .img-block { width: 100%; }
  .projekt-gallery { grid-template-columns: 1fr 1fr; }
  .projekt-gallery .img-block:nth-child(3n+2) { transform: none; }
}