/* The native language menu uses the current navigation surface. */
.site-language {
  box-sizing:border-box; min-height:38px; max-width:8.5em; margin:0;
  padding:4px 8px; border:1px solid #ffffff55; border-radius:10px;
  background:#171717; color:#f7f7f5; font:600 14px/1.4 system-ui,sans-serif; cursor:pointer;
}
.site-language:focus-visible { outline:2px solid #ff4b33; outline-offset:3px }
.top .site-language { flex:none }
@media(min-width:901px) and (max-width:1180px) {
  .site-navigation:has(.site-language) { padding-inline:2%;gap:10px }
  .site-navigation:has(.site-language) .site-links { gap:10px }
  .site-navigation:has(.site-language) .site-wordmark { max-width:17vw }
}
@media(max-width:900px) {
  .site-links .site-language { margin-top:12px; min-height:44px }
  .top:has(.site-language) { flex-wrap:wrap;gap:8px 12px }
}
/* German headlines use image masks which contain the original lettering.
   Textured live glyphs let the other scripts keep their own letter shapes. */
html:is([lang=en],[lang=ar]) :is(.title-paint,.headline-paint,[data-paint]) {
  width:auto!important; -webkit-text-fill-color:currentColor!important;
  -webkit-mask-image:url("letter-grain.svg"); mask-image:url("letter-grain.svg");
  mask-size:76px 54px; mask-repeat:repeat;
}
html:is([lang=en],[lang=ar]) :is(.title-paint,.headline-paint,[data-paint])::after { content:none!important }
html[dir=rtl] :is(h1,h2,h3,h4,p,button,summary,label,a,strong,em,span,input,textarea,li,select) {
  font-family:system-ui,"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:normal!important; text-transform:none;
}
html[dir=rtl] :is(h1,h2,h3) {line-height:1.3}
html[dir=rtl] :is(.heading-window,.heading-rise,.headline-line) {line-height:inherit}
html[dir=rtl] :is(.image-stream,.viewport:has(.stage .device),.service .preview img,.wordmark-stage) {direction:ltr}
html[dir=rtl] .services-submenu {left:auto;right:-12px}
html[dir=rtl] .nav-concepts ul {margin-inline:14px 0;padding-inline:12px 0;border-left:0;border-inline-start:1px solid #ffffff30}
html[dir=rtl] :is(.branch-back,.gallery-back,.hero-cta) svg {transform:scaleX(-1)}
html[dir=rtl] input[type=email] {direction:ltr;text-align:end}
html[dir=rtl] [data-heading-motion] :is(.headline-outline,.outline,.title-outline,.idea) {-webkit-text-stroke-width:.022em}
html[dir=rtl] .service-page h1,html[dir=rtl] #service-content h1 {font-size:clamp(32px,5.8vw,94px)}
html[dir=rtl] h1 .title-opening {white-space:normal}
html[dir=rtl] .branch-gallery h2,html[dir=rtl].branch-gallery .copy h2 {font-size:clamp(28px,4.8vw,72px)}
html[dir=rtl] .gallery-hero h1 {font-size:clamp(38px,6.3vw,108px);line-height:1.22}
html[dir=rtl] .service .title {line-height:1.32}
html[dir=rtl] .field :is(input,textarea) {text-align:start}
@media(max-width:700px) {
  html[dir=rtl] h1[data-heading-motion] {font-size:clamp(27px,8vw,52px);line-height:1.3}
  html[dir=rtl] .gallery-services {font-size:clamp(17px,4.7vw,31px);line-height:1.5}
  html[dir=rtl] .site-navigation {left:18px;right:auto}
  html[dir=rtl] .site-links {left:18px;right:auto}
}


html[dir=rtl] input[type=email], html[dir=rtl] a[href^="mailto:"] {direction:ltr;unicode-bidi:isolate}
html[dir=rtl].branch-gallery .gallery-back {margin-inline:auto 0}
@media(max-width:900px) {
  html[dir=rtl] .site-navigation,html[dir=rtl] .site-links {left:18px;right:auto}
  html[dir=rtl].branch-gallery .sticky>header {padding-inline:0 120px}
}
@media(max-width:760px) {
  html:is([lang=en],[lang=ar]).branch-gallery .scene-content {grid-template-columns:minmax(0,1fr)}
  html:is([lang=en],[lang=ar]).branch-gallery :is(.copy,.text-column,.visual-column,.copies) {min-width:0}
  html:is([lang=en],[lang=ar]).branch-gallery .title-opening {white-space:normal;max-width:100%}
  html[dir=rtl] #hero-title {font-size:clamp(40px,12vw,78px);line-height:1.18}
  html[dir=rtl] #hero-title .headline-outline {-webkit-text-stroke-width:.033em}
}
@media(max-width:520px) {
  html:is([lang=en],[lang=ar]) #inhalt dl {display:block}
  html:is([lang=en],[lang=ar]) #inhalt dd+dt {margin-block-start:.75em}
}