/* ============================================================
   Jugendwerk — content page.
   Ported from the mockup. The chrome, container,
   breadcrumb, .section-h, .split (Kontakt) and .credit come from design.css; this file
   adds only the page-specific pieces: the lead title, the prose column, the inline hero
   image, the photo gallery and the Kontakt sizing.
   ============================================================ */

/* Text and the inline photo share the content column; only the gallery runs the full
   container width (XD: text/photo 115..595, gallery 115..845). */
.lead h1{font-size:var(--fs-h1);line-height:1.09;margin:.5rem 0 40px;max-width:var(--content-col)}
.prose{max-width:var(--content-col);color:var(--ink2);line-height:var(--lh-lead)}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.heroimg{margin:36px 0 44px;max-width:var(--content-col)}
.heroimg img{width:100%;height:427px;object-fit:cover}  /* XD 480x285 render = 720x427 */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin:39px 0 0}
.gallery img{width:100%;height:227px;object-fit:cover}  /* XD 230x151 render = 345x227 */
.gallery + .prose{margin-top:50px}

/* Kontakt teaser: the shared split component, sized to this page's artboard
   (XD: photo 480x284, red box 307x199 -> 720x426 and 460x298). */
.kontakt .split{min-height:426px}
.kontakt .split__img{width:var(--content-col)}
.kontakt .split__img img{height:426px}
.kontakt .split__box{min-height:298px}

@media(max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .heroimg img{height:220px}
  .gallery img{height:150px}
  .kontakt .split{min-height:0}
  .kontakt .split__img{width:100%}
  .kontakt .split__img img{height:220px}
  .kontakt .split__box{position:static;transform:none;width:auto;min-height:0;padding:2rem 1.6rem}
}