* {
--header-height: 50px;
--padding-side: 10px;
--font-size-tiny: calc(12vw / 375 * 100);
--font-size-small: calc(14vw / 375 * 100);
--font-size-default: calc(16vw / 375 * 100);
--font-size-medium: calc(18vw / 375 * 100);
--font-size-large: calc(20vw / 375 * 100);  
}
.desktop {
display: none;
}  
.mobile {
display: block;
}  
A {
transition: none !important;
} HEADER {
width: 100vw;
background: #fff;
z-index: 11;
}
HEADER #top {
height: var(--header-height);
padding: 0 var(--padding-side);
position: relative;
}
HEADER #logo {
padding: 0;
}  
HEADER #logo .hover {
display: block;
}
HEADER #logo .default {
display: none;
}  
HEADER A {
font-size: calc(22vw / 375 * 100);
line-height: var(--header-height);
}  
HEADER #link-menu {
left: auto;
right: var(--padding-side);
}  
HEADER #menu {
top: var(--header-height);
display: block;
z-index: 11;
}  
HEADER #menu .deco {
display: none;
}  
HEADER #menu .tile {
font-size: calc(28vw / 375 * 100);
line-height: 1.2;
padding: var(--padding-side);
border-top: 2px solid #fff;
min-height: calc((100dvh - var(--header-height)) / 6);
}
HEADER #menu .tile.t2 {
border-top: none !important;
}  
HEADER #back {
display: block;
width: var(--header-height);
height: var(--header-height);
line-height: var(--header-height);
z-index: 10;
}  
HEADER #back I {
font-size: calc(15vw / 375 * 100);
line-height: var(--header-height);
}  
HEADER #language {
right: calc(100vw / 375 * 100);
line-height: var(--header-height);
}  
HEADER #language LI A:before,
HEADER #language UL LI:before {
font-size: calc(14vw / 375 * 100) !important;
line-height: var(--header-height) !important;
}  
HEADER #language UL LI:before {
padding: 0 calc(3vw / 375 * 100);
}  
.subheader {
padding: 0 var(--padding-side);
padding-top: var(--header-height);
font-size: calc(22vw / 375 * 100);
line-height: var(--header-height);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}  
.page-template-auszeichnungen .subheader,
.page-template-kunden .subheader {
display: none;
}  
.page-template-auszeichnungen MAIN,
.page-template-kunden MAIN {
padding-top: var(--header-height) !important;
} #burger {
width: var(--header-height);
height: var(--header-height);
}
#burger SPAN {
width: 24px;
height: 2px;
right: 15px;
}
#burger span:nth-child(1) {
top: 16px;
}
#burger span:nth-child(2) {
top: 24px;
}
#burger span:nth-child(3) {
top: 32px;
}
BODY.menu #burger span:nth-child(1) {
width: 0%;
}
BODY.menu #burger span:nth-child(2) {
transform: rotate(45deg);
}
BODY.menu #burger span:nth-child(3) {
transform: rotate(-45deg);
top: 24px;
} MAIN,
BODY.home MAIN {
padding-top: var(--header-height); 
}
#grid {
display: block;
height: auto;
}  
#grid .project {
display: none;
}  
#grid .slider {
display: block;
overflow: hidden;
}
#grid .slider .swiper {
height: 67.2vw;
}  
#grid .swiper .swiper-slide {
height: auto;
}  
#grid .swiper IMG,
#grid .swiper VIDEO { 
width: 100%;
height: auto;
}
#grid .slider {
position: relative;
} 
#grid .slider .swiper-pagination {  
transition: 0.2s;
z-index: 3;
padding: 0 7px;
opacity: 0;
}
#grid .slider:hover .swiper-pagination {
top: calc(100% - calc(25vw / 375 * 100));
line-height: calc(25vw / 375 * 100);
opacity: 1;
}  
#grid .slider:hover FIGCAPTION {
bottom: 0;
}  
#grid .slider .description {
background: #fff;
}
#grid .slider .description .padding {    
padding: 10px 7px;
font-family: "avenir-next-lt-pro", sans-serif;
font-size: calc(14vw / 375 * 100);
line-height: 1.5;
}
#grid .slider .description .padding P {    
margin-bottom: 1.5em;
} #intro {
padding: 40px 10px 40px 10px;
font-size: calc(34vw / 375 * 100);
margin-bottom: 0;
} MAIN.columns {
flex-direction: column;
gap: 0px;
padding-top: var(--header-height);
}
MAIN.columns .left,
MAIN.columns .right {  
padding: 10px;
width: 100%;
}
MAIN.columns .back {
display: block;
width: 100%;
position: static;
order: 3;
text-align: right;
padding: var(--padding-side);
} FIGCAPTION {
display: block;
font-size: calc(17vw / 375 * 100);
line-height: calc(25vw / 375 * 100);
bottom: calc(80vw / 375 * -100);
padding: 0 7px;
z-index: 1;
} .swiper-pagination {  
display: flex !important;
justify-content: flex-end;
gap: 1px; 
font-size: calc(17vw / 375 * 100);
line-height: 1.5;
top: 100%;
bottom: auto;
left: auto;
right: 0;
text-align: right;
padding: 5px 10px;
width: 100px;
text-align: right;
} .single-project {
height: auto;
}
.single-project HEADER {
display: block;
} 
.single-project HEADER #back {
display: block;
}     
.single-project MAIN {
overflow: hidden;
}  
.single-project .swiper {
position: relative;
height: auto;
overflow: visible;
margin-bottom: 5px;
}
.single-project .swiper .swiper-wrapper {   
height: 67.2vw !important;
overflow
}  
.single-project .swiper .swiper-slide {   
height: auto !important;
}
.single-project .text {
position: static;
height: auto;
}  
.single-project .swiper .swiper-slide IMG, 
.single-project .swiper .swiper-slide VIDEO {
width: 100vw !important;
height: auto !important;
aspect-ratio: 375 / 252;
}  
.single-project .swiper .swiper-button-next {
display: none;
}  
.single-project .text .toggle {
display: none;
}  
.single-project .text .head {
font-size: calc(17vw / 375 * 100);
line-height: 1.5;
padding-right: calc(50vw / 375 * 100);
}  
.single-project .text .content {
padding-top: 30px;
padding-bottom: 50px;
opacity: 1;
}  
.single-project .text .content P {
font-size: calc(14vw / 375 * 100);
}  
.single-project .text .scrollable {
overflow: hidden;
height: auto;
} #toolbar {
height: var(--header-height);
background: #000;
color: #fff;
position: fixed;
z-index: 10;
top: var(--header-height);
left: 0;
width: 100vw;
font-size: calc(22vw / 375 * 100);
}
#toolbar #search,
#toolbar #order,
#toolbar #tags {
position: static;
} 
#toolbar #search { 
position: absolute;
z-index: 1;
top: 0;
left: 0;
padding-left: 10px;
height: 100%;
width: 100%;
}
#toolbar #search I {
display: block;
font-size: calc(17vw / 375 * 100);
width: var(--header-height);
line-height: var(--header-height);
text-align: center;
}
#toolbar #search FORM {
position: absolute;
width: 0;
height: 100%;
left: var(--header-height);
right: 0;
top: 0;
transition: 0.2s;
}  
#toolbar #search INPUT {  
width: 100%;
height: 100%;
background: #000;
color: #fff;
font-size: calc(22vw / 375 * 100);
}  
#toolbar #order {
position: absolute;
z-index: 2;
top: 0;
font-size: calc(22vw / 375 * 100);
line-height: var(--header-height);
width: 200px;
left: 50%;
margin-left: -105px;
text-align: center;
color: #fff;
transition: 0.2;
}
#toolbar #tags {
position: absolute;
z-index: 2;
top: 0;
font-size: calc(22vw / 375 * 100);
line-height: var(--header-height);
left: auto;
right: 10px;
transition: 0.2;
}  
#toolbar A {
color: #fff;
}  
#toolbar.search #order,  
#toolbar.search #tags {
opacity: 0;
}
#toolbar.search #search {
z-index: 3;
}  
#toolbar.search #search FORM {
width: calc(100vw - var(--header-height));
} #masonry.narrow {
width: 100%;
float: none;
}  
#archiv.masonry {
position: relative;
padding-top: calc(var(--header-height)*2);
top: 0;
}  
#archiv.masonry .tile {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100vw;
overflow: hidden;
}
#archiv.masonry .tile:before {  
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5) url(//www.saegenvier.at/wp-content/themes/saegenvier-2025/assets/img/loading.svg) no-repeat center center;
opacity: 0;
transition: 0.2s;
visibility: hidden;
}
#archiv.masonry .tile.loading:before {    
opacity: 1;
visibility: visible;
}
#archiv.masonry .tile.loaded {
aspect-ratio: auto;
}
#archiv.masonry .tile.loaded > FIGURE,
#archiv.masonry .tile.loaded > FIGCAPTION {  
display: none;
}
#archiv.masonry .tile FIGCAPTION {  
display: none;
}
#archiv .details {
position: relative;
top: auto;
bottom: auto;
width: 100%;
height: auto;
overflow-y: auto;
opacity: 0;
transition: 0.2s;
} 
#archiv .tile.loaded .details {
opacity: 1;
}  
#archiv .details ARTICLE {
min-height: 0px;
}
#archiv .details ARTICLE .swiper-pagination {
font-size: calc(17vw / 375 * 100);
padding: 5px 10px;
}  
#archiv .details ARTICLE .swiper .swiper-slide IMG {
opacity: 1 !important;
}  
#archiv .details ARTICLE .text {
padding: 0px 10px 5px 10px;
}  
#archiv .details ARTICLE .text .title {
font-size: calc(17vw / 375 * 100);
padding-top: 5px;
padding-right: calc(75vw / 375 * 100);
}  
#archiv .details ARTICLE .text P {
font-size: calc(14vw / 375 * 100);
}  
#archiv .details ARTICLE .bottom {
padding: 10px;
font-size: calc(14vw / 375 * 100);
}  
#archiv .details ARTICLE .bottom A { 
font-size: calc(14vw / 375 * 100);
} #archiv.tags {
padding-top: calc(var(--header-height)*2);
}  
#archiv.tags .grid {
display: block;
height: auto;
}
#archiv.tags .grid .item {
display: block;
position: relative;
float: none;
}  
#archiv.tags .item IMG {
aspect-ratio: 375 / 252;
width: 100%;
height: auto;
}  
#archiv.tags .item.portrait IMG,
#archiv.tags .item.large IMG {
aspect-ratio: 375 / 375;
}  
#archiv.tags .grid .item FIGCAPTION {
width: 100vw;
white-space: nowrap;
}  
#kunden .left H3, 
#kunden .left A {
font-size: calc(12vw / 375 * 100);
} #auszeichnungen .left H3,
#auszeichnungen .left P {
font-size: calc(12vw / 375 * 100);
} MAIN.columns .left {
order: 2;
}
MAIN.columns .right.gallery {
position: static;
order: 1;
}
MAIN.columns .right.gallery .swiper-pagination {  
padding: 0;
float: right;
} #kontakt #social #menu-item-26285 {
padding: 0px;
position: absolute;
}
#kontakt #social #menu-item-26285 A {  
font-size: 14px;
}
#kontakt #map {
margin-top: 0;
}  
#kontakt #social {
position: relative;
padding-bottom: 70px;
} #impressum.columns .left {
order: 1;
padding-bottom: 50px;
margin-bottom: 40px;
position: relative;
}
#impressum.columns .left P {  
font-size: 14px;
}
#impressum.columns .left .back {  
position: absolute;
padding: 10px;
font-size: 14px;
}
#impressum.columns .right {
order: 2;
} 
#impressum.columns .right P {   
font-size: 14px;
} #team {
padding-top: var(--header-height);
}
#team .tile {
width: 100%;
aspect-ratio: auto;
}  
#team .tile.head.black {  
aspect-ratio: 384 / 258;
}
#team .tile > .name {
position: static !important;
font-size: calc(17vw / 375 * 100);
height: calc(26vw / 375 * 100);
line-height: calc(26vw / 375 * 100);
padding-left: 10px;
}  
#team .tile.head {
font-size: calc(28vw / 375 * 100);
padding: 10px;
} 
#team .tile.empty {   
display: none;
}
#team .tile FIGURE {
position: static;
}  
#team .tile FIGURE IMG {  
width: 100vw;
height: auto;
}
#team .tile .details {
padding: 10px;
padding-top: 0;
position: static;
} 
#team .tile.coworking .details {
padding: 10px;
padding-top: 0;
position: static;
background: #F4E7D1;
}   
#team .tile .details .contact {
font-size: calc(17vw / 375 * 100);
padding-top: 10px;
margin-bottom: 1em;
}  
#team .tile .details .contact .name {  
display: none;
}
#team .tile .details .description {    
font-size: calc(14vw / 375 * 100);
}
#team .tile .details .description P {    
margin-bottom: 1em;
}
#team .tile .details .top {
display: none;
}
#team #details {
display: none !important;
}  
#team #masonry.show-details {
height: auto !important;
}  
#team #masonry.show-details .tile {
position: static !important;
}