*, *::before, *::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} html {
font-variation-settings: "slnt" 0;
} html,
body {
overflow-x: clip;
} * {
text-decoration-thickness: 1px;
text-underline-offset: 5px;
} a[x-apple-data-detectors],
a[x-apple-data-detectors] * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
} .site-main {
margin-top: 0 !important;
}
.entry-content {
max-width: 100%;
}
.entry-content > * {
margin-top: 0 !important;
}
.entry-content > .wp-block-group.has-background {
padding-top: 3.7em;
padding-bottom: 3.7em;
padding-left: 3em;
padding-right: 3em;
position: relative;
}
h3:first-child {
margin-top: 0;
}  .wp-block-button__link {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button__link::before {
content: "\2192"; }
.wp-block-button.is-style-ohne-pfeil .wp-block-button__link::before {
content: none;
} .wp-block-button.is-style-negativ .wp-block-button__link {
background-color: var(--wp--preset--color--off-white);
border-color: var(--wp--preset--color--off-white);
color: var(--wp--preset--color--black);
} .wp-block-button.is-style-negativ .wp-block-button__link:hover {
background-color: transparent;
color: var(--wp--preset--color--off-white);
}
.wp-block-button .wp-block-button__link:hover {
background-color: transparent;
color: var(--wp--preset--color--black);
} .is-style-kolumnentitel {
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.449px;
text-transform: none;
} .zh-menu {
position: fixed;
bottom: 24px; left: 0;
right: 0;
width: fit-content;
margin-inline: auto;
z-index: 100;
background: #fff;
border-radius: 100px;
box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
padding: 8px 32px 8px 10px;
gap: 24px;
overflow: hidden;
animation: zh-menu-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes zh-menu-in { 0% {
opacity: 0;
transform: translateY(150%);
max-width: 72px;
padding-right: 6px;
}
40% {
opacity: 1;
transform: translateY(0);
max-width: 72px;
padding-right: 6px;
} 100% {
opacity: 1;
transform: translateY(0);
max-width: 480px;
padding-right: 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.zh-menu {
animation: none;
}
} .zh-menu.is-ready {
animation: none;
max-width: 480px;
}
.zh-menu__top {
margin: 0;
}
.zh-menu__top a {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #f3f4f6;
text-decoration: none;
}
.zh-menu__top a::before {
content: "\2191"; font-size: 20px;
color: #000;
}
.zh-menu__nav {
gap: 32px;
}
.zh-menu__nav .wp-block-navigation-item__content {
color: var(--wp--preset--color--gray);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.449px;
text-decoration: none;
}
.zh-menu__nav .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--black);
}
@media (max-width: 600px) {
.zh-menu {
padding: 6px 20px 6px 8px;
gap: 14px;
}
.zh-menu__top a {
width: 44px;
height: 44px;
}
.zh-menu__nav {
gap: 18px;
} .zh-menu.is-ready {
max-width: min(480px, 100vw - 32px);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.zh-scrolled-down .zh-menu.is-ready { transform: translateY(calc(100% + 24px));
opacity: 0;
pointer-events: none; transition: transform 0.7s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.6s ease;
}
} .wp-block-post.is-expanded .wp-block-media-text {
align-items: stretch;
gap: 1em; } .zh-proj-text--full {
display: none;
}
.wp-block-post.is-expanded .zh-proj-text--short {
display: none;
}
.wp-block-post.is-expanded .zh-proj-text--full {
display: block;
}
.wp-block-post.is-expanded .wp-block-media-text__media {
width: 68%; height: auto;  padding-left: 112px;
cursor: default;
}
.wp-block-post.is-expanded .wp-block-media-text__media::after {
display: none; } .wp-block-post.is-expanded .wp-block-media-text__media > img {
width: 100%;
height: auto;
object-fit: contain; border-radius: 24px; } .zh-pgallery__thumbs {
position: absolute;
left: 16px;
top: 16px;
bottom: 16px;
z-index: 2;
width: 80px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transform: translateX(calc(-100% - 16px)); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.45, 0, 0.15, 1);
}
.wp-block-post.is-expanded .zh-pgallery__thumbs {
opacity: 1;
pointer-events: auto;
transform: translateX(0); transition: opacity 0.35s ease 0.5s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.zh-pgallery__thumbs,
.wp-block-post.is-expanded .zh-pgallery__thumbs {
transform: none;
transition: opacity 0.2s ease;
}
}
.zh-pgallery__thumb {
flex: 0 0 auto;
padding: 0;
border: 0;
background: none;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
opacity: 0.5;
transition: opacity 0.2s ease;
}
.zh-pgallery__thumb.is-active,
.zh-pgallery__thumb:hover {
opacity: 1;
}
.zh-pgallery__thumb img {
display: block;
width: 100%;
height: auto;
}
.zh-pgallery__close {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
width: 41px;
height: 41px;
border: 0;
border-radius: 50%; background: url(//zuhauseag.ch/wp-content/themes/zuhause/assets/images/projekt-mehr.svg) center / contain no-repeat;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: rotate(0deg); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.45, 0, 0.15, 1) 0.6s;
}
.wp-block-post.is-expanded .zh-pgallery__close {
opacity: 1;
pointer-events: auto;
transform: rotate(135deg);
} .wp-block-post-template > li:nth-child(even) .zh-pgallery__close {
right: auto;
left: 128px;
}
.wp-block-post.is-expanded .wp-block-media-text__content {
max-width: none; }
.wp-block-post.is-expanded .wp-block-post-title {
font-size: 1.1em;
} .zh-wirhero {
position: relative;
padding: 0 !important;
} .zh-wirhero > .wp-block-group {
position: relative;
min-height: min(1139px, 74vw);
max-width: 1537px;
margin-left: auto !important;
margin-right: auto !important;
padding: 76px 68px;
}
.zh-wirhero__logo {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin: 0;
}
.zh-wirhero__logo img {
width: 136px;
height: auto;
}
.zh-wirhero__intro {
position: relative;
z-index: 2;
max-width: 513px;
margin-left: 0 !important;
margin-right: auto !important;
padding-top: 24px;
}
.zh-wirhero__eyebrow {
color: var(--wp--preset--color--off-white);
margin: 0 0 4px;
}
.zh-wirhero__title {
color: var(--wp--preset--color--off-white);
font-size: 3em; font-weight: 400;
line-height: 1;
letter-spacing: -0.0206em;
margin: 0 0 16px;
}
.zh-wirhero__sub {
color: var(--wp--preset--color--off-white);
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: -0.449px;
max-width: 513px;
margin: 0 0 24px;
}
.zh-wirhero__images {
position: absolute;
inset: 0;
z-index: 1;
margin: 0 !important;
max-width: none !important;
pointer-events: none;
}
.zh-wirhero__img {
position: absolute;
margin: 0;
}
.zh-wirhero__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
} .zh-wirhero__img--3 { top: 22%; left: 46%; width: 41.4%; aspect-ratio: 637 / 469; }
.zh-wirhero__img--1 { top: 66.8%; left: 42%; width: 26%; aspect-ratio: 496 / 362; }
.zh-wirhero__img--2 { top: 66.8%; left: 71%; width: 26%; aspect-ratio: 415 / 302; } .zh-werwirsind__title {
color: var(--wp--preset--color--off-white);
margin: 0;
} .zh-werwirsind .zh-werwirsind__row {
align-items: center;
gap: 4em;
} .zh-werwirsind .zh-werwirsind__row > .wp-block-group {
flex: 0 1 513px;
}
.zh-werwirsind .zh-werwirsind__video {
flex: 1 1 auto;
display: flex;
justify-content: center;
min-width: 0;
}
.zh-werwirsind .zh-videopopup__teaser {
display: grid;
place-items: center;
width: min(560px, 100%);
aspect-ratio: 16 / 9;
} .zh-werwirsind .zh-videopopup__preview {
inset: 0;
width: auto;
height: auto;
transform: none;
}
.zh-werwirsind .zh-videopopup__teaser.is-previewing .zh-videopopup__preview {
transform: scale(1.02);
} @media (max-width: 1024.98px) {
.zh-werwirsind .zh-werwirsind__row {
flex-direction: column;
align-items: flex-start;
gap: 2.5em;
}
.zh-werwirsind .zh-werwirsind__row > .wp-block-group,
.zh-werwirsind .zh-werwirsind__video {
flex: 0 0 auto;
width: 100%;
}
.zh-werwirsind .zh-werwirsind__video {
justify-content: flex-start;
}
}
.zh-team {
display: flex;
flex-direction: column;
gap: 42px;
margin-top: 52px;
}
.zh-team-card {
display: flex;
gap: 28px;
align-items: flex-start;
width: fit-content;
max-width: 100%;
} .zh-team-card {
--zh-photo-w: 400px;
--zh-card-w: 788px; --zh-shift: 388px; } .zh-team-card:nth-child(7n+2),
.zh-team-card:nth-child(7n+5) {
margin-left: clamp(0px, 7%, 100% - var(--zh-card-w));
} .zh-team-card:nth-child(7n+7) {
margin-left: clamp(0px, 50% - var(--zh-photo-w) / 2, 100% - var(--zh-card-w));
} .zh-team-card:nth-child(7n+3),
.zh-team-card:nth-child(7n+4) {
--zh-nudge: 40px;
}
.zh-team-card:nth-child(7n+3) {
margin-left: clamp(0px, 50% - var(--zh-photo-w) / 2 - var(--zh-nudge), 100% - var(--zh-card-w));
} .zh-team-card:nth-child(7n+4) {
flex-direction: row-reverse;
margin-left: clamp(0px, 50% - var(--zh-photo-w) / 2 - var(--zh-shift) + var(--zh-nudge), 100% - var(--zh-card-w));
margin-top: 56px;
} .zh-team-card:nth-child(7n+1),
.zh-team-card:nth-child(7n+6) {
flex-direction: row-reverse;
margin-left: clamp(0px, 93% - var(--zh-photo-w) - var(--zh-shift), 100% - var(--zh-card-w));
} @media (max-width: 1299.98px) {
.zh-team-card,
.zh-team-card:nth-child(n) {
margin-left: 0;
margin-top: 0;
}
.zh-team-card:nth-child(odd) {
flex-direction: row;
}
.zh-team-card:nth-child(even) {
flex-direction: row-reverse;
margin-left: auto;
}
} .zh-team-card__media {
flex: 0 0 400px;
aspect-ratio: 400 / 202;
border-radius: 16px;
overflow: hidden;
}
.zh-team-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
transition: filter 0.4s ease;
}
.zh-team-card:hover .zh-team-card__media img {
filter: grayscale(0);
} .zh-team-card__body {
padding-top: 9px;
width: 340px;
max-width: 340px;
}
.zh-team-card__name {
color: var(--wp--preset--color--off-white);
font-size: 36px;
font-weight: 400;
line-height: 45px;
letter-spacing: 0.369px;
text-transform: uppercase;
margin: 0 0 17px;
}
.zh-team-card__role {
color: var(--wp--preset--color--off-white);
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: -0.449px;
margin: 0 0 3px;
}
.zh-team-card__phone,
.zh-team-card__email {
color: var(--wp--preset--color--off-white);
font-size: 20px;
font-weight: 300;
line-height: 28px;
letter-spacing: -0.449px;
margin: 0;
} .zh-team-card__phone a {
color: inherit;
text-decoration: none;
}
.zh-team-card__email {
display: inline-block;
text-decoration: underline;
}
.zh-team-card__vcard {
display: inline-block;
margin-top: 11px;
} @media (min-width: 1000px) {
.zh-team-card__name {
white-space: nowrap;
} .zh-team-card__body {
width: 360px;
max-width: none;
}
.zh-team-card__infos {
max-width: 340px;
}
} @media (max-width: 1450px) { :root:root {
--wp--preset--font-size--base: 18px;
}
.zh-wirhero__intro {
max-width: 36vw;
}
} @media (max-width: 900px) {
.zh-wirhero > .wp-block-group {
min-height: 0;
}
.zh-wirhero__intro {
max-width: none;
}
.zh-wirhero__images {
position: static;
display: flex;
flex-direction: column;
gap: 1.25em; margin: 2.5em 0 0 !important;
max-width: none !important;
}
.zh-wirhero__img {
position: static !important;
top: auto;
left: auto;
right: auto;
width: 100% !important;
max-width: 640px;
margin: 0; min-height: 0;
overflow: hidden;
}
}
@media (max-width: 900px) {
.zh-team-card,
.zh-team-card:nth-child(n) {
flex-direction: column;
width: 100%;
max-width: 460px;
margin-left: 0; margin-top: 0;
}
.zh-team-card__media { flex-basis: auto; width: 100%; }
.zh-team-card__body { width: auto; max-width: none; }
} .zh-newstab {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 99;
margin: 0; display: grid;
place-items: center;
width: 44px;
height: 104px;
overflow: hidden;
background: #000;
border: 1px solid #fff;
border-right: 0;
border-radius: 12px 0 0 12px;
cursor: pointer;
transition: transform 0.5s cubic-bezier(0.45, 0, 0.15, 1);
}
.zh-news-open .zh-newstab {
transform: translateY(-50%) translateX(calc(-1 * min(412px, 90vw)));
} .zh-news-viewport {
position: fixed;
inset: 0;
z-index: 98;
overflow: hidden;
pointer-events: none;
} .zh-news-panel {
position: absolute;
top: 0;
right: 0;
width: 412px;
max-width: 90vw;
height: 100%;
padding: 56px 16px 24px;
background: #f8f8f8;
overflow-y: auto;
pointer-events: auto;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.45, 0, 0.15, 1);
}
.zh-news-open .zh-news-panel {
transform: translateX(0);
} .zh-news-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.45, 0, 0.15, 1);
}
.zh-news-open .zh-news-scrim {
opacity: 1;
pointer-events: auto;
} html.zh-news-open {
overflow: hidden;
} .zh-news-panel__close {
position: absolute;
top: 18px;
right: 16px;
z-index: 1;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, background-color 0.2s ease;
}
.zh-news-open .zh-news-panel__close {
opacity: 1;
pointer-events: auto;
}
.zh-news-panel__close:hover {
background: rgba(0, 0, 0, 0.06);
}
.zh-news-panel__close::before,
.zh-news-panel__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background: #000;
transform: translate(-50%, -50%) rotate(45deg);
}
.zh-news-panel__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.zh-news-panel__inner {
display: flex;
flex-direction: column;
gap: 24px;
}
.zh-news-card {
display: flex;
flex-direction: column;
gap: 10px;
} .zh-news-card__media {
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
}
.zh-news-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.zh-news-card__title {
margin: 0;
font-family: var(--wp--preset--font-family--config);
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: -0.449px;
text-transform: uppercase;
color: #000;
} .zh-news-card__text {
max-height: 4.2em; overflow: hidden;
color: var(--wp--preset--color--body-text);
font-size: 0.9em;
line-height: 1.4;
transition: max-height 0.45s cubic-bezier(0.45, 0, 0.15, 1);
}
.zh-news-card__text > * {
margin: 0 0 0.6em;
}
.zh-news-card__text > *:last-child {
margin-bottom: 0;
}
.zh-news-card.is-open .zh-news-card__text {
max-height: 40em;
} .zh-news-card__more {
display: none;
align-self: flex-start;
margin: 0;
padding: 0;
border: 0;
background: none;
color: #000;
font-family: inherit;
font-size: 0.9em;
text-decoration: underline;
cursor: pointer;
}
.zh-news-card.has-more .zh-news-card__more {
display: inline-block;
}
.zh-newstab a { white-space: nowrap;
transform: rotate(-90deg);
color: #fff;
text-decoration: none;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1;
} footer.wp-block-template-part,
.zh-outro {
margin-top: 0;
}
.zh-cta {
text-align: center;
padding: 128px 20px 80px;
}
.zh-cta__title {
text-transform: none;
font-weight: 500;
font-size: 60px;
line-height: 1.25;
letter-spacing: -0.0206em;
color: var(--wp--preset--color--black);
margin: 0 auto;
}
.zh-cta__sub {
color: var(--wp--preset--color--gray);
font-size: 20px;
line-height: 1.4;
margin: 28px auto 46px;
}
.zh-footer {
background: #1a1a1a;
color: var(--wp--preset--color--white);
border-radius: 16px;
margin: 0 20px 23px;
padding: 48px 68px;
}
.zh-footer a {
color: inherit;
} .zh-footer p a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%; background-size: 0% 1px; -webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1),
color 0.25s ease;
}
.zh-footer p a:hover,
.zh-footer p a:focus-visible {
color: var(--wp--preset--color--gray-light);
background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
.zh-footer p a {
transition: none;
}
}
.zh-footer__claim {
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.449px;
color: var(--wp--preset--color--white);
margin: 0;
max-width: 20em;
}
.zh-footer__addr-title {
font-size: 18px;
font-weight: 500;
line-height: 28px;
color: var(--wp--preset--color--white);
margin: 0 0 16px;
}
.zh-footer__addr {
color: var(--wp--preset--color--white);
font-size: 18px;
line-height: 25px;
margin: 0;
}
.zh-footer__logo img {
width: 91px;
height: auto;
}
.zh-footer__bottom {
align-items: flex-end;
margin-top: 32px;
}
.zh-footer__legal {
font-size: 12.5px;
margin: 0;
}
.zh-footer__legal a {
margin-left: 24px;
text-decoration: none;
}
@media (max-width: 781px) {
.zh-cta {
padding: 72px 20px 56px;
}
.zh-cta__title {
font-size: 40px;
}
.zh-footer {
padding: 40px 24px;
}
} body.home .entry-content > .wp-block-group:first-child::after {
content: "";
height: 194px;
flex-shrink: 0;
align-self: stretch;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 100%;
z-index: 0;
}
body.home .entry-content > .wp-block-group:first-child > * {
position: relative;
z-index: 1;
}
.zh-hero__head {
align-items: flex-start;
gap: 34px;
margin-bottom: 34px;
}
.zh-hero__title {
max-width: 998px;
margin: 0;
color: var(--wp--preset--color--black);
font-weight: 500;
} .zh-js .zh-hero__title {
opacity: 0;
}
.zh-js .zh-hero__title.zh-words {
opacity: 1;
}
.zh-hero__title .zh-word {
display: inline-block;
opacity: 0;
transform: translateY(100%);
animation: zh-hero-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes zh-hero-title-in {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.zh-hero__title,
.zh-hero__title .zh-word {
opacity: 1;
transform: none;
animation: none;
}
}
.zh-hero__logo {
margin: 0;
flex: 0 0 auto;
}
.zh-hero__logo img {
width: auto;
height: 6.75em;
}
.zh-hero__media {
margin: 0;
position: relative;
z-index: 9;
}
.zh-hero__media img {
display: block;
width: 100%;
border-radius: 16px;
} .zh-hero .wp-block-video {
overflow: hidden;
border-radius: 16px;
}
.zh-hero .wp-block-video video {
display: block;
width: 100%;
border-radius: 16px;
} .zh-vslider.alignfull {
max-width: none;
margin: 0;
padding: 0;
min-height: 0;
}  @media (min-width: 1025px) {
.home .entry-content h2.wp-block-heading,
.home .entry-content h3.wp-block-heading {
font-size: 45px;
}
} .zh-projekte {
background: var(--wp--preset--color--black);
color: var(--wp--preset--color--off-white);
padding: 68px 68px 91px;
}
.zh-projekte > * {
max-width: 1401px;
margin-left: auto;
margin-right: auto;
}
.zh-projekte__eyebrow {
color: var(--wp--preset--color--off-white);
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: -0.449px;
margin: 0 0 4px;
}
.zh-projekte__title {
color: var(--wp--preset--color--off-white);
margin: 0;
}
.zh-projekte__sub {
color: var(--wp--preset--color--gray-light);
font-size: 20px;
line-height: 28px;
letter-spacing: -0.449px;
max-width: 510px;
margin: 16px 0 0;
}
.zh-projekte__filters {
display: flex;
gap: 10px;
align-items: center;
margin-top: 52px;
}
.zh-filter {
border: 1px solid var(--wp--preset--color--off-white);
border-radius: 100px;
padding: 3px 12px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.3125px;
color: var(--wp--preset--color--off-white);
background: transparent;
margin: 0;
cursor: pointer;
font-family: inherit;
transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.zh-filter:not(.is-active) {
opacity: 0.7;
} .zh-filter.is-active {
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--black);
} .zh-filter:hover,
.zh-filter:focus-visible {
opacity: 1;
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--black);
} .zh-filter-bar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 3.75em;
}
.zh-filter-bar__broschuere {
margin-left: 2em;
}
.wp-block-post.is-filtered-out,
.wp-block-post.is-beyond-limit {
display: none;
} .zh-projekte-more {
display: block;
margin: 3em auto 0;
padding: 0.55em 1.4em;
border: 1px solid var(--wp--preset--color--off-white);
border-radius: 100px;
background: transparent;
color: var(--wp--preset--color--off-white);
font-family: inherit;
font-size: 16px;
line-height: 1.5;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.zh-projekte-more:hover,
.zh-projekte-more:focus-visible {
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--black);
}
.zh-projekte__broschuere {
margin-left: auto;
}
.zh-projekte__list {
display: flex;
flex-direction: column;
gap: 52px;
margin-top: 52px;
}
.zh-pcard.is-hidden {
display: none;
} .zh-pcard {
display: flex;
gap: 80px;
align-items: flex-start;
margin: 0;
flex-wrap: nowrap;
}
.zh-pcard--right {
flex-direction: row-reverse;
}
.zh-pcard__media {
display: block;
flex: 0 0 540px;
margin: 0;
position: relative;
}
.zh-pcard__media img {
display: block;
width: 540px;
height: 400px;
object-fit: cover;
border-radius: 24px;
}
.zh-pcard__media::after {
content: "";
position: absolute;
right: 16px;
bottom: 16px;
width: 41px;
height: 41px;
background: url(//zuhauseag.ch/wp-content/themes/zuhause/assets/images/projekt-mehr.svg) center / contain no-repeat;
}
.zh-pcard__body {
flex: 1 1 auto;
max-width: 475px;
padding-top: 8px;
}
.zh-pcard__title {
color: var(--wp--preset--color--off-white);
margin: 0 0 8px;
}
.zh-pcard__text {
color: var(--wp--preset--color--off-white);
font-size: 18px;
line-height: 25px;
letter-spacing: -0.449px;
margin: 0 0 24px;
max-width: 450px;
}
@media (max-width: 900px) {
.zh-pcard, .zh-pcard--right {
flex-direction: column;
gap: 24px;
}
.zh-pcard__media, .zh-pcard__media img {
flex-basis: auto;
width: 100%;
}
} li.type-projekt {
margin-top: 2.5em !important;
}
.wp-block-post-template .wp-block-media-text {
display: flex;
align-items: flex-start;
gap: 4em;
grid-template-columns: none;
transition: gap 0.6s cubic-bezier(0.45, 0, 0.15, 1);
}
.wp-block-post-template > li:nth-child(even) .wp-block-media-text {
flex-direction: row-reverse;
}
.wp-block-post-template .wp-block-media-text__content {
padding-left: 0;
padding-right: 0;
}
.wp-block-post-template .wp-block-media-text__media {
flex: 0 0 auto;
width: calc(50% - 2em); height: 20em;
padding-left: 0;
border-radius: 24px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: width 0.6s cubic-bezier(0.45, 0, 0.15, 1),
height 0.6s cubic-bezier(0.45, 0, 0.15, 1),
padding-left 0.6s cubic-bezier(0.45, 0, 0.15, 1);
will-change: width, height, padding-left;
}
.wp-block-post-template .wp-block-media-text__media::after {
content: "";
position: absolute;
bottom: 16px;
right: 16px;
width: 41px;
height: 41px;
background: url(//zuhauseag.ch/wp-content/themes/zuhause/assets/images/projekt-mehr.svg) center / contain no-repeat;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.45, 0, 0.15, 1);
} .wp-block-post-template > li:nth-child(even) .wp-block-media-text__media::after {
right: auto;
left: 16px;
} .wp-block-post-template .wp-block-media-text__media:hover::after {
transform: rotate(90deg);
}
.wp-block-post-template .wp-block-media-text__content {
flex: 1 1 auto;
max-width: none; border-bottom: 2px solid #f8f8f8;
position: relative;
padding-bottom: 3.5em;
}
.wp-block-post-template .wp-block-media-text__media > img {
width: 100%;
object-fit: cover;
height: 100%;
}
.wp-block-post-template .wp-block-media-text__content > .wp-block-buttons {
position: absolute;
left: 0;
bottom: 1em;
margin: 0;
}
.wp-block-post-template .wp-block-media-text__content .wp-block-post-excerpt {
font-size: 0.9em;
}
.wp-block-post-template .wp-block-post-title {
transition: font-size 0.6s cubic-bezier(0.45, 0, 0.15, 1);
} .wp-block-post-template .wp-block-media-text__content > * {
transition: opacity 0.3s ease;
}
.wp-block-post.is-resizing .wp-block-media-text__content > * {
opacity: 0;
transition: none;
} .wp-block-post-template .wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__content {
align-self: stretch;
}
.wp-block-post-template .wp-block-media-text__media > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24px;
} @view-transition {
navigation: auto;
}
@keyframes zh-page-slide-in {
from { transform: translateX(100%); }
to   { transform: translateX(0); }
}
@keyframes zh-page-slide-out-right {
from { transform: translateX(0); }
to   { transform: translateX(100%); }
} ::view-transition-old(root) {
animation: none;
}
::view-transition-new(root) {
animation: zh-page-slide-in 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
} html.zh-nav-back::view-transition-new(root) {
animation: none;
box-shadow: none;
z-index: 0;
}
html.zh-nav-back::view-transition-old(root) {
z-index: 1;
animation: zh-page-slide-out-right 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root),
html.zh-nav-back::view-transition-old(root),
html.zh-nav-back::view-transition-new(root) {
animation: none;
}
} .zh-form { --zh-form-width: 1140px;
--zh-form-field-h: 46px;
--zh-form-field-pad: 24px;
--zh-form-row-gap: 26px;
--zh-form-mark: 40px;
--zh-form-surface: #ededeb;
--zh-form-invalid: #ff6b6b;
max-width: var(--zh-form-width);
font-size: 18px;
}
.zh-form p {
margin: 0 0 var(--zh-form-row-gap);
}
.zh-form .wpcf7-form-control-wrap {
display: block;
} .zh-form input[type="text"],
.zh-form input[type="email"],
.zh-form input[type="tel"],
.zh-form textarea {
width: 100%;
height: var(--zh-form-field-h);
padding: 0 var(--zh-form-field-pad);
border: 1px solid transparent;
border-radius: 100px;
background: var(--zh-form-surface);
color: var(--wp--preset--color--body-text);
font: inherit;
letter-spacing: inherit;
}
.zh-form textarea {
display: block;
height: 170px;
padding: 11px var(--zh-form-field-pad);
border-radius: 30px;
resize: vertical;
} .zh-form ::placeholder {
color: var(--wp--preset--color--body-text);
opacity: 1;
} .zh-form input:-webkit-autofill,
.zh-form input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--wp--preset--color--body-text);
box-shadow: inset 0 0 0 100px var(--zh-form-surface);
} .zh-form input[type="radio"],
.zh-form input[type="checkbox"] {
appearance: none;
flex: none;
width: var(--zh-form-mark);
height: var(--zh-form-mark);
margin: 0;
border: 0;
border-radius: 50%;
background: var(--wp--preset--color--white);
cursor: pointer;
}
.zh-form input[type="radio"]:checked,
.zh-form input[type="checkbox"]:checked {
background-image: radial-gradient(
circle,
var(--wp--preset--color--black) 0 32%,
transparent 33%
);
} .zh-form :is(input, textarea):focus-visible {
outline: 2px solid var(--wp--preset--color--white);
outline-offset: 3px;
}
.zh-form .wpcf7-list-item {
display: block;
margin: 0;
}
.zh-form .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
} .zh-form .wpcf7-list-item-label::before,
.zh-form .wpcf7-list-item-label::after {
content: none;
} .zh-form [data-name="anrede"] .wpcf7-radio {
display: flex;
gap: 32px;
}
.zh-form [data-name="aufmerksam"] .wpcf7-radio {
display: flex;
flex-direction: column;
gap: 9px;
} .zh-form [data-name="aufmerksam"] .wpcf7-list-item-label {
color: var(--wp--preset--color--off-white);
} .zh-form p:has([data-name="andere"]) {
display: none;
}
.zh-form p:has(input[value="Andere"]:checked) + p:has([data-name="andere"]) {
display: block;
} .zh-form p:not(:has(*)) {
margin: 62px 0 24px;
color: var(--wp--preset--color--off-white);
} .zh-form p:has(.wpcf7-submit) {
display: flex;
align-items: center;
margin: 64px 0 0;
}
.zh-form p:has(.wpcf7-submit) .wpcf7-form-control-wrap {
margin-right: auto;
}
.zh-form .wpcf7-submit {
flex: none;
padding: 0.1875em 0.9em;
border: 1px solid var(--wp--preset--color--off-white);
border-radius: 100px;
background: var(--wp--preset--color--off-white);
color: var(--wp--preset--color--black);
font: inherit;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.0195em;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
} .zh-form .wpcf7-submit:hover:not(:disabled) {
background: transparent;
color: var(--wp--preset--color--off-white);
} .zh-form .wpcf7-submit:disabled {
opacity: 0.4;
}  .zh-form .wpcf7-not-valid {
box-shadow: inset 0 0 0 2px var(--zh-form-invalid);
}
.zh-form .wpcf7-not-valid-tip {
padding: 7px 0 0 var(--zh-form-field-pad);
color: var(--zh-form-invalid);
font-size: 16px;
} .wpcf7 .zh-form .wpcf7-response-output {
margin: 28px 0 0;
padding: 0;
border: 0;
color: var(--wp--preset--color--off-white);
font-size: 16px;
} .zh-form .wpcf7-spinner {
margin: 0 0 0 20px;
background-color: var(--wp--preset--color--off-white);
}
.zh-form .wpcf7-spinner::before {
background-color: var(--wp--preset--color--black);
} .zh-form__intro {
margin: 10px 0 44px;
color: var(--wp--preset--color--gray-light);
font-size: 18px;
}  @media (max-width: 1024.98px) { .entry-content > .wp-block-group.has-background {
--zh-section-pad-bottom: 3em;
padding-top: 3em;
padding-bottom: var(--zh-section-pad-bottom);
padding-left: 2em;
padding-right: 2em;
}  .zh-hero__title {
font-size: clamp(2rem, 7.4vw, 4.25em);
}
.zh-hero__logo img {
height: 5em;
}  .zh-menu__nav .wp-block-navigation-item__content {
padding-top: 8px;
padding-bottom: 8px;
}
.zh-footer__social .wp-block-social-link-anchor {
padding: 10px;
} .wp-block-button__link,
.zh-filter,
.zh-projekte-more {
padding-top: 10px;
padding-bottom: 10px;
} .zh-cta {
padding-top: 88px;
padding-bottom: 64px;
}
.zh-cta__title {
font-size: 48px;
}
.zh-news-card__more {
padding: 13px 0;
}
.zh-pgallery__close,
.zh-videopopup__close {
width: 44px;
height: 44px;
} .zh-menu__nav .wp-block-navigation-item__content,
.zh-footer__legal a,
.zh-footer__addr a {
position: relative;
} .zh-menu__nav .wp-block-navigation-item__content::after {
content: "";
position: absolute;
inset: 0 -7px;
}
.zh-footer__legal a::after,
.zh-footer__addr a::after {
content: "";
position: absolute;
inset: -15px -4px;
} .zh-pgallery__thumb {
width: 80px;
height: 56px;
flex: 0 0 auto;
} .zh-news-panel {
overscroll-behavior: contain;
} .zh-team-card__email {
padding-top: 8px;
padding-bottom: 8px;
}
.zh-news-panel__close {
width: 44px;
height: 44px;
} .zh-news-panel {
padding-top: 68px;
}
.zh-footer__legal {
font-size: 14px;
}  .zh-wirhero > .wp-block-group {
padding: 56px 2em;
}   .zh-cta {
padding-left: 2em;
padding-right: 2em;
}
.zh-footer {
width: calc(100% - 40px);
padding-left: 2em;
padding-right: 2em; padding-bottom: 124px;
} .zh-news-open .zh-menu { opacity: 0 !important;
pointer-events: none;
transition: opacity 0.3s ease;
}  .zh-form {
--zh-form-width: 100%;
}
} @media (min-width: 901px) and (max-width: 1024.98px) {
.zh-wirhero__img--2 {
left: auto;
right: 2em;
}
}
@media (max-width: 900px) { .zh-hero__head {
flex-direction: column-reverse;
align-items: flex-start;
gap: 1.25em;
margin-bottom: 1.75em;
}
.zh-hero__logo {
align-self: flex-end;
}  .wp-block-post-template .wp-block-media-text,
.wp-block-post-template > li:nth-child(even) .wp-block-media-text {
flex-direction: column;
gap: 1.25em;
}
.wp-block-post-template .wp-block-media-text__media {
width: 100%;
height: clamp(200px, 56vw, 320px);
} .wp-block-post-template > li:nth-child(even) .wp-block-media-text__media::after {
right: 16px;
left: auto;
}  .zh-newstab {
top: 33%; width: 34px;
height: 92px;
}
.zh-newstab a {
font-size: 14px;
} .zh-news-open .zh-newstab {
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
} .zh-scrolled-down .zh-newstab { transform: translateY(-50%) translateX(calc(100% + 1px));
} .zh-footer__top {
flex-wrap: wrap;
} .wp-block-post.is-expanded .wp-block-media-text__media {
width: 100%;
height: auto;
padding-left: 0;
} .wp-block-post-template > li:nth-child(even) .zh-pgallery__close {
left: auto;
right: 16px;
}
.zh-pgallery__thumbs {
top: 12px;
left: 12px;
right: 12px;
bottom: auto;
width: auto; height: 44px;
flex-direction: row;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.zh-pgallery__thumbs::-webkit-scrollbar {
display: none;
}
.zh-pgallery__thumb {
width: 64px;
height: 44px;
}
.zh-pgallery__thumb img {
height: 100%;
object-fit: cover;
}
} @keyframes zh-menu-in-sm {
0% {
opacity: 0;
transform: translateY(150%);
max-width: 58px;
padding-right: 6px;
}
40% {
opacity: 1;
transform: translateY(0);
max-width: 58px;
padding-right: 6px;
}
100% {
opacity: 1;
transform: translateY(0);
max-width: min(480px, 100vw - 32px);
padding-right: 20px;
}
}
@media (max-width: 600px) {
.zh-menu {
animation-name: zh-menu-in-sm;
}
.entry-content > .wp-block-group.has-background {
--zh-section-pad-bottom: 2.25em;
padding-top: 2.25em;
padding-bottom: var(--zh-section-pad-bottom);
padding-left: 1.25em;
padding-right: 1.25em;
}
.zh-hero__logo img {
height: 4em;
} .entry-content h2.wp-block-heading {
font-size: 2.4em;
}
.wp-block-post-template .wp-block-post-title {
font-size: 1.5em;
} .zh-filter-bar__broschuere {
margin-left: 0;
} .zh-filter-bar {
margin-top: 2em;
row-gap: 12px;
} .wp-block-post.is-expanded .wp-block-media-text__media > img {
min-height: 240px;
object-fit: cover;
}
.zh-wirhero > .wp-block-group {
padding: 40px 1.25em;
} .zh-wirhero__sub {
font-size: 18px;
line-height: 26px;
max-width: none;
} .entry-content h2.zh-werwirsind__title {
font-size: min(2.4em, 13vw);
}  .zh-team-card__name {
font-size: min(30px, 10vw);
line-height: 1.25;
}
.zh-cta {
padding-top: 56px;
padding-bottom: 44px;
}
.zh-footer {
width: calc(100% - 24px); padding-top: 32px;
padding-left: 20px;
padding-right: 20px;
} .zh-footer__legal a {
margin: 0 20px 0 0;
} .zh-form {
--zh-form-field-h: 44px;
--zh-form-field-pad: 20px;
--zh-form-row-gap: 18px;
--zh-form-mark: 32px;
font-size: 16px;
}
.zh-form textarea {
height: 140px;
}
.zh-form p:not(:has(*)) {
margin: 40px 0 16px;
} .zh-form p:has(.wpcf7-submit) {
display: block;
margin-top: 32px;
}
.zh-form .wpcf7-submit {
margin-top: 20px;
}
.zh-form__intro {
margin-bottom: 32px;
font-size: 16px;
}
}