a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,input,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,
strike,strong,sub,sup,table,tbody,td,textarea,tfoot,th,thead,tr,tt,ul,var {margin:0; padding:0; border:0; outline:0; font-family:plantin,serif; letter-spacing:0; }
:focus { outline:0; } ol,ul{list-style:none; } blockquote:after,blockquote:before,q:after,q:before {content:""; } blockquote,q{quotes:"" ""}
html { overflow-x:hidden; font-size:100%; } * { font-variant-ligatures: none; } * { -webkit-font-feature-settings: "liga" 0, "dlig" 0; font-feature-settings: "liga" 0, "dlig" 0; } * {	-webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures; } html{overflow:-moz-scrollbars-vertical;overflow-y:scroll}
html, body { margin:0; padding:0; min-height:100%; width:100%; position:relative; } body { background:#E6E7E8 } @-moz-document url-prefix() { body { font-weight: lighter !important;  }}
button, input { -webkit-appearance:none; border-radius:0; outline:none; appearance:none; }
* { -webkit-font-smoothing: antialiased; font-synthesis: none !important; }

:root {
    --main-color: #52c5d8;
    --main-color-alt: #52c5d8;
}

::selection {
    background: var(--main-color);
    color: #000;
    text-shadow: none
}

html, body {
    background: #E6E7E8;
}


@font-face {
    font-family: 'DINLight';
    src: url('../fonts/DIN Next LT Arabic Light.ttf') format('truetype'),url('../fonts/DIN Next LT Arabic Light.woff') format('woff'),url('../fonts/DIN Next LT Arabic Light.woff2') format('woff2'),url('../fonts/DIN Next LT Arabic Light.otf') format('otf'),url('../fonts/DIN Next LT Arabic Light.svg') format('svg'),url('../fonts/DIN Next LT Arabic Light.eot') format('eot')
}

@font-face {
    font-family: 'DINBold';
    src: url('../fonts/DIN Next LT Arabic Bold.ttf') format('truetype'), url('../fonts/DIN Next LT Arabic Bold.woff') format('woff'), url('../fonts/DIN Next LT Arabic Bold.woff2') format('woff2'), url('../fonts/DIN Next LT Arabic Bold.otf') format('otf'), url('../fonts/DIN Next LT Arabic Bold.svg') format('svg'), url('../fonts/DIN Next LT Arabic Bold.eot') format('eot')
}


video:focus { outline:none; }
.mobile-menu { display:none; }

.p50 { padding-top:50px !important; padding-bottom:50px !important; }
.p100 { padding-top:100px !important; padding-bottom:100px !important; }
.p150 { padding-top:150px !important; padding-bottom:150px !important; }
.pb30 { padding-bottom:30px; }
.pb50 { padding-bottom:50px !important; }
.pb100 { padding-bottom:100px !important; }
.pb150 { padding-bottom:150px !important; }
.pt50 { padding-top:50px !important; }
.pt100 { padding-top:100px !important; }
.pt150 { padding-top:150px !important; }

.reset { padding:0 !important; padding-left:0 !important; padding-right:0 !important; }
.aligncenter { margin-left:auto; margin-right:auto; }

section { padding-top:50px; padding-left:7vw !important; padding-right:7vw !important; margin-left:0 !important; margin-right:0 !important; }
section:not(.full)  { padding-bottom:100px; }
section.full { max-width:100%; margin:0 auto !important; }

.vc_row { margin-left:0 !important; margin-right:0 !important; }
.vc_column_container > .vc_column-inner { padding-left:0 !important; padding-right:0 !important; }
.vc_row.vc_column-gap-30 { margin-left:-15px !important; margin-right:-15px !important; }
.vc_row.vc_column-gap-20 { margin-left:-10px !important; margin-right:-10px !important; }
.vc_row.vc_column-gap-10 { margin-left:-5px !important; margin-right:-5px !important; }
.vc_row.vc_column-gap-5 { margin-left:0px !important; margin-right:0px !important; }

header { background:#e8e8e8; padding:20px 50px; box-sizing:border-box; position:fixed; top:0; left:0; width:100%; z-index:10; }
header .header-top-inner { display:grid; grid-template-columns:80px 1fr 150px; }
header .brand a.wbcon-logo-link { width:65px; display:block; }
header .brand a.wbcon-logo-link img { width:100%; height:auto; display:block; }
header .menu-container { align-self:center; padding-left:40px; }
header .menu-container ul { display:block; }
header .menu-container ul li { display:inline-block; margin:0 15px; }
header .menu-container ul li a { text-decoration:none; color:#000; font:500 14pt 'urw-din',sans-serif; letter-spacing:0.1em; display:block; position:relative; }
header .menu-container ul li a:hover::after { display:block; bottom:-6px; height:2px; width:100%; background:#000; content:""; position:absolute; }
header .top-meta { align-self: center; }

.btn-white  { text-transform:uppercase; display:inline-block; padding:13px 20px 14px; background-color:#fff; border:1px solid #fff; border-radius:37px; font:700 19px/1em 'urw-din',sans-serif; text-decoration:none; color:#000; letter-spacing:1pt; cursor:pointer; }
.btn-white:hover  { border-color:#000; }
.contact-btn  { display:inline-block; padding:13px 20px 14px;  border:1px solid #000; border-radius:37px; font:300 19px/1em 'urw-din',sans-serif; text-decoration:none; color:#000; letter-spacing:1pt; cursor:pointer; margin-top:40px; }
.contact-btn:hover  { border-color:#000; background-color:#fff; border:1px solid #fff }

.hero { position:relative; }

.vc_row.vc_column-gap-35 { margin-left:-50px !important; margin-right:-50px !important; }
.vc_row.vc_column-gap-35>.vc_column_container { padding:0 50px !important; }

h2 { font:700 72px/.9em 'urw-din',sans-serif; color:#000; }
h3 { font:700 60px/1.5em 'urw-din',sans-serif; color:#000; margin-bottom:0.5em; }
.start-block h2 { margin:40px 0; }
p { font:300 22px/1.75em 'urw-din',sans-serif; color:#000; margin-bottom:1.8em; }
p  > a { font:inherit; color:inherit; text-decoration:underline; }
p strong { font:inherit; font-weight:700; }
p:last-child { margin-bottom:0em; }

.section-head { margin-bottom:0px; }

.intro-text-container { padding-top:50px; padding-bottom:50px; }
.intro-text h2 { color:#fff; font:700 60px/1em 'urw-din',sans-serif; margin-bottom:2em !important; }
.intro-text h3 { color:#fff; font:500 24px/1.5em 'urw-din',sans-serif; text-transform:uppercase; }
.intro-text p { color:#fff; font:300 22px/1.75em 'urw-din',sans-serif; }

.speech-bubble { position:absolute; width:600px; height:341px; bottom:50px; z-index:2; right:7vw; background:url(/wp-content/uploads/2024/12/sprechblase_wbcon.png) no-repeat top left / contain; padding:35px; box-sizing:border-box; transition: opacity 500ms ease; }
.speech-bubble.hidden { opacity:0; }
.speech-bubble .employee .wpb_single_image { margin-bottom:5px !important; }
.speech-bubble .employee img { width:135px; height:auto; }
.speech-bubble > div > div > div { display:grid; grid-template-columns:160px 1fr; }
.speech-bubble > div > div > div > div { align-self:normal; }
.speech-bubble .employee-text { padding-left:10px; }
.speech-bubble .employee-text p { font:400 14px/1.75em 'urw-din',sans-serif; color:#000; letter-spacing:0.1em; }
.speech-bubble .employee-name p { font:500 13px/1.75em 'urw-din',sans-serif; color:#000; letter-spacing:0.1em; }

.projects-section { border:1px solid #000; border-width:1px 0; padding:0 !important; }
.projects-section .project > div > div > div { display:grid; grid-template-columns:50% 50%; }
.projects-section .project:nth-child(even) > div > div > div > div:first-child { order:2 }
.project .vc_figure { padding-top:100%; position:relative; display:block !important; }
.project .vc_figure > .vc_single_image-wrapper { position:absolute; top:0; left:0; width:100%; height:100%; }
.project .vc_figure > .vc_single_image-wrapper img { width:100%; height:100%; object-fit:cover; }
.project .wpb_text_column { padding:7vw; }
.project .wpb_text_column, .project .wpb_single_image { margin-bottom:0 !important; }
.project h3 { line-height:1em; }
.project p { font-weight:200 !important; font-size:20px; }
.project ul { margin-top:40px; }
.project ul li { border-bottom:1px solid #000; position:relative; font:200 18px/1.75em 'urw-din',sans-serif; color:#000; padding:5px 0 5px 50%; }
.project ul li:first-child { border-top:1px solid #000; }
.project ul li::after { content:""; display:table; clear:both; }
.project ul li em { display:block; left:0; position:absolute; font:normal 200 18px/1.75em 'urw-din',sans-serif; text-transform:uppercase; }

.job-listings ul li { font:normal 200 34px/1.75em 'urw-din',sans-serif; border-bottom:1px solid #000; padding:13px 0; }
.job-listings ul li:first-child { border-top:1px solid #000; }

.full-image .wpb_single_image { margin-bottom:0 !important }
.full-image .wpb_single_image * { display:block !important; width:100% !important; min-width:100%; max-width:100%; }

footer { margin-top:0px; }
.footer-top { background:#161627; padding:50px 7vw; }
.footer-top .wp-block-columns { display:grid; grid-template-columns:160px 1fr 1fr 1fr 1fr; }
.footer-top .wp-block-columns > div p { color:#fff; font:normal 200 18px/1.75em 'urw-din',sans-serif; }
.footer-top .wp-block-columns a { color:#fff; font:normal 200 18px/1.75em 'urw-din',sans-serif; text-decoration:none; }
.footer-top .wp-block-columns a:hover { text-decoration:underline; }
.footer-top .wp-block-image { width:90px; height:auto; }

.menu-metanavigation-container ul { display:block; }
.menu-metanavigation-container ul li { display:inline-block; margin-right:20px; }
.menu-metanavigation-container ul li a { text-decoration:none; color:#808080; font:400 16px/1.3em 'Helvetica Neue',sans-serif;  }

@media (max-width: 1600px){
    h2 { font-size:64px; }
    h3 { font-size:52px; }
    .intro-text h3 { font-size:24px; }

    section { padding-left:6vw !important; padding-right:6vw !important; }
    .speech-bubble { right:6vw; }
    .footer-top { padding:50px 6vw; }
    .project .wpb_text_column { padding:6vw; }
    .project .vc_figure { padding-top:120%; }
}

@media (max-width: 1500px){
    .speech-bubble { transform:scale(.9); }
}

@media (max-width: 1280px){
    section { padding-left:4vw !important; padding-right:4vw !important; }
    .speech-bubble { right:2vw; }
    .footer-top { padding:50px 4vw; }
    .project .wpb_text_column { padding:4vw; }
    .project .vc_figure { padding-top:120%; }

    .intro-text h2, h2 { font-size:54px; }
    h3 { font-size:42px; }
    p { font-size:18px; }
    .intro-text p { font-size:18px; }
    .intro-text h3 { font-size:24px; }
    .project p { font-size:18px; }   
    .job-listings ul li { font-size:20px; } 
}


@media (max-width: 1100px){
    #leistung { justify-content:flex-end; padding-bottom:220px; }
    .speech-bubble { position:absolute; bottom:40px; transform:scale(.7); transform-origin:bottom right; right:40px !important; }
    .project ul li em, .project ul li { font-size:16px; }

}

@media (max-width: 1023px){
    header { padding:15px 4vw; }
    header .brand a.wbcon-logo-link { width:50px; }
    .hero { padding-top:100px !important; position:relative; }
    section#leistung::before { content:""; display:block; top:0; left:0; right:0; bottom:0; background:rgb(0,0,0,.3); position:absolute; }
    .top-meta .btn-white { display:none; }
    .intro-text h2, h2 { font-size:30px; }
    h3 { font-size:22px; }
    p, .intro-text p { font-size:16px; }
    .project h3 { font-size:30px; margin:30px 0; }
    .vc_row.vc_column-gap-35>.vc_column_container { padding:0 30px !important; }    
    .projects-section .project > div > div > div { display:grid; grid-template-columns:100%; }
    .projects-section .project > div > div > div > div:first-child { order:2; padding-bottom:200px; }
    .project .vc_figure { padding-top:100%; }
    .project .vc_figure > .vc_single_image-wrapper img { object-position:bottom; }
    .vc_row.vc_column-gap-35>.vc_column_container { padding:0 !important; }
     body .pvw { display:block; width:100%; box-sizing: border-box; padding-left:0 !important; padding-right:0 !important; margin:0 !important; }
     .vc_row.vc_column-gap-35 { margin-left:0 !important; margin-right:0 !important; }
    .pvw > div { display:block; width:100%;  }
    .pvw > div h3 { text-align:left !important; }
    .pvw > div p { text-align:left !important; }
    .pt200 { padding-top:100px !important; }
    .pb200 { padding-bottom:100px !important; }
    .footer-top .wp-block-columns { grid-template-columns:60% 40%; grid-template-rows: auto auto; gap: 10px; }
    .footer-top .wp-block-columns > div { margin-bottom:20px ; }
    .footer-top .wp-block-columns > div:first-child { grid-column: span 2; margin-bottom:20px; }
    .footer-top .wp-block-columns > div p, .footer-top .wp-block-columns > div a  { font-size:14px; }
    .contact-btn, .job-listings ul li { font-size:18px; }
    .project ul li { padding-left:45%; }
    #menu-mainmenu { display:none; }
    .speech-bubble { transform:scale(.6); }
    .menu-btn-container { width:50px; height:30px; margin:0 0 0 auto; }
    .menu-btn-container a { display:block; position:relative; width:50px; height:30px; }
    .menu-btn-container a span { display:block; width:100%; height:4px; background:#000; position:absolute; }
    .menu-btn-container a span:nth-child(1) { top:0; }
    .menu-btn-container a span:nth-child(2) { top:13px; }
    .menu-btn-container a span:nth-child(3) { top:26px; }

    .menu-btn-container.open a span:nth-child(3) { display:none; }
    
    .menu-btn-container.open a span:nth-child(1), .menu-btn-container.open a span:nth-child(2) { top:50%; transform:translateY(-50%;) }
    .menu-btn-container.open a span:nth-child(1) { transform:translateY(-50%) rotate(-45deg) }
    .menu-btn-container.open a span:nth-child(2) { transform:translateY(-50%) rotate(45deg) }

    .mobile-menu { top:78px; bottom:0; left:00px; right:0; background:#e8e8e8; position:fixed; z-index:10; }
    .mobile-menu > div { padding:8vw 4vw; }
    .mobile-menu ul { margin-bottom:50px; }
    .mobile-menu ul li a { font:normal 500 32px/1.75em 'urw-din',sans-serif; color:#000; text-decoration:none; }
}