@font-face {
font-family: 'Syne';
src: url(//felix-oeder.de/wp-content/themes/foefotografie/css/fonts/syne-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Syne';
src: url(//felix-oeder.de/wp-content/themes/foefotografie/css/fonts/syne-bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//felix-oeder.de/wp-content/themes/foefotografie/css/fonts/inter-light.woff2) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(//felix-oeder.de/wp-content/themes/foefotografie/css/fonts/inter-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
} .s-portfolio-masonry-grid {
column-count: 3;
column-gap: 15px;
width: 100%;
margin-top: 30px;
font-family: 'Inter', sans-serif;
}
@media (max-width: 1024px) {
.s-portfolio-masonry-grid {
column-count: 2;
}
}
@media (max-width: 600px) {
.s-portfolio-masonry-grid {
column-count: 1;
column-gap: 0;
}
}
.s-masonry-item {
break-inside: avoid;
margin-bottom: 15px;
}
.s-masonry-item img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
transition: transform 0.3s ease;
} @media (hover: hover) and (pointer: fine) {
.s-masonry-item img:hover {
transform: scale(1.02);
}
}
.s-masonry-item a {
cursor: zoom-in;
display: block;
} html.page-template-page-startseite,
body.page-template-page-startseite {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
cursor: none;
font-family: 'Inter', sans-serif; position: fixed;
overscroll-behavior: none;
}
body.page-template-page-startseite .site-header,
body.page-template-page-startseite .site-footer {
display: none !important;
} .cinematic-cursor {
position: fixed;
top: 0;
left: 0;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.cinematic-cursor-text {
color: #000;
font-family: 'Syne', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.2s ease;
white-space: nowrap;
}
body.page-template-page-startseite.cursor-hover .cinematic-cursor {
width: 80px;
height: 80px;
background-color: #fff;
border-color: #fff;
mix-blend-mode: difference;
}
body.page-template-page-startseite.cursor-hover .cinematic-cursor-text {
opacity: 1;
} .cinematic-top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 60px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
pointer-events: none;
}
.cinematic-brand {
color: #fff;
font-family: 'Syne', sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
pointer-events: auto;
}
.cinematic-index-toggle {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-family: 'Syne', sans-serif;
padding: 10px 22px;
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 30px;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.cinematic-index-toggle:hover {
background-color: #fff;
color: #000;
border-color: #fff;
}
} .cinematic-index-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.96);
z-index: 200;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.cinematic-index-overlay.active {
opacity: 1;
visibility: visible;
}
.cinematic-index-close {
position: absolute;
top: 40px;
right: 60px;
background: none;
border: none;
color: #fff;
font-family: 'Syne', sans-serif;
font-size: 1.1rem;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
padding: 10px;
}
.cinematic-index-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 900px;
position: relative;
z-index: 2;
}
.cinematic-index-item {
margin-bottom: 20px;
}
.cinematic-index-link {
color: rgba(255, 255, 255, 0.4);
font-family: 'Syne', sans-serif;
font-size: 3.5rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: color 0.3s ease, padding-left 0.3s ease;
display: inline-block;
word-break: break-word;
}
@media (hover: hover) and (pointer: fine) {
.cinematic-index-link:hover {
color: #fff;
padding-left: 20px;
}
}
.cinematic-index-preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease;
}
.cinematic-index-preview img {
position: absolute;
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
width: 450px;
height: 300px;
object-fit: cover;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s ease;
} .cinematic-container {
display: flex;
flex-wrap: nowrap;
width: 100vw;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; 
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.cinematic-container::-webkit-scrollbar {
display: none;
}
.cinematic-slide {
flex: 0 0 100vw;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
position: relative;
overflow: hidden;
}
.cinematic-img-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
}
.cinematic-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.08);
transition: filter 0.1s ease-out, transform 0.1s ease-out;
filter: blur(0px);
}
.cinematic-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 80%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 60px;
box-sizing: border-box;
text-decoration: none;
z-index: 2;
will-change: transform, opacity;
}
.cinematic-title {
color: #fff;
font-family: 'Syne', sans-serif;
font-size: 3rem;
font-weight: 700;
letter-spacing: 2px;
margin: 0;
text-transform: uppercase;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
word-break: break-word;
}
.cinematic-subtitle {
color: #aaa;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.1rem;
margin-top: 10px;
letter-spacing: 1px;
word-break: break-word;
} .cinematic-indicators {
position: fixed;
bottom: 30px;
right: 60px;
display: flex;
gap: 10px;
z-index: 10;
}
.cinematic-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.cinematic-dot.active {
background-color: #ffffff;
transform: scale(1.3);
} @media (max-width: 768px) {
html.page-template-page-startseite,
body.page-template-page-startseite {
cursor: auto;
overflow-y: auto;
}
.cinematic-cursor {
display: none !important;
}
.cinematic-top-bar {
padding: 20px 20px;
}
.cinematic-brand {
font-size: 0.9rem;
letter-spacing: 2px;
}
.cinematic-index-toggle {
padding: 6px 14px;
font-size: 0.7rem;
letter-spacing: 1px;
}
.cinematic-index-overlay {
padding: 90px 20px 30px 20px;
justify-content: flex-start;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cinematic-index-close {
top: 20px;
right: 20px;
font-size: 0.9rem;
}
.cinematic-index-list {
max-width: 100%;
}
.cinematic-index-item {
margin-bottom: 15px;
}
.cinematic-index-link {
font-size: 1.8rem;
letter-spacing: 1px;
}
.cinematic-index-preview {
display: none !important;
}
.cinematic-overlay {
padding: 30px 20px;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
}
.cinematic-title {
font-size: 1.6rem;
letter-spacing: 1px;
line-height: 1.2;
}
.cinematic-subtitle {
font-size: 0.85rem;
margin-top: 6px;
}
.cinematic-indicators {
right: 20px;
bottom: 20px;
}
} @media (max-height: 500px) and (orientation: landscape) {
.cinematic-index-overlay {
padding-top: 70px;
padding-bottom: 20px;
}
.cinematic-index-link {
font-size: 1.4rem;
}
.cinematic-index-item {
margin-bottom: 10px;
}
.cinematic-overlay {
padding: 20px;
}
.cinematic-title {
font-size: 1.3rem;
}
}