@charset "UTF-8";
.news-box-items > .urban-post-box:first-child,
.news-box-items > .urban-post-box:nth-last-child(2) {
display: none !important;
} .news-box-items > .urban-post-box:first-child + .c-spacer,
.news-box-items > .urban-post-box:nth-last-child(2) + .c-spacer {
display: none !important;
}

:root {
--text-color: #151515;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//rupp-gruppe.de/wp-content/themes/rupp/fonts/heebo/heebo-regular.woff2) format('woff2');
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//rupp-gruppe.de/wp-content/themes/rupp/fonts/heebo/heebo-regular.woff2) format('woff2');
}
html, body {
height: 100%;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #fff;
overflow-y: scroll;
}
body, button, input, select, textarea {
font-family: 'Heebo', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: var(--text-color);
}
textarea {
resize: vertical;
}
* {
box-sizing: border-box;
outline: none;
margin: 0;
padding: 0;
}
#scrollbody {
position: fixed;
width : 100%;
top: 0;
right: 0;
left: 0;
z-index: 3;
background-color: #fff;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: none;
appearance: none;
}
b, strong {
font-weight: 700;
}
h1, .h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
h1, .h1 {
font-size: 48px;
line-height: 56px;
}
h2 {
font-size: 32px;
line-height: 40px;
}
h3 {
font-size: 24px;
line-height: 32px;
}
p {
font-weight: 400;
}
a {
color: var(--text-color);
}
.imgresponsive {
display: block;
width: 100%;
height: auto;
} #main {
min-height: 100vh;
}
.c-content-center {
width: 100%;
max-width: 1416px;
margin: 0 auto;
}
.c-content-center-part {
width: 100%;
max-width: 553px;
margin: 0 0 0 auto;
}
.c-content-narrow {
width: 100%;
max-width: 854px;
margin: 0 auto;
}
.c-content-single {
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.c-content-inner {
padding: 0 68px;
}
.c-clear {
clear: both;
}
.c-block {
display: block;
}  .c-spacer {
height: 40px;
}
.c-spacer-small {
height: 10px;
}
.c-spacer-half {
height: 20px;
}
.c-spacer-double {
height: 80px;
}
.c-spacer-double-negative {
margin: -80px 0;
position: relative;
z-index: 3;
}
.c-spacer-section {
height: 160px;
}
.c-spacer-header {
height: 90px;
}  .textcenter {
text-align: center;
}
.textright {
text-align: right;
}
.textleft {
text-align: left;
}
.textsmall {
font-size: 12px;
line-height: 20px;
}
.textlarge {
font-size: 24px;
line-height: 36px;
font-weight: 400;
}
.textupper {
text-transform: uppercase;
}
.textbold {
font-weight: 700;
}
.textcolor {
color: var(--text-color);
}
.textprimary {
color: var(--theme-primary-color);
}
.textlight {
color: #fff;
}
.textdark {
color: #000;
}
.textnodecoration {
text-decoration: none;
}  .c-row {
display: block;
margin: 0 -40px -40px 0;
}
.c-row::after {
content: "";
display: table;
clear: both;
}
.c-clear {
display: block;
clear: both;
width: 100%;
border: 1px solid transparent;
height: 1px;
}
.c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
.c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
float: left;
padding: 0 40px 40px 0;
margin: 0;
}
.c-col-1 { width: 8.33%; }
.c-col-2 { width: 16.66%; }
.c-col-3 { width: 25%; }
.c-col-4 { width: 33.33%; }
.c-col-5 { width: 41.66%; }
.c-col-6 { width: 50%; }
.c-col-7 { width: 58.33%; }
.c-col-8 { width: 66.66%; }
.c-col-9 { width: 75%; }
.c-col-10 { width: 83.33%; }
.c-col-11 { width: 91.66%; }
.c-col-12 { width: 100%; }  .group-items {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.group-item a {
display: block;
}
.group-item a .group-tile {
background-color: #fff;
padding: 60px 0;
text-align: center;
}
.group-item a .group-tile img {
display: inline-block;
max-height: 64px;
margin: 0 auto;
opacity: 0.5;
filter: grayscale(1.0);
transition: all 0.2s;
}
.group-item a:active .group-tile img,
.group-item a:hover .group-tile img {
filter: none;
opacity: 1;
}
@media only screen and (max-width: 1200px) {
.group-items {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
}
}
@media only screen and (max-width: 768px) {
.group-items {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-column-gap: 0;
}
} .roundedborders {
border-radius: 4px;
}
.box-line {
display: grid;
overflow: hidden;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.box-line-right {
grid-template-columns: 6fr 4fr;
}
.box-line-left {
grid-template-columns: 4fr 6fr;
}
.box-line-img {
background-color: #888;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding-bottom: 100%;
}
.box-line .rupp-logo {
max-height: 68px;
display: inline-block;
}
@media only screen and (max-width: 768px) {
.box-line-right {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.box-line-left {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.box-line-right .box-line-cell-1 {
grid-area: 2 / 1 / 3 / 2;
}
.box-line-right .box-line-cell-2 {
grid-area: 1 / 1 / 2 / 2;
}
}
.box-outline {
background-image: url(//rupp-gruppe.de/wp-content/themes/rupp/images/rupp-gruppe-outline.svg);
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
}
.milestone-item {
position: relative;
}
.milestone-year {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: inline-block;
margin: 0;
padding: 0;
background-color: #fff;
}
.milestone-year-inner {
display: inline-block;
color: var(--text-color);
font-size: 48px;
line-height: 56px;
font-weight: bold;
width: 280px;
position: relative;
text-align: center;
}
.milestone-year-inner svg.inner-left {
position: absolute;
top: 0;
left: 0;
width: 65px;
height: 56px;
}
.milestone-year-inner svg.inner-right {
position: absolute;
top: 0;
right: 0;
width: 65px;
height: 56px;
}
.milestone-year-inner svg path {
fill: var(--theme-primary-color);
}
.milestone-line {
display: grid;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
}
.milestone-line.milestone-line-left {
grid-template-columns: 2fr 4fr 6fr;
}
.milestone-line.milestone-line-right {
grid-template-columns: 6fr 4fr 2fr;
}
.milestone-line.milestone-line-left .milestone-line-desc {
padding: 3px 160px 0 20px;
}
.milestone-line.milestone-line-right .milestone-line-desc {
padding: 3px 20px 0 160px;
}
.milestone-line.milestone-line-left .milestone-line-image {
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
min-height: 90px;
}
.milestone-line.milestone-line-right .milestone-line-image {
background-size: contain;
background-position: right top;
background-repeat: no-repeat;
min-height: 90px;
}
.milestone-line .milestone-line-vertical {
border-right: 1px solid var(--text-color);
}
.milestone-year-right .milestone-year-inner svg.inner-left {
display: none;
}
.milestone-year-left .milestone-year-inner svg.inner-right {
display: none;
}
@media only screen and (max-width: 1024px) {
.milestone-year {
position: static;
left: 0;
transform: none;
font-size: 32px;
line-height: 40px;
margin-bottom: 20px;
}
.milestone-line.milestone-line-left {
grid-template-columns: 3fr 9fr 0;
grid-template-rows: auto;
}
.milestone-line.milestone-line-right {
grid-template-columns: 0 9fr 3fr;
grid-template-rows: auto;
}
.milestone-line .milestone-line-vertical {
border-right: none;
}
.milestone-line.milestone-line-left .milestone-line-desc {
padding: 0;
}
.milestone-line.milestone-line-right .milestone-line-desc {
padding: 0;
}
} .grid-6-6 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.grid-4-4-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.grid-3-3-3-3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.grid-2-2-2-2-2-2 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}  #header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9;
transform: translateY(0);
opacity: 1;
transition: all 0.5s;
}
#headerwrapper {
background-color: rgba(255,255,255,0.9);
height: 90px;
padding: 15px 0;
}
body.header-retracted #header {
transform: translateY(-100%);
opacity: 0;
}
body.menu-mobile #header {
transform: translateY(0);
opacity: 1;
}
#headerbar {
height: 60px;
position: relative;
}
#headerlogo {
position: absolute;
top: 0;
right: auto;
left: 0;
height: 60px;
width: 200px;
}
#headerlogo a {
display: inline-block;
}
#headerlogo a img {
height: 60px;
width: auto;
display: inline-block;
}
#headermenu {
position: absolute;
top: 0;
right: 0;
left: 220px;
height: 60px;
}
#headermenu {
text-align: right;
}
#headermenu ul {
display: inline-block;
list-style-type: none;
height: 60px;
text-align: left;
}
#headermenu ul li {
float: left;
display: inline-block;
position: relative;
}
#headermenu ul li a {
text-decoration: none;
display: inline-block;
padding: 0 18px;
height: 60px;
line-height: 60px;
text-transform: uppercase;
font-weight: 700;
font-size:16px;
}
@media (max-width: 1062px) {
#headermenu ul li a {
font-size:14px;
}
}
#headermenu ul li:hover > a {
color: var(--theme-primary-color);
}
#headermenu ul li ul {
display: inline-block;
position: absolute;
left: 8px;
top: 60px;
background-color: #fff;
width: 240px;
height: auto;
opacity: 0;
pointer-events: none;
transform: translateY(-40px);
transition: all 0.2s;
}
#headermenu ul li:hover > ul {
pointer-events: auto;
transform: translateY(0);
opacity: 1;
}
#headermenu ul li ul li {
display: block;
width: 100%;
height: 48px;
position: relative;
}
#headermenu ul li ul li.menu-item-has-children::after {
content: '';
position: absolute;
top: 18px;
right: 20px;
width: 8px;
height: 8px;
pointer-events: none;
border-top: 3px solid var(--text-color);
border-right: 3px solid var(--text-color);
transform: rotate(45deg);
}
#headermenu ul li ul li.menu-item-has-children:hover::after {
border-top: 3px solid var(--theme-primary-color);
border-right: 3px solid var(--theme-primary-color);
}
#headermenu ul li ul li a {
display: block;
height: 48px;
line-height: 48px;
padding: 0 40px 0 20px;
overflow: hidden;
text-overflow: ellipsis;
}
#headermenu ul li ul li:hover > a {
color: var(--theme-primary-color);
}
#headermenu ul li ul li ul {
position: absolute;
left: 240px;
top: 0;
background-color: #fff;
width: 280px;
height: auto;
}
#headermenu ul li ul li ul li a {
padding: 0 20px;
}
.menu-header-menu-container {
height: 60px;
}
.headermenubutton {
padding-top: 9px;
padding-left: 28px;
vertical-align: top;
}
#header .c-content-inner {
padding: 0 25px;
}  #mobilemenubutton {
display: none;
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
cursor: pointer;
}
#mobilemenubuttonwrapper {
position: relative;
width: 60px;
height: 60px;
}
#mobilemenubuttonwrapper span {
position: absolute;
height: 3px;
background-color: var(--text-color);
display: inline-block;
transition: all 0.2s;
}
#mobilemenubuttonwrapper span.a1 {
top: 20px;
right: 0;
left: 34px;
}
#mobilemenubuttonwrapper span.a2 {
top: 29px;
right: 0;
left: 34px;
opacity: 1;
}
#mobilemenubuttonwrapper span.a3 {
top: 38px;
right: 0;
left: 34px;
}
body.menu-mobile #mobilemenubuttonwrapper span.a1 {
top: 29px;
right: 0;
left: 34px;
transform: rotate(45deg);
}
body.menu-mobile #mobilemenubuttonwrapper span.a2 {
top: 29px;
right: 10px;
left: 44px;
opacity: 0;
}
body.menu-mobile #mobilemenubuttonwrapper span.a3 {
top: 29px;
right: 0;
left: 34px;
transform: rotate(-45deg);
}
#mobilemenubuttonwrapper:hover span {
background-color: var(--theme-primary-color);
}
#mobilemenu {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
transform: translateY(-100%);
opacity: 0;
transition: all 0.2s;
z-index: 8;
}
#mobilemenu ul {
display: block;
list-style-type: none;
text-align: left;
}
#mobilemenu ul.menu {
border-top: 1px solid #ddd;
}
#mobilemenu ul li {
position: relative;
}
#mobilemenu ul li.menu-item-has-children > a {
font-weight: 700;
}
#mobilemenu ul li.menu-item-has-children:after {
content: '';
position: absolute;
top: 12px;
right: 26px;
width: 12px;
height: 12px;
border-right: 2px solid var(--text-color);
border-bottom: 2px solid var(--text-color);
transform: rotate(45deg);
pointer-events: none;
}
#mobilemenu ul li.menu-item-has-children.active:after {
top: 20px;
transform: rotate(225deg);
}
#mobilemenu ul li ul.sub-menu {
display: none;
}
#mobilemenu ul li.menu-item-has-children.active > ul.sub-menu {
display: block;
}
#mobilemenu ul li a {
display: block;
height: 48px;
line-height: 48px;
padding: 0 20px 0 20px;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
#mobilemenu ul li a:active {
background-color: #eee;
}
body.menu-mobile #mobilemenu {
transform: translateY(0);
opacity: 1;
}  .urban-button {
display: inline-block;
height: 40px;
line-height: 38px;
padding: 0 52px;
text-transform: uppercase;
background-color: transparent;
border: 2px solid var(--theme-primary-color);
color: var(--theme-primary-color);
font-weight: 700 !important;
letter-spacing: 1px;
white-space: nowrap;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
}
.urban-button.urban-button-secondary {
border: 2px solid #fff;
color: #fff;
}
.urban-button:hover {
background-color: var(--theme-primary-color);
color: #fff;
text-decoration: none;
}
.urban-button.urban-button-secondary:hover {
border: 2px solid #fff;
background-color: #fff;
color: var(--theme-primary-color);
text-decoration: none;
}  .urban-link {
display: inline-block;
white-space: nowrap;
text-transform: uppercase;
color: var(--theme-primary-color);
font-weight: 400 !important;
text-decoration: none;
padding-right: 36px;
position: relative;
}
.urban-link svg {
position: absolute;
top: 50%;
right: 10px;
display: inline-block;
width: 16px;
height: 16px;
transform: translateY(-50%);
transition: all 0.2s;
}
.urban-link svg path {
fill: var(--theme-primary-color);
}
.urban-link.urban-link-secondary {
color: #fff;
}
.urban-link.urban-link-secondary svg path {
fill: #fff;
}
.urban-link:hover {
text-decoration: none;
}
.urban-link:hover svg {
right: 0;
}  #toolmenu {
position: fixed;
top: 66.66%;
right: 0;
width: 48px;
transform: translateY(-50%);
z-index: 9;
}
.toolmenu-item {
position: relative;
height: 48px;
width: 48px;
margin: 10px 0 10px;
}
.toolmenu-item-wrapper {
position: absolute;
left: 0;
background-color: var(--theme-primary-color);
height: 48px;
transform: translateX(0);
transition: transform 0.2s;
}
.toolmenu-item-wrapper:hover {
transform: translateX( calc(-100% + 48px) );
}
.toolmenu-item-wrapper svg {
position: absolute;
top: 12px;
left: 12px;
width: 24px;
height: 24px;
display: inline-block;
pointer-events: none;
}
.toolmenu-item-wrapper svg path {
fill: #fff;
}
.toolmenu-item-wrapper a {
display: block;
background-color: var(--theme-primary-color);
height: 48px;
line-height: 48px;
padding: 0 20px 0 58px;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.toolmenu-item-wrapper a:hover {
text-decoration: none;
}  .hero-video {
position: relative;
height: 100vh;
height: 100dvh;
min-height: 480px;
background-color: #888;
overflow: hidden;
z-index: 2;
}
.hero-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 6;
text-transform: uppercase;
font-size: 48px;
line-height: 56px;
font-weight: bold;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
pointer-events: none;
}
.hero-video video {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%,-50%);
width: auto !important;
max-width: none !important;
z-index: 4;
}
.hero-page {
position: relative;
height: 100vh;
height: 100dvh;
min-height: 480px;
background-color: #888;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 2;
}
.hero-menu {
position: absolute;
top: 25%;
right: 0;
left: 0;
z-index: 8;
}
.hero-menu-inner {
position: relative;
padding-left: 40px;
width: 240px;
}
.hero-menu-inner svg {
position: absolute;
top: auto;
bottom: 18px;
left: 0;
display: inline-block;
height: 162px;
width: auto;
}
.hero-menu-branch a {
display: block;
opacity: 0;
transition: opacity 0.4s;
text-decoration: none;
color: #fff;
font-weight: 400 !important;
}
.hero-menu-branch {
position: relative;
transition: all 0.2s;
cursor: pointer;
padding-top: 6px;
font-size: 14px;
line-height: 18px;
height: 24px;
margin-top: 8px;
}
.hero-menu-branch:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 60px;
transition: all 0.4s;
}
.hero-menu-branch-construction:before {
background-color: #e84141;
}
.hero-menu-branch-building:before {
background-color: #f9c924;
}
.hero-menu-branch-property:before {
background-color: #305387;
}
.hero-menu-branch-timber:before {
background-color: #4cb05b;
}
.hero-menu-branch-group:before {
background-color: #cbc4bc;
}
.hero-menu-branch.active:before {
width: 100%;
}
.hero-menu-branch.active a {
opacity: 1;
}
.hero-menu-inner:hover .hero-menu-branch:before {
width: 60px;
}
.hero-menu-inner:hover .hero-menu-branch a {
opacity: 0;
}
.hero-menu-branch:hover:before {
width: 100% !important;
}
.hero-menu-branch:hover a {
opacity: 1 !important;
}
@media only screen and (max-width: 768px) {
.hero-content {
font-size: 24px;
line-height: 32px;
}
}  .icon-siegel {
display: inline-block;
margin: 0 auto;
width: 52px;
height: 52px;
}
.icon-siegel path {
fill: var(--theme-primary-color);
}  .icon-vorteil {
display: inline-block;
margin: 0 auto;
width: 38px;
height: 38px;
margin-bottom: 10px;
}
.icon-vorteil path {
fill: var(--theme-primary-color);
}
.urban-icon.icon-doublecheck {
width: 48px;
}
.urban-icon.icon-quick {
width: 60px;
}  .team-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 15px;
grid-row-gap: 50px;
}
.team-items-management {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 15px;
grid-row-gap: 50px;
}
.team-item {
background-color: #fff;
overflow: hidden;
}
.team-item-image {
background-color: #888;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding-bottom: 100%;
}
.team-item-position {
font-weight: bold;
margin-bottom: 20px;
}
.team-item-content {
margin-bottom: 20px;
}
.team-item-inner {
padding: 30px 40px;
}
.team-item-link a {
display: inline-block;
height: 28px;
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-color);
cursor: pointer;
text-decoration: none;
}
.team-item-link a {
color: var(--text-color);
}
.team-item-link a:hover {
color: var(--theme-primary-color);
}
.team-item-link a .team-item-link-inner {
position: relative;
padding-left: 32px;
}
.team-item-link a .team-item-link-icon {
display: inline-block;
position: absolute;
top: 4px;
left: 0;
width: 20px;
height: 20px;
line-height: 20px;
}
.team-item-link a .team-item-link-icon svg {
display: inline-block;
width: 20px;
height: 20px;
}
.team-item-link a .team-item-link-icon svg path {
fill: var(--theme-primary-color);
}
@media only screen and (max-width: 1024px) {
.team-items {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 768px) {
.team-items-management,
.team-items {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-column-gap: 0;
}
.team-item-inner {
padding: 30px 20px;
}
.team-item-link a {
height: 48px;
line-height: 48px;
}
.team-item-link a .team-item-link-icon {
top: 14px;
}
}  .partner-item-image-wrapper {
padding: 20px;
}
.partner-item-image {
padding-bottom: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}  .ccm-widget--logo img {
z-index: 999 !important;
} .faq-items {
border-top: 1px solid var(--text-color);
}
.faq-item {
border-bottom: 1px solid var(--text-color);
display: flex;
}
.faq-item-inner {
width: 100%;
padding: 30px 0;
}
.faq-item-title {
color: var(--text-color);
cursor: pointer;
padding-right: 60px;
position: relative;
}
.faq-item-title:hover {
color: var(--theme-primary-color);
}
.faq-item-title .faq-item-arrow-wrapper {
position: absolute;
top: 4px;
right: 0;
width: 24px;
height: 24px;
display: inline-block;
}
.faq-item-title .faq-item-arrow {
width: 24px;
height: 24px;
display: inline-block;
position: relative;
}
.faq-item-title .faq-item-arrow span {
position: absolute;
background-color: var(--text-color);
opacity: 1;
transition: 0.2s;
}
.faq-item-title .faq-item-arrow span.a1 {
top: 0;
right: auto;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
}
.faq-item-title .faq-item-arrow span.a2 {
top: 50%;
right: 0;
bottom: auto;
left: 0;
height: 2px;
transform: translateY(-50%);
}
.faq-item-title:hover .faq-item-arrow span {
position: absolute;
background-color: var(--theme-primary-color);
}
.faq-item-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.faq-item.active .faq-item-title .faq-item-arrow span.a1 {
opacity: 1;
transform: rotate(90deg);
}
.faq-item.active .faq-item-title .faq-item-arrow span.a2 {
opacity: 0;
transform: rotate(90deg);
}
.faq-item.active .faq-item-content {
max-height: 100%;
}  .intromarqueewrapper {
overflow: hidden;
}
.intromarquee {
width: 200vw;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 40s;
}
.intromarquee-section {
float: left;
width: 100vw;
padding: 0 2%;
}
.intromarquee-section svg {
display: block;
}
.intromarquee-section svg path {
fill: rgba(255,255,255,0.25);
}  .intro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-column-gap: 15px;
grid-row-gap: 15px; 
}
.intro-grid-item {
background-color: #fff;
overflow: hidden;
}
.intro-grid-item .img-box {
position: absolute;
background-color: #888;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.intro-grid-item h2 {
color: var(--theme-primary-color);
}
.intro-grid-item-inner {
padding: 40px;
font-weight: 400;
}
.intro-grid-item-1 {
grid-area: 1 / 1 / 3 / 2;
padding-bottom: 60%;
}
.intro-grid-item-1 .img-box {
top: 40%;
right: 0;
bottom: 0;
left: 0;
}
.intro-grid-item-2 {
grid-area: 1 / 2 / 2 / 4;
padding-right: 33.33%;
position: relative;
}
.intro-grid-item-2 .img-box {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: calc(33.33%);
}
.intro-grid-item-3 {
grid-area: 2 / 2 / 3 / 3;
padding-top: 38%;
}
.intro-grid-item-3 .img-box {
top: 0;
right: 0;
bottom: 62%;
left: 0;
}
.intro-grid-item-4 {
grid-area: 2 / 3 / 3 / 4;
color: #fff;
background-color: var(--theme-primary-color);
} 
.intro-grid-item-4 h2,
.intro-grid-item-4 h3 {
color: #fff;
}
@media only screen and (max-width: 1280px) {
.intro-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.intro-grid-item-inner {
padding: 40px 20px;
}
.intro-grid-item-1 {
grid-area: 1 / 1 / 2 / 3;
padding-right: 40%;
position: relative;
padding-bottom: 0;
}
.intro-grid-item-1 .img-box {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: calc(40%);
}
.intro-grid-item-2 {
grid-area: 2 / 1 / 3 / 3;
padding-right: 40%;
}
.intro-grid-item-2 .img-box {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: calc(40%);
}
.intro-grid-item-3 {
grid-area: 3 / 1 / 4 / 2;
padding: 0;
}
.intro-grid-item-3 .img-box {
position: static;
min-height: 200px;
}
.intro-grid-item-4 {
grid-area: 3 / 2 / 4 / 3;
}
}
@media only screen and (max-width: 768px) {
.intro-grid {
grid-template-columns: 100%;
grid-template-rows: repeat(4, auto);
grid-column-gap: 0;
}
.intro-grid-item-1 .img-box {
display: block;
position: static;
min-height: 200px;
width: 100%;
}
.intro-grid-item-1 {
grid-area: 1 / 1 / 2 / 2;
position: static;
padding: 0;
}
.intro-grid-item-2 .img-box {
display: block;
position: static;
min-height: 200px;
width: 100%;
}
.intro-grid-item-2 {
grid-area: 2 / 1 / 3 / 2;
position: static;
padding: 0;
}
.intro-grid-item-3 .img-box {
display: block;
position: static;
min-height: 200px;
width: 100%;
}
.intro-grid-item-3 {
grid-area: 3 / 1 / 4 / 2;
position: static;
padding: 0;
}
.intro-grid-item-4 {
grid-area: 4 / 1 / 5 / 2;
position: static;
padding: 0;
}
}  #urban-parallax {
height: 60vh;
background-color: #888;
background-size: cover;
background-repeat: no-repeat;
background-position: center 0%;
transition: all 1s;
}  .leistung-tile {
overflow: hidden;
}
.leistung-tile a svg {
display: inline-block;
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.leistung-tile a svg path {
fill: var(--theme-primary-color);
transition: all 0.2s;
}
.leistung-tile a {
display: block;
height: 100%;
text-decoration: none;
background-color: #f0edeb;
color: var(--text-color);
padding: 30px 20px;
transition: all 0.2s;
}
.leistung-tile a:hover {
background-color: var(--theme-primary-color);
color: #fff;
text-decoration: none;
}
.leistung-tile a:hover svg path {
fill: #fff;
}  .service-section {
background-color: #3b3b3b;
overflow: hidden;
position: relative;
}
.service-background {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 1;
}
.service-background svg {
display: inline-block;
height: 100%;
width: auto;
transform: translateX(-50%);
}
.service-background svg path {
fill: rgba(255,255,255,0.1);
}
.service-grid {
display: grid;
grid-template-columns: 5fr 7fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
position: relative;
z-index: 2;
}
.service-grid-cell {}
.service-item {
margin-bottom: 20px;
overflow: hidden;
border-radius: 4px 0 0 4px;
}
.service-item a {
display: block;
cursor: pointer;
text-decoration: none;
background-color: #222222;
transition: all 0.3s;
}
.service-item-inner {
color: #fff;
position: relative;
padding: 30px 30px 30px 216px;
min-height: 116px;
}
.service-item-title h3 {
line-height: 76px;
white-space: nowrap;
}
.service-item-icon {
position: absolute;
top: 8px;
left: 48px;
width: 116px;
height: 116px;
}
.service-item-icon svg {
display: inline-block;
width: 116px;
height: 116px;
}
.service-item-icon svg path {
fill: var(--theme-primary-color);
transition: all 0.3s;
}
.service-item a:hover {
background-color: var(--theme-primary-color);
text-decoration: none;
}
.service-item a:hover .service-item-icon svg path {
fill: #fff;
}
@keyframes turner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}  .portfolio-items {
display: grid;
grid-template-rows: auto;
grid-column-gap: 15px;
grid-row-gap: 45px;
margin-bottom: 45px;
}
.portfolio-items.portfolio-left {
grid-template-columns: 1fr 2fr;
}
.portfolio-items.portfolio-right {
grid-template-columns: 2fr 1fr;
}
.portfolio-item a {
display: inline-block;
text-decoration: none;
}
.portfolio-item-image {
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.portfolio-items.portfolio-left {
grid-template-columns: 100%;
}
.portfolio-items.portfolio-right {
grid-template-columns: 100%;
}
}  #footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
color: #fff;
z-index: 1;
}
#footerlogo a {
height: 60px;
display: inline-block;
}
#footerlogo a img {
height: 60px;
width: auto;
display: inline-block;
}
#footerinfo {
color: #fff;
font-weight: 400;
}
#footerinfo a {
text-decoration: none;
color: #fff;
}
#footerinfo a:hover {
text-decoration: none;
color: var(--theme-primary-color);
}
#footermenu {
padding-top: 3px;
}
#footermenu ul {
display: block;
list-style-type: none;
}
#footermenu ul li {
display: block;
text-align: center;
}
#footermenu ul li a {
text-decoration: none;
display: inline-block;
line-height: 48px;
text-transform: uppercase;
font-weight: 400;
color: #fff;
}
#footermenu ul li a:hover {
text-decoration: none;
color: var(--theme-primary-color);
}
#footeraddress {
padding-top: 15px;
color: #fff;
font-weight: 400;
text-align: right;
}
#footeraddress a {
text-decoration: none;
color: #fff;
}
#footeraddress a:hover {
text-decoration: none;
color: var(--theme-primary-color);
}
#footeraddress #mobilemenubutton {
display: none;
}
#footercopy {
color: #fff;
font-weight: 400;
}
#footercopy a {
text-decoration: none;
color: #fff;
}
#footercopy a:hover {
text-decoration: none;
color: var(--theme-primary-color);
}
#footerlegal {
text-align: right;
}
#footerlegal ul {
display: inline-block;
list-style-type: none;
}
#footerlegal ul li {
float: left;
display: inline-block;
}
#footerlegal ul li a {
text-decoration: none;
display: inline-block;
padding: 0 0 0 40px;
text-transform: uppercase;
font-weight: 400;
color: #fff;
}
#footerlegal ul li a:hover {
text-decoration: none;
color: var(--theme-primary-color);
}
#footermarqueewrapper {
overflow: hidden;
}
#footermarquee {
width: 200vw;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 40s;
}
.footermarquee-section {
float: left;
width: 100vw;
padding: 0 2%;
}
.footermarquee-section svg {
display: block;
}
.footermarquee-section svg path {
fill: rgba(255,255,255,0.25);
}
@keyframes ticker {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}  .social-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.social-nav ul::after {
content: "";
display: table;
clear: both;
}
.social-nav ul li {
width: 68px;
height: 68px;
display: inline-block;
}
.social-nav ul li a {
display: inline-block;
width: 28px;
height: 28px;
text-decoration: none;
}
.social-nav ul li a svg {
display: inline-block;
width: 28px;
height: 28px;
}
.social-nav ul li a svg circle,
.social-nav ul li a svg path,
.social-nav ul li a svg rect {
fill: #fff;
}
.social-nav ul li a:hover svg circle,
.social-nav ul li a:hover svg path,
.social-nav ul li a:hover svg rect {
fill: var(--theme-primary-color);
} .jobbox {
padding: 20px;
color: #fff;
}
.jobbox a,
.jobbox a:hover {
color: #fff;
}
.jobbox hr {
color: #fff;
}
.jobbullets {
list-style-type: none;
padding: 0;
margin: 0;
}
.jobbullets li {
position: relative;
padding: 0 0 0 32px;
margin: 0;
width: 100%;
}
.jobbullets li:before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 24px;
height: 4px;
}
.job-section.job-section-group .textprimary,
.job-section.job-section-group .urban-button {
color: #ff4e00;
}
.job-section.job-section-construction .textprimary,
.job-section.job-section-construction .urban-button {
color: #e84141;
}
.job-section.job-section-building .textprimary,
.job-section.job-section-building .urban-button {
color: #f9c924;
}
.job-section.job-section-property .textprimary,
.job-section.job-section-property .urban-button {
color: #305387;
}
.job-section.job-section-timber .textprimary,
.job-section.job-section-timber .urban-button {
color: #4cb05b;
}
.job-section.job-section-group .urban-button {
border-color: #ff4e00;
}
.job-section.job-section-construction .urban-button {
border-color: #e84141;
}
.job-section.job-section-building .urban-button {
border-color: #f9c924;
}
.job-section.job-section-property .urban-button {
border-color: #305387;
}
.job-section.job-section-timber .urban-button {
border-color: #4cb05b;
}
.job-section.job-section-group .urban-button:hover {
color: #fff;
background-color: #ff4e00;
}
.job-section.job-section-construction .urban-button:hover {
color: #fff;
background-color: #e84141;
}
.job-section.job-section-building .urban-button:hover {
color: #fff;
background-color: #f9c924;
}
.job-section.job-section-property .urban-button:hover {
color: #fff;
background-color: #305387;
}
.job-section.job-section-timber .urban-button:hover {
color: #fff;
background-color: #4cb05b;
}
.job-section.job-section-group .jobbullets li:before,
.job-section.job-section-group .jobbox {
background-color: #ff4e00;
}
.job-section.job-section-construction .jobbullets li:before,
.job-section.job-section-construction .jobbox {
background-color: #e84141;
}
.job-section.job-section-building .jobbullets li:before,
.job-section.job-section-building .jobbox {
background-color: #f9c924;
}
.job-section.job-section-property .jobbullets li:before,
.job-section.job-section-property .jobbox {
background-color: #305387;
}
.job-section.job-section-timber .jobbullets li:before,
.job-section.job-section-timber .jobbox {
background-color: #4cb05b;
}
.job-section {
background-color: #fff;
margin-bottom: 10px;
border: 1px solid #e3e3e3;
}
.job-section-title {
height: 48px;
line-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #fff;
cursor: pointer;
transition: background 0.2s;
}
.job-section-title:active,
.job-section-title:hover {
background-color: #e3e3e3;
}
.job-section-body {
height: 0;
overflow: hidden;
}
.job-section-title-inner {
position: relative;
padding-right: 32px;
}
.job-section .job-section-title-inner:after {
content: '';
position: absolute;
top: 14px;
right: 0;
width: 10px;
height: 10px;
border-right: 3px solid var(--text-color);
border-bottom: 3px solid var(--text-color);
transform: rotate(45deg);
transition: all 0.2s;
}
.job-section.active .job-section-title-inner:after {
top: 20px;
transform: rotate(225deg);
}
.job-section.active .job-section-body {
height: auto;
} .urban-post-box-image {
display: block;
width: 100%;
height: auto;
}
.urban-post-box-details {
font-weight: bold;
}
.urban-post-box-details a,
.urban-post-box-details a:hover {
text-decoration: none;
}
.urban-post-box-details span {
margin-left: 15px;
margin-right: 15px;
}
.urban-post-box-hero {
background-color: #888;
overflow: hidden;
}  .mobileonly {
display: none;
}
.desktoponly {
display: block;
}
.wideonly {
width: 100%;
}  .navigation.pagination .screen-reader-text {
display: none;
}
.navigation.pagination .nav-links .page-numbers {
display: inline-block;
text-decoration: none;
padding: 0 20px;
line-height: 28px;
height: 32px;
background-color: transparent;
color: #333;
border: 2px solid var(--text-color);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 12px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.navigation.pagination .nav-links .page-numbers.current {
background-color: var(--text-color);
color: #fff;
}
.navigation.pagination .nav-links .page-numbers:hover {
border: 2px solid var(--theme-primary-color) !important;
color: var(--theme-primary-color) !important;
}
.navigation.pagination .nav-links .page-numbers.current:hover {
border: 2px solid var(--theme-primary-color) !important;
background-color: var(--theme-primary-color) !important;
color: #fff !important;
}  .customAnim.animFadeUp {
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.customAnim.animFadeUp.come-in {
opacity: 1;
animation: afu-come-in 0.4s ease forwards;
-webkit-transform: -webkit-translateY(200px);
transform: translateY(200px);
}
.customAnim.animFadeDown {
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.customAnim.animFadeDown.come-in {
opacity: 1;
animation: afu-come-in 0.4s ease forwards;
-webkit-transform: -webkit-translateY(-200px);
transform: translateY(-200px);
}
.footerAnim.animFadeUp {
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.footerAnim.animFadeUp.come-in {
opacity: 1;
animation: afu-come-in 0.4s ease forwards;
-webkit-transform: -webkit-translateY(200px);
transform: translateY(200px);
}
@keyframes afu-come-in {
to {
-webkit-transform: -webkit-translateY(0);
transform: translateY(0);
}
} .relative {
position: relative;
}
.absolute {
position: absolute;
}
.p0 {
padding: 0 !important;
}
.m0 {
margin: 0 !important;
}
.pt10 {
padding-top: 10px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.py10 {
padding-top: 10px;
padding-bottom: 10px;
}
.py20 {
padding-top: 20px;
padding-bottom: 20px;
}
.py30 {
padding-top: 30px;
padding-bottom: 30px;
}
.mt0 {
margin-top: 0 !important;
}
.mb0 {
margin-bottom: 0;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
.mb30 {
margin-bottom: 30px;
}
.mb40 {
margin-bottom: 40px;
}
.mb50 {
margin-bottom: 50px;
}
.w100 {
width: 100% !important;
}
.ul-arrows-white li {
list-style-image: url(//rupp-gruppe.de/wp-content/themes/rupp/images/arrow-white.svg);
}
.ul-arrows-black li {
list-style-image: url(//rupp-gruppe.de/wp-content/themes/rupp/images/arrow-black.svg);
} @media only screen and (max-width: 1480px) {
#menubutton {
display: none;
}
#headermenu li.menu-item:last-child a {
padding-right: 0;
}
.headermenubutton {
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#headermenu ul li a {
padding: 0 10px;
} .grid-2-2-2-2-2-2 {
grid-template-columns: repeat(3, 1fr);
} }
@media only screen and (max-width: 1024px) {
#headermenu {
display: none;
}
#mobilemenubutton {
display: inline-block;
}
#mobilemenu {
display: block;
}
.menu-header-menu-container {
height: calc(100vh - 90px);
overflow-y: auto;
}
}
@media only screen and (max-width: 768px) { .mobileonly {
display: block;
}
.desktoponly {
display: none;
}
.textlarge {
font-size: 24px;
line-height: 32px;
}
h1, .h1 {
font-size: 32px;
line-height: 40px;
}  .c-content-inner {
padding: 0 20px;
}  .c-row {
margin: 0 0 -20px 0;
}
.c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
.c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
width: 100%;
padding: 0 0 20px 0;
}  .grid-6-6 {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-column-gap: 0;
}
.grid-4-4-4 {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-column-gap: 0;
}
.grid-3-3-3-3 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.grid-2-2-2-2-2-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cell-switch-left {
display: flex;
order: 2;
}
.grid-cell-switch-right {
display: flex;
order: 1;
} #mobilemenubutton {
display: inline-block;
}
.group-item a .group-tile img {
opacity: 1;
filter: none;
}
.service-grid {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-column-gap: 0;
grid-row-gap: 60px;
}
.service-item-icon {
left: 0;
}
.service-item-inner {
padding: 30px 30px 30px 116px;
}
.service-items-button {
text-align: center;
}
#footerlogo {
text-align: center;
}
#footerinfo {
text-align: center;
}
#footer .social-nav ul {
text-align: center;
}
#footer .social-nav ul li {
height: 48px;
}
#footercopy {
width: 100%;
text-align: center;
}
#footerlegal {
width: 100%;
text-align: center;
}
#footerlegal ul li {
float: none;
}
#footerlegal ul li a {
padding: 0 20px 0 20px;
line-height: 48px;
}
#footermenu {
padding-top: 0;
}
#footermenu ul {
width: 100%;
text-align: center;
}
#footermenu ul li {
display: inline-block;
padding: 0 10px;
}
#footeraddress {
padding-top: 0;
text-align: center;
} .c-spacer {
height: 20px;
}
.c-spacer-small {
height: 5px;
}
.c-spacer-half {
height: 10px;
}
.c-spacer-double {
height: 40px;
}
.c-spacer-double-negative {
margin: -40px 0;
}
.c-spacer-section {
height: 80px;
} #toolmenu {
display: none;
}
}