/* Responsive – central place for tablet/mobile rules */
@media (max-width:1024px){
  .tpe-project{--tpe-gap:30px}
  .tpe-project__title{font-size:30px}
  .tpe-project__eyebrow{letter-spacing:.25em}
  .tpe-lightbox__dialog{grid-template-columns:56px minmax(0,1fr) 56px}
}

/* Ab Tablet/Handy: Bilder IMMER zuerst, danach Text. */
@media (max-width:767px){
  .tpe-project{
    --tpe-mobile-bleed:10px;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
    width:100%!important;
  }

  .tpe-layout-01 .tpe-project__media,
  .tpe-layout-02 .tpe-project__media{
    grid-column:1!important;
    grid-row:1!important;
    /* Elementor/Spalten haben häufig rund 10 px Innenabstand.
       Die Bilder dürfen darüber hinaus bis an den sichtbaren Rand laufen. */
    width:calc(100% + (var(--tpe-mobile-bleed) * 2))!important;
    margin-left:calc(var(--tpe-mobile-bleed) * -1)!important;
    margin-right:calc(var(--tpe-mobile-bleed) * -1)!important;
  }

  .tpe-layout-01 .tpe-project__text,
  .tpe-layout-02 .tpe-project__text{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    /* Text bleibt bewusst innerhalb des normalen Elementor-Innenabstands. */
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Zwei Bilder: zusammen volle Breite, dazwischen ca. 4 % weißer Streifen. */
  .tpe-project__media{
    grid-template-columns:48% 48%!important;
    justify-content:space-between!important;
    column-gap:0!important;
    row-gap:0!important;
    align-items:stretch;
  }

  /* Ein Bild: volle Breite und quer. */
  .tpe-project__media--1{grid-template-columns:1fr!important}
  .tpe-project__media--1 .tpe-project__teaser{width:100%;aspect-ratio:4/3}
  .tpe-single-wide .tpe-project__media--1 .tpe-project__teaser{aspect-ratio:16/9}
  .tpe-single-natural .tpe-project__media--1 .tpe-project__teaser{aspect-ratio:auto}
  .tpe-single-natural .tpe-project__media--1 .tpe-project__teaser img{height:auto}

  .tpe-project__eyebrow{margin-bottom:16px}
  .tpe-project__title{font-size:27px}
  .tpe-project__description{margin-bottom:20px}
  .tpe-nav{padding:10px 0}

  .tpe-lightbox__dialog{grid-template-columns:42px minmax(0,1fr) 42px;grid-template-rows:54px minmax(0,1fr) auto}
  .tpe-lightbox__topbar{grid-template-columns:1fr auto 42px;padding:7px 8px;gap:8px}
  .tpe-lightbox__title{font-size:11px}
  .tpe-lightbox__figure{padding:6px 0 10px}
  .tpe-lightbox__prev,.tpe-lightbox__next{font-size:42px}
  .tpe-lightbox__thumb{width:46px;height:46px}
  .tpe-lightbox__thumbs{padding:8px 8px 10px}
  .tpe-lightbox__caption{font-size:14px;font-weight:600;opacity:1;padding:7px 10px;margin-top:8px;background:transparent;border-radius:0}
}

/* Sehr niedrige Browserfenster: Chrome der Galerie verkleinern, Bild + Text bleiben komplett sichtbar. */
@media (max-height:520px){
  .tpe-lightbox__dialog{grid-template-rows:42px minmax(0,1fr) auto}
  .tpe-lightbox__topbar{padding:4px 10px}
  .tpe-lightbox__figure{padding:4px 8px}
  .tpe-lightbox__caption{margin-top:4px;padding:3px 8px;font-size:12px;line-height:1.2}
  .tpe-lightbox__thumbs{padding:4px 8px 6px}
  .tpe-lightbox__thumb{width:38px;height:38px}
}