/* IQ Media Arts — Über uns / About Us only, DE + EN.
   Device typography & framing. Shared site, CTA, content and images stay unchanged.
   Loaded after the historical inline about-page overrides in each HTML head. */

.about-page .about-hero #about-main-title,
.about-page .about-vision #about-vision-title,
.about-page .about-founder #about-founder-title,
.about-page .about-qualifications #about-qualifications-title,
.about-page .about-founder .about-founder-copy h3,
.about-page .about-qualifications .about-qualification h3 {
  font-family:Impact,"Arial Narrow","Arial Black",sans-serif!important;
  font-stretch:normal!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:0!important;
  line-height:1.09!important;
}

/* Main statement: the white line stays subordinate to the red line,
   including the English reflow: BEHIND EVERY / IMAGE IS A STORY. */
.about-page .about-hero #about-main-title {
  font-size:clamp(46px,5.45vw,83px)!important;
  max-width:100%!important;
  margin:27px 0 24px!important;
  text-wrap:initial!important;
}
.about-page #about-main-title .brand-first,
.about-page #about-main-title .brand-second,
.about-page #about-vision-title .brand-first,
.about-page #about-vision-title .brand-second,
.about-page #about-founder-title .brand-first,
.about-page #about-founder-title .brand-second,
.about-page #about-qualifications-title .brand-first,
.about-page #about-qualifications-title .brand-second {
  display:block!important;
  font-family:inherit!important;
  white-space:nowrap!important;
  letter-spacing:0!important;
  line-height:1.1!important;
}
.about-page #about-main-title .brand-first {font-size:.75em!important;}
.about-page #about-main-title .brand-second {font-size:1em!important;}
.about-page .about-hero .lede {
  max-width:min(990px,100%)!important;
  white-space:normal!important;
  font-size:clamp(15px,1.3vw,19px)!important;
  line-height:1.68!important;
}
.about-page .about-intro-lead{white-space:nowrap;}

/* Film-set image stays on the left; give the writing more space and move it
   towards the right, not over the operators. */
.about-page .about-vision-grid {
  min-height:clamp(540px,49vw,740px)!important;
}
.about-page .about-vision-grid .about-production-photo img{
  object-fit:cover!important;
  object-position:35% center!important;
}
.about-page .about-vision-grid:after{
  background:linear-gradient(90deg,
    rgba(6,7,9,.04) 0%,
    rgba(6,7,9,.14) 35%,
    rgba(6,7,9,.67) 61%,
    rgba(6,7,9,.95) 100%)!important;
}
.about-page .about-vision-grid .about-vision-copy{
  box-sizing:border-box!important;
  width:min(700px,54%)!important;
  max-width:none!important;
  margin:0 0 0 auto!important;
  padding:clamp(22px,3.2vw,50px)!important;
  align-self:center!important;
  transform:translateX(clamp(5px,1vw,15px));
}
.about-page .about-vision #about-vision-title{
  font-size:clamp(38px,4vw,62px)!important;
  max-width:100%!important;
  margin:16px 0 22px!important;
}
.about-page #about-vision-title .brand-first{font-size:.75em!important;}
.about-page #about-vision-title .brand-second{font-size:1em!important;}
.about-page .about-vision-copy p{
  max-width:570px;
}

/* Keep the founder/qualifications title family identical to the first two. */
.about-page .about-founder #about-founder-title,
.about-page .about-qualifications #about-qualifications-title{
  font-size:clamp(41px,4.15vw,64px)!important;
  max-width:100%!important;
}
.about-page #about-founder-title .brand-first,
.about-page #about-qualifications-title .brand-first{font-size:.75em!important;}
.about-page #about-founder-title .brand-second,
.about-page #about-qualifications-title .brand-second{font-size:1em!important;}
.about-page .about-founder .split-head{padding-left:clamp(8px,1.6vw,25px);}
.about-page .about-founder .about-founder-copy{
  padding-left:clamp(8px,1.6vw,25px);
}
.about-page .about-founder .about-founder-copy h3{
  font-size:clamp(32px,3.1vw,52px)!important;
}
.about-page .about-qualifications .about-qualification h3{
  font-size:clamp(18px,1.65vw,24px)!important;
  line-height:1.23!important;
  letter-spacing:.005em!important;
}

/* Portrait photo: always show the full top/head. Preserve the image itself. */
.about-page .about-portrait-frame img{
  display:block!important;
  flex:0 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 81%,rgba(0,0,0,.86) 89%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 81%,rgba(0,0,0,.86) 89%,transparent 100%)!important;
}

/* Tablet orientations: balance set photograph, right-side copy and portrait. */
@media(min-width:701px) and (max-width:1100px){
  .about-page .about-vision-grid{min-height:clamp(570px,68vw,715px)!important;}
  .about-page .about-vision-grid .about-vision-copy{
    width:61%!important;
    padding:clamp(20px,2.8vw,32px)!important;
    transform:none!important;
  }
  .about-page .about-vision #about-vision-title{
    font-size:clamp(34px,4.4vw,48px)!important;
  }
  .about-page .about-vision-grid .about-production-photo img{
    object-position:31% center!important;
  }
  .about-page .about-vision-copy p{font-size:clamp(14px,1.6vw,17px)!important;}
  .about-page .about-founder #about-founder-title,
  .about-page .about-qualifications #about-qualifications-title{
    font-size:clamp(33px,4.5vw,50px)!important;
  }
  .about-page .about-portrait-frame{
    height:clamp(480px,62vw,620px)!important;
  }
}
@media(max-width:980px) and (orientation:portrait){
  .about-page .about-founder-grid,
  .about-page .about-qualifications-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(30px,5vw,52px)!important;
  }
  .about-page .about-portrait-visual{
    max-width:580px!important;
    margin-inline:auto!important;
    width:100%!important;
  }
  .about-page .about-founder .split-head,
  .about-page .about-founder .about-founder-copy{padding-left:0!important;}
}

/* Phone: avoid splitting "Wir sind IQ Media Arts." or its English equivalent.
   Make the founder/camera photo large enough to use the available screen width.
   Use an uncropped portrait at the head. */
@media(max-width:700px){
  .about-page .about-hero{min-height:450px!important;}
  .about-page .about-hero #about-main-title{
    font-size:clamp(23px,7.35vw,43px)!important;
    margin:23px 0 22px!important;
  }
  html[lang="en"] .about-page .about-hero #about-main-title{
    font-size:clamp(29px,8.6vw,48px)!important;
  }
  .about-page .about-hero .lede{
    font-size:clamp(13px,3.7vw,16px)!important;
    line-height:1.62!important;
  }
  .about-page .about-intro-lead{
    display:block;
    white-space:nowrap!important;
    margin-bottom:2px;
  }
  .about-page .about-vision-grid{
    min-height:clamp(570px,155vw,680px)!important;
  }
  .about-page .about-vision-grid .about-production-photo img{
    object-position:27% center!important;
  }
  .about-page .about-vision-grid:after{
    background:linear-gradient(180deg,
      rgba(6,7,9,.04) 0%,
      rgba(6,7,9,.13) 31%,
      rgba(6,7,9,.62) 60%,
      rgba(6,7,9,.97) 100%)!important;
  }
  .about-page .about-vision-grid .about-vision-copy{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:clamp(19px,5vw,28px)!important;
    align-self:end!important;
    transform:none!important;
  }
  .about-page .about-vision #about-vision-title{
    font-size:clamp(28px,7.5vw,43px)!important;
    margin:11px 0 16px!important;
  }
  .about-page .about-vision-copy p{
    font-size:clamp(13px,3.6vw,15px)!important;
    line-height:1.67!important;
  }
  .about-page .about-founder #about-founder-title,
  .about-page .about-qualifications #about-qualifications-title{
    font-size:clamp(28px,7.1vw,43px)!important;
  }
  .about-page .about-founder .split-head,
  .about-page .about-founder .about-founder-copy{padding-left:0!important;}
  .about-page .about-gimbal-frame{
    height:clamp(480px,148vw,630px)!important;
    width:100%!important;
  }
  .about-page .about-gimbal-frame img{
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  .about-page .about-portrait-frame{
    height:clamp(365px,108vw,540px)!important;
    width:100%!important;
    max-width:540px!important;
  }
  .about-page .about-portrait-visual{
    width:100%!important;
    max-width:540px!important;
    margin-inline:auto!important;
  }
}

/* Small tablet landscape: keep the photo in view and don't crop headings. */
@media(min-width:701px) and (max-width:940px) and (orientation:landscape){
  .about-page .about-vision-grid .about-vision-copy{width:63%!important;}
  .about-page .about-vision #about-vision-title{font-size:clamp(31px,4.2vw,39px)!important;}
}


/* User review 2026-10-28: one browser-delivered display face on laptops,
   every tablet brand and phones; same DE and EN. Do not apply to degrees. */
html body.about-page .about-hero #about-main-title,
html body.about-page .about-vision #about-vision-title,
html body.about-page .about-founder #about-founder-title,
html body.about-page .about-qualifications #about-qualifications-title,
html body.about-page .about-founder .about-founder-copy h3 {
  font-family:"Anton",Impact,"Arial Narrow",sans-serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-synthesis:none!important;
  font-stretch:normal!important;
  letter-spacing:0!important;
}

/* Restore all three qualification/course titles to the original Arial-style
   typeface and sentence case; do not use the Hero display font here. */
html body.about-page .about-qualifications .about-qualification h3{
  font-family:"Arimo",Arial,Helvetica,sans-serif!important;
  font-size:clamp(17px,1.5vw,21px)!important;
  font-weight:700!important;
  font-style:normal!important;
  font-synthesis:none!important;
  line-height:1.35!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
}

/* Laptop: English opening sentence belongs to ONE line, not two.
   Preserve the sentence text and use a fitted size, never an overflow hack. */
@media(min-width:1101px){
 html[lang="en"] body.about-page .about-hero .lede{
   max-width:none!important;
   white-space:nowrap!important;
   font-size:clamp(11px,.93vw,15px)!important;
   letter-spacing:0!important;
 }
}

/* On large displays place the editorial text in the far-right third.
   Protect the actors/crew and preserve the approved photographic framing. */
@media(min-width:1101px){
 html body.about-page .about-vision-grid .about-vision-copy{
   box-sizing:border-box!important;
   width:min(555px,37%)!important;
   min-width:0!important;
   max-width:none!important;
   margin-left:auto!important;
   margin-right:0!important;
   padding:clamp(16px,1.7vw,30px)!important;
   transform:none!important;
   align-self:center!important;
 }
 html body.about-page .about-vision #about-vision-title{
   font-size:clamp(33px,2.9vw,49px)!important;
   max-width:100%!important;
 }
 html body.about-page .about-vision-copy p{
   font-size:clamp(13px,1vw,16px)!important;
   line-height:1.6!important;
 }
}

/* Tablet landscape: keep text right, narrower than the original 61% box. */
@media(min-width:701px) and (max-width:1100px) and (orientation:landscape){
 html body.about-page .about-vision-grid .about-vision-copy{
   width:53%!important;
   margin-left:auto!important;
   margin-right:0!important;
   padding:clamp(18px,2.4vw,28px)!important;
   transform:none!important;
   align-self:center!important;
 }
 html body.about-page .about-vision #about-vision-title{
   font-size:clamp(29px,3.65vw,41px)!important;
 }
}

/* Tablet portrait: compose the text at lower right, away from faces,
   with a dedicated bottom/side gradient and no photo replacement. */
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait){
 html body.about-page .about-vision-grid{
   align-items:end!important;
 }
 html body.about-page .about-vision-grid:after{
   background:linear-gradient(180deg,
     rgba(6,7,9,.02) 0%,
     rgba(6,7,9,.08) 30%,
     rgba(6,7,9,.55) 65%,
     rgba(6,7,9,.92) 100%)!important;
 }
 html body.about-page .about-vision-grid .about-vision-copy{
   width:min(590px,77%)!important;
   margin-left:auto!important;
   margin-right:0!important;
   padding:clamp(20px,3vw,35px)!important;
   transform:none!important;
   align-self:end!important;
 }
}

/* Mobile text retains the original image-safe bottom position. Adjust the
   condensed face to fit single-line red and white hero title segments. */
@media(max-width:700px){
 html[lang="de"] body.about-page #about-main-title{
   font-size:clamp(21px,6.25vw,36px)!important;
 }
 html[lang="en"] body.about-page #about-main-title{
   font-size:clamp(26px,7.5vw,43px)!important;
 }
 html body.about-page #about-main-title .brand-first{font-size:.75em!important;}
 html body.about-page #about-main-title .brand-second{font-size:1em!important;}
}