/* project.css  -----------------------------------------------------------------*/

/* Allgemeine CSS  -----------------------------------------------------------*/
.project-section{
  display: grid;
}

.comment{
  font-style: italic;
}

.comment-arrow{
  font-style: normal;
}

/* BRP1 Smartphones  ---------------------------------------------------------*/
@media screen and (max-width: 991px ) {
  .project-title{
    grid-column: 1 / span 5;
    grid-row-start: 1;
  }

  .project-section{
    grid-column: 1 / span 7;
    gap: 5.13vw 5.13vw;
    grid-template-columns: repeat(7, 8.72vw);
    grid-auto-rows: 17.95vw;
  }

  .project-text-container{
    grid-column: 2 / span 5;
    grid-row-start: 2;
  }

  .one-column-paragraph{
    grid-column: 2 / span 5;
    grid-row-start: 2;
  }

  .comment, .comment2{
    grid-column: 2 / span 5;
  }

  .teaser{
    grid-row-start: 1;
  }

  .project-teaser-img{
    grid-column: 2 / span 5;
    grid-row-start: 7  ;
    width: 64.12vw;
  }

  .project-headline{
    grid-column: 1 / span 3;
  }

  .ausblick, .ausblick2, .ausblick3, .ausblick4{
    display: none;
  }

  .mobile-ausblick{
    grid-column: 2 / span 5;
  }

  .next-project{
    grid-column: 5 / span 3;
    grid-row-start: 9;
  }

  .testlink{
    grid-column: 2 / span 4;
    grid-row-start: 8;
  }

  .prev-project{
    grid-column: 1 / span 4;
    grid-row-start: 9;
  }

/* ARGallery */
  .arg-c1{
    grid-row-start: 10;
  }

  .arg-konzept{
    grid-row-start: 12;
  }

  .arg-konzept-img{
    grid-column: 1 / span 7;
    width: 91.82vw;
    grid-row-start: 6;
  }

  .arg-icon{
    grid-row-start: 21;
  }

  .arg-icon-img{
    grid-column: 2 / span 5;
    width: 64.12vw;
    grid-row-start: 5;
  }

  .arg-c2{
    grid-row-start: 8;
  }

  .arg-umsetzung{
    grid-row-start: 30;
  }

  .arg-final-img{
    grid-column: 2 / span 5;
    grid-row-start: 6;
    width: 64.12vw;
  }

  .arg-c3{
    grid-row-start: 13;
  }

  .arg-c4{
    grid-row-start: 14;
  }

  .arg-ausblick{
    grid-row-start: 45;
  }

  .arg-footer{
    grid-row-start: 54;
  }

/* Twitter Insight */
  .ti-firsttweet-img{
    grid-column: 1 / span 7;
    grid-row-start: 6;
    width: 91.82vw;
  }

  .ti-logo{
    grid-row-start: 21;
  }

  .ti-logo-img{
    grid-column: 1 / span 7;
    grid-row-start: 5;
    width: 91.82vw;
  }

  .ti-umsetzung{
    grid-row-start: 30;
  }

  .ti-final-img{
    grid-column: 1 / span 7;
    grid-row-start: 9;
    width: 91.82vw;
  }

  .ti-ausblick{
    grid-row-start: 42;
  }

  .ti-footer{
    grid-row-start: 51;
  }

/* Kosmos */
  .k-test-img, .k-umsetzung-img{
    grid-column: 1 / span 7;
    grid-row-start: 9;
    width: 91.82vw;
  }

  .k-c2{
    grid-row-start: 11;
  }

  .k-konzept{
    grid-row-start: 13;
  }

  .k-umsetzung{
    grid-row-start: 25;
  }

  .k-ausblick{
    grid-row-start: 38;
  }

  .k-footer{
    grid-row-start: 47;
  }
}

/* BRP2 Tablet (Portrait)  ---------------------------------------------------*/
@media screen and (min-width: 580px) and (max-width: 991px ){
  .project-section{
    grid-column: 1 / span 8;
    gap: 2.88vw 2.88vw;
    grid-template-columns: repeat(8, 8.63vw);
    grid-auto-rows: 11.51vw;
  }

  .project-text-container{
    grid-column: 2 / span 6;
    grid-row-start: 2;
  }

  .project-paragraph{
    columns: 2;
    column-gap: 2.88vw;
  }

  .one-column-paragraph{
    grid-column: 2 / span 3;
    grid-row-start: 2;
  }

  .comment{
    grid-column: 2 / span 3;
  }

  .comment2{
    grid-column: 5 / span 3;
  }

  .project-teaser-img{
    grid-column: 3 / span 4;
    grid-row-start: 5  ;
    width: 43.16vw;
  }

  .testlink{
    grid-row-start: 5;
  }

  .next-project{
    grid-column: 7 / span 2;
    grid-row-start: 7;
  }

  .prev-project{
    grid-column: 1 / span 2;
    grid-row-start: 7;
  }

/* ARGallery */
  .arg-c1{
    grid-row-start: 9;
  }

  .arg-konzept{
    grid-row-start: 11;
  }

  .arg-konzept-img{
    grid-column: 1 / span 8;
    width: 89.2vw;
    grid-row-start: 5;
  }

  .arg-icon{
    grid-row-start: 20;
  }

  .arg-icon-img{
    grid-column: 3 / span 4;
    width: 43.16vw;
    grid-row-start: 5;
  }

  .arg-c2{
    grid-column: 5 / span 3;
    grid-row-start: 2;
  }

  .arg-umsetzung{
    grid-row-start: 28;
  }

  .arg-final-img{
    grid-column: 3 / span 4;
    grid-row-start: 5;
    width: 43.16vw;
  }

  .arg-c4{
    grid-row-start: 12;
  }

  .arg-ausblick{
    grid-row-start: 41;
  }

  .arg-footer{
    grid-row-start: 48;
  }

/* Twitter Insight */
  .ti-firsttweet-img{
    grid-column: 2 / span 6;
    grid-row-start: 5;
    width: 66.18vw;
  }

  .ti-logo{
    grid-row-start: 19;
  }

  .ti-logo-img{
    grid-column: 2 / span 6;
    grid-row-start: 4;
    width: 66.18vw;
  }

  .ti-umsetzung{
    grid-row-start: 28;
  }

  .ti-final-img{
    grid-column: 1 / span 8;
    grid-row-start: 6;
    width: 89.2vw;
  }

  .ti-ausblick{
    grid-row-start: 38;
  }

  .ti-footer{
    grid-row-start: 45;
  }

/* Kosmos */
  .k-test-img, .k-umsetzung-img{
    grid-column: 2 / span 6;
    grid-row-start: 6;
    width: 66.18vw;
  }

  .k-c2{
    grid-row-start: 9;
  }

  .k-konzept{
    grid-row-start: 11;
  }

  .k-umsetzung{
    grid-row-start: 21;
  }

  .k-ausblick{
    grid-row-start: 32;
  }

  .k-footer{
    grid-row-start: 39;
  }
}

/* BRP3 Desktop (klein)  -----------------------------------------------------*/
@media screen and (min-width: 992px) {
  .project-title{
    grid-column: 1 / span 4;
    grid-row-start: 1;
  }

  .project-section{
    grid-column: 1 / span 10;
    gap: 1.62vw 1.62vw;
    grid-template-columns: repeat(10, 7.73vw);
    grid-auto-rows: 7.29vw;
  }

  .project-text-container{
    grid-column: 1 / span 4;
    grid-row-start: 2;
  }

  .project-paragraph{
    columns: 2;
    column-gap: 1.62vw;
  }

  .one-column-paragraph{
    grid-column: 1 / span 2;
    grid-row-start: 2;
  }

  .comment{
    grid-column: 9 / span 2;
    grid-row-start: 2;
  }

  .comment2{
    grid-column: 9 / span 2;
    grid-row-start: 3;
  }

  .teaser{
    grid-row-start: 1;
  }

  .project-teaser-img{
    grid-column: 6 / span 2;
    grid-row-start: 2;
    width: 17.08vw;
  }

  .project-headline{
    grid-column: 1 / span 2;
  }

  .ausblick2{
    grid-column: 3 / span 2;
  }

  .ausblick3{
    grid-column: 5 / span 2;
  }

  .ausblick4{
    grid-column: 7 / span 2;
  }

  .mobile-ausblick{
    display: none;
  }

  .testlink{
    grid-column: 1 / span 4;
    grid-row-start: 4;
  }

  .next-project{
    grid-column: 9 / span 2;
    grid-row-start: 5;
  }

  .prev-project{
    grid-column: 1 / span 2;
    grid-row-start: 5;
  }

/* ARGallery */
  .arg-konzept{
    grid-row-start: 5;
  }

  .arg-konzept-img{
    grid-column: 6 / span 5;
    width: 45.13vw;
  }

  .arg-icon{
    grid-row-start: 9;
  }

  .arg-icon-img{
    grid-column: 4 / span 3;
    width: 26.43vw;
  }

  .arg-umsetzung{
    grid-row-start: 13;
  }

  .arg-final-img{
    grid-column: 6 / span 2;
    grid-row-start: 2;
    width: 18.7vw;
  }

  .arg-ausblick{
    grid-row-start: 19;
  }

  .arg-footer{
    grid-row-start: 24;
  }

/* Twitter Insight */
  .ti-firsttweet-img{
    grid-column: 6 / span 3;
    grid-row-start: 2;
    width: 26.43vw;
  }

  .ti-logo{
    grid-row-start: 9;
  }

  .ti-logo-img{
    grid-column: 6 / span 3;
    grid-row-start: 1;
    width: 26.43vw;
  }

  .ti-umsetzung{
    grid-row-start: 13;
  }

  .ti-final-img{
    grid-column: 5 / span 5;
    grid-row-start: 2;
    width: 45.13vw;
  }

  .ti-ausblick{
    grid-row-start: 18;
  }

  .ti-footer{
    grid-row-start: 23;
  }

/* Kosmos */
  .k-test-img, .k-umsetzung-img{
    grid-column: 5 / span 4;
    grid-row-start: 2;
    width: 35.78vw;
  }

  .k-konzept{
    grid-row-start: 5;
  }

  .k-umsetzung{
    grid-row-start: 10;
  }

  .k-ausblick{
    grid-row-start: 16;
  }

  .k-footer{
    grid-row-start: 21;
  }
}

/* BRP4 Desktop (groß): static------------------------------------------------*/
@media screen and (min-width: 1600px) {
  .project-section{
    gap: 28px 28px;
    grid-template-columns: repeat(10, 132px);
    grid-auto-rows: 126px;
  }

  .project-teaser-img{
    width: 292px;
  }

  .project-paragraph{
    column-gap: 28px;
  }

/* ARGallery */
  .arg-konzept-img{
    width: 772px;
  }

  .arg-icon-img{
    width: 452px;
  }

  .arg-final-img{
    width: 292px;
  }

/* Twitter Insight */
  .ti-firsttweet-img{
    width: 452px;
  }

  .ti-logo-img{
    width: 452px;
  }

  .ti-final-img{
    width: 772px;
  }

/* Kosmos */
  .k-test-img, .k-umsetzung-img{
    width: 612px;
  }
}