:root{
  --ink:#121212;
  --paper:#f5f2ed;
  --white:#fff;
  --muted:#74716c;
  --accent:#ef4d28;
  --line:rgba(18,18,18,.14);
  --max:1320px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
}

img,
video{
  display:block;
  width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ========================================
   HERO
======================================== */

.hero{
  height:100svh;
  min-height:650px;
  position:relative;
  color:#fff;
  overflow:hidden;
  background:#111;
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.64) 0%,
      rgba(0,0,0,.22) 55%,
      rgba(0,0,0,.18) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.35),
      transparent 55%
    );
}


/* ========================================
   NAVIGATION
======================================== */

.nav{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  max-width:var(--max);
  margin:auto;
  padding:30px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand img{
  width:170px;
  max-height:72px;
  object-fit:contain;
  object-position:left center;
}

.nav__links{
  display:flex;
  gap:30px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.13em;
  font-weight:700;
}

.nav__links a{
  opacity:.86;
}

.nav__links a:hover{
  opacity:1;
}

.menu{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  padding:9px 13px;
}


/* ========================================
   HERO TEXT
======================================== */

.hero__content{
  position:absolute;
  z-index:3;
  left:max(
    38px,
    calc((100vw - var(--max))/2 + 38px)
  );
  bottom:10vh;
  max-width:720px;
}

.eyebrow,
.section-label,
.service__number{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

.hero h1{
  font-size:clamp(64px,9vw,132px);
  line-height:.82;
  letter-spacing:-.06em;
  margin:18px 0 28px;
}

.lead{
  font-size:clamp(18px,2vw,25px);
  max-width:660px;
  margin:0 0 30px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.button{
  display:inline-flex;
  align-items:center;
  gap:22px;
  padding:14px 20px;
  font-size:13px;
  font-weight:700;
}

.button--primary{
  background:var(--accent);
  color:#fff;
}

.button--ghost{
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
}


/* ========================================
   INTRO
======================================== */

.intro{
  max-width:var(--max);
  margin:auto;
  padding:120px 38px 110px;
  display:grid;
  grid-template-columns:.65fr 1.6fr 1fr;
  gap:50px;
  align-items:start;
}

.intro h2,
.projects h2,
.about h2,
.contact h2{
  font-size:clamp(45px,6vw,82px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0;
}

.intro > p:last-child{
  font-size:18px;
  color:#555;
  max-width:390px;
}


/* ========================================
   FILM / FOTO / MUSIK
======================================== */

.service{
  max-width:var(--max);
  margin:0 auto 120px;
  padding:0 38px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
}

.service--reverse{
  grid-template-columns:.85fr 1.15fr;
}

.service--reverse .service__image{
  order:2;
}

.service__image{
  overflow:hidden;
  background:#ddd;
}

.service__image img{
  aspect-ratio:1.18/1;
  object-fit:cover;
  transition:transform .7s ease;
}

.service:hover .service__image img{
  transform:scale(1.02);
}

.service__copy h2,
.artist__copy h2{
  font-size:clamp(40px,4.5vw,68px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:18px 0 28px;
}

.service__copy > p:not(.service__number):not(.tags),
.artist__copy > p:not(.service__number):not(.tags){
  font-size:17px;
  color:#4c4945;
}

.tags{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin:30px 0;
}

.service__copy > a,
.artist__copy > a{
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  gap:24px;
}


/* ========================================
   PROJEKTE
======================================== */

.projects{
  background:#111;
  color:#fff;
  padding:
    120px
    max(
      38px,
      calc((100vw - var(--max))/2 + 38px)
    );
}

.projects__head{
  display:grid;
  grid-template-columns:1.5fr .7fr;
  gap:60px;
  align-items:end;
  margin-bottom:65px;
}

.projects__head > p{
  color:#bbb;
  max-width:430px;
  font-size:17px;
}


/*
   DESKTOP-PROJEKTGRID

   Reihe 1: 7 + 5
   Reihe 2: 6 + 6
   Reihe 3: volle Breite
*/

.project-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:640px 320px 320px;
  gap:16px;
}

.project{
  position:relative;
  overflow:hidden;
  background:#222;
  min-width:0;
}


/* Mitbestimmungsmesse */

.project-grid > :nth-child(1){
  grid-column:1 / 8;
  grid-row:1;
}


/* Musikvideos */

.project-grid > :nth-child(2){
  grid-column:8 / 13;
  grid-row:1;
}


/* Menschen & Begegnungen */

.project-grid > :nth-child(3){
  grid-column:1 / 7;
  grid-row:2;
}


/* Mittendrin statt daneben */

.project-grid > :nth-child(4){
  grid-column:7 / 13;
  grid-row:2;
}


/* Echte Momente */

.project-grid > :nth-child(5){
  grid-column:1 / 13;
  grid-row:3;
}


.project img,
.project video{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}

.project:hover img,
.project:hover video{
  transform:scale(1.025);
}

.project::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.7),
      transparent 55%
    );
}

.project__caption{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
}

.project__caption span{
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#ddd;
}

.project__caption h3{
  font-size:25px;
  margin:4px 0 0;
}

.project__caption p{
  margin:0;
  color:#ccc;
  font-size:13px;
}

.project-link{
  display:block;
  color:inherit;
  text-decoration:none;
}


/* ========================================
   KÜNSTLER
======================================== */

.artist{
  max-width:var(--max);
  margin:0 auto 120px;
  padding:120px 38px 0;
  display:grid;

  /* Bild und Text gleich breit */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  gap:70px;
  align-items:center;
}

.artist__image{
  overflow:hidden;
  background:#ddd;
}

.artist__image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}


/* ========================================
   ÜBER UNS
======================================== */

.about{
  max-width:var(--max);
  margin:0 auto;
  padding:30px 38px 130px;
  display:grid;

  /* Bild und Text gleich breit */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  gap:70px;
  align-items:center;
}

.about__image{
  overflow:hidden;
  background:#ddd;
}

.about__image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.about__copy > p:not(.section-label){
  font-size:17px;
  color:#4c4945;
}

.about__note{
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:30px;
  font-weight:700 !important;
  color:var(--ink) !important;
}


/* ========================================
   KONTAKT
======================================== */

.contact{
  background:#e9e4dc;
  padding:
    100px
    max(
      38px,
      calc((100vw - var(--max))/2 + 38px)
    );
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:80px;
  align-items:end;
}

.contact__copy > p:first-child{
  font-size:18px;
  margin-bottom:26px;
}

.contact__mail{
  font-size:13px;
  color:#666;
  margin-top:20px;
}


/* ========================================
   FOOTER
======================================== */

footer{
  background:#111;
  color:#fff;
  padding:
    45px
    max(
      38px,
      calc((100vw - var(--max))/2 + 38px)
    );
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:center;
  gap:30px;
}

footer img{
  width:135px;
}

.footer__links{
  display:flex;
  justify-content:center;
  gap:24px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

footer > p{
  text-align:right;
  color:#999;
  font-size:12px;
}


/* ========================================
   TABLET / MOBILE
======================================== */

@media(max-width:900px){

  .nav{
    padding:22px;
  }

  .brand img{
    width:135px;
  }

  .menu{
    display:block;
  }

  .nav__links{
    display:none;
    position:absolute;
    top:78px;
    left:20px;
    right:20px;
    background:rgba(15,15,15,.96);
    padding:25px;
    flex-direction:column;
    gap:18px;
  }

  .nav__links.is-open{
    display:flex;
  }

  .hero__content{
    left:24px;
    right:24px;
    bottom:8vh;
  }

  .intro,
  .service,
  .service--reverse,
  .artist,
  .about,
  .contact{
    grid-template-columns:1fr;
    padding-left:24px;
    padding-right:24px;
    gap:35px;
  }

  .intro{
    padding-top:80px;
    padding-bottom:80px;
  }

  .intro > p:last-child{
    max-width:none;
  }

  .service,
  .artist{
    margin-bottom:80px;
  }

  .service--reverse .service__image{
    order:0;
  }

  .projects{
    padding:80px 24px;
  }

  .projects__head{
    grid-template-columns:1fr;
    gap:25px;
  }

  /*
     Auf Tablet und Handy stehen die Projekte
     wieder untereinander.
  */

  .project-grid{
    display:block;
  }

  .project{
    height:420px;
    margin-bottom:14px;
  }

  .project--video{
    height:500px;
  }

  .artist{
    padding-top:80px;
  }

  .about{
    padding-bottom:90px;
  }

  .contact{
    padding-top:75px;
    padding-bottom:75px;
  }

  footer{
    grid-template-columns:1fr;
    justify-items:start;
    padding:40px 24px;
  }

  .footer__links{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  footer > p{
    text-align:left;
  }
}


/* ========================================
   HANDY
======================================== */

@media(max-width:560px){

  .hero{
    min-height:600px;
  }

  .hero h1{
    font-size:60px;
  }

  .lead{
    font-size:17px;
  }

  .actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .intro h2,
  .projects h2,
  .about h2,
  .contact h2{
    font-size:45px;
  }

  .service__copy h2,
  .artist__copy h2{
    font-size:42px;
  }

  .service__image img{
    aspect-ratio:1/1;
  }

  .project,
  .project--video{
    height:360px;
  }
}
/* Echte Momente – größeren Bildausschnitt zeigen */
.project-grid > :nth-child(5) img{
  object-fit:cover;
  object-position:center 35%;
}