@charset "UTF-8";
/* CSS Document */
/* Satoshi */
@font-face {
  font-family: 'Satoshi-Variable';
  src: url('Satoshi-Variable.woff2') format('woff2'),
       url('Satoshi-Variable.woff') format('woff'),
       url('Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('Satoshi-VariableItalic.woff2') format('woff2'),
       url('Satoshi-VariableItalic.woff') format('woff'),
       url('Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


/* Styling */
*{
hyphens: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body{
font-family: 'Satoshi-Variable', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: .02em;
color: #fff;
font-size: 22px;
line-height: 32px;
hyphens: auto;
background: #000;
margin: 0;
padding: 0;
box-sizing: border-box; 
}
.preload{
display: none;
}
/* Fonts */
.merriweather-italic{
font-family: 'Satoshi-VariableItalic';
font-weight: normal;
font-style: italic;
}
.roboto-regular {
font-family: 'Satoshi-Variable';
font-weight: 500;
font-style: normal;
}
.roboto-light {
font-family: 'Satoshi-Variable';
font-weight: 300;
font-style: normal;
}
.roboto-light-italic {
font-family: 'Satoshi-VariableItalic';
font-weight: 300;
font-style: italic;
}
.roboto-medium {
font-family: 'Satoshi-Variable';
font-weight: 600;
font-style: normal;
}
/* Typo */
h1{
text-transform: uppercase;
font-size: 2em;
line-height: 1.2em;
border-top: solid 2px #000;
padding: 1em 0 0 0;
margin: .5em 0 .5em 0;
font-weight: 500;
font-style: normal;
flex-basis: 100%;
}
h2{
text-transform: uppercase;
font-size: 1.6em;
line-height: 1.2em;
padding: 0;
margin: .5em 0;
font-weight: 500;
font-style: normal;
color: #ffcc00;
flex-basis: 100%;
}
h3{
text-transform: uppercase;
padding: 0;
margin: 1em 0 .3em 0;
font-weight: 700;
font-style: normal;
}
p{
margin: .5em 0 1em 0;
padding: 0;
}
p a{
color: #ffcc00;
text-decoration: none;
}
p a:hover, a:focus, a:active{
color: #fff;
text-decoration: underline;
}
strong, b {
font-weight: 800;
}
 .yellow{
 color: #ffcc00; 
 }
/* Links Global */
a, a:visited{
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: none;
}
.cookieconsent-optout-marketing a{
color: #ffcc00;
}
hr {
height: 1px;
background-color: #ffcc00;
flex-basis: 100%;
margin: 2em 0;
border: none;
}
img {
width: 100%;
height: auto;
}
.img-box{
margin: 1em 0;
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.img-box img{
width: auto;
max-width: 100%;
flex-basis: auto;
max-height: 48vh;
margin:0!important;
}
.margin-img{
margin: 1em 0 2em 0;
}
/* Video Stratseite */
.header-wrapper {
position: relative;
width: 100%;
background-color: #000;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
}
.header-wrapper video {
position: absolute;
top: 0;
left: 50%;
min-width: 100%;
min-height: 100vh;
width: auto;
height: auto;
transform: translate(-50%, -0%); 
margin: 0;
padding: 0;
z-index: 1;
pointer-events: auto !important; 
object-fit: cover; /* Sorgt dafür, dass das Video das Seitenverhältnis beibehält und den ganzen Bereich füllt */
}
.header-wrapper video::-webkit-media-controls {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.header-wrapper video::media-controls {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Navigate */
.anchor{
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.top-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: auto;
padding: .5em 2em;
max-width: 90%;
margin: 0 auto;
z-index: 1234;
}
.home .top-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: auto;
padding: .5em 2em;
width: 90vw;
margin: 0 auto;
z-index: 1234;
position: absolute;
top: 0;
left: 5%;
background: rgba(0,0,0,0.6);
}
.scroll-down{
position: absolute;
width: 100%;
height: auto;
bottom: 2em;
left: 0;
z-index: 123;
}
.scroll-down a{
display: block;
width: 100%;
height: 4em;
line-height: 4em;
background-image: url("../images/layout/scroll-mouse.svg");
background-repeat: no-repeat;
background-position: center;
background-size: auto 2.8em;
filter: invert(0%);
transition: filter ease .4s;
}
.scroll-down a:hover{
filter: invert(100%);
}
.menu {
display: flex;
flex-direction: row;
list-style-type: none;
margin: 4.6em 0 0 0;
padding: 0 0 1em 0;
}
.menu-button-container {
display: none;
height: 100%;
width: 30px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
margin:0 1em 0 0;
}
.menu a{
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
color: #ffcc00;
}
.menu a:before{
content: "/";
}
.menu a:hover, a:focus, a:active{
color: #00ccff;
}
.marked{
color: #fff !important;
}
.small-link-marked{
font-weight: 600;
font-style: normal;
font-size: .8em;
color: #fff !important;
text-decoration: underline!important;
}
.small-link{
font-weight: 300;
font-style: normal;
font-size: .8em;
}
#menu-toggle {
display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #ffcc00;
position: absolute;
height: .2em;
width: 2em;
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-button::before {
content: '';
margin-top: -.6em;
}
.menu-button::after {
content: '';
margin-top: .6em;
}
#menu-toggle:checked + .menu-button-container .menu-button::before {
margin-top: 0px;
transform: rotate(405deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
background: #000;
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
margin-top: 0px;
transform: rotate(-405deg);
}
.menu li{
height: auto;
padding: .3em;
margin: 0 .3em;
}
.logo-link{
margin: 1em 0 0 .8em;
width: 22em;
display: inline-flex;
height: 8em;
background-image: url("../images/layout/foodstyling_landsberg_logo_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 22em auto;
padding: 1em;
}
.logo-link a{
display: block;
width: 100%; 
height:8em;
text-decoration: none;
}
.logo-link:hover{
background-image: url("../images/layout/foodstyling_landsberg_logo_02.svg");
text-decoration: none;
}
.logo-link:focus{
background-image: url("../images/layout/foodstyling_landsberg_logo_02.svg");
text-decoration: none;
}
.logo-link:active{
background-image: url("../images/layout/foodstyling_landsberg_logo_02.svg");
text-decoration: none;
}
.content{
display: flex;
justify-content: space-between;
padding:0 3em;
flex-wrap: wrap;
max-width: 90%;
margin: 0 auto;
}
.content-full{
flex-basis: 100%;
}
.content-half{
flex-basis: 49%;
}
.content-third{
flex-basis: 31%;
}
.content-fourth{
flex-basis: 24%;
}
.round-border{
border-radius: 1em;
}
.teaser-box{
background-color: #000;
margin: 1em 0;
border: solid 1px #ffcc00;
box-sizing: border-box;
padding: .6em .6em 2em .6em;
border-radius: 2em;
background-image: url("../images/layout/brown-arrow.svg");
background-repeat: no-repeat;
background-size: 1.4em;
background-position: center 94%;
cursor: pointer;
transition: all ease .6s;
}
.teaser-box h3{
margin-left: 1em;
margin-right: 1em;
color: #ffcc00;
text-align: center;
transition: all ease .6s; 
font-size:1.68em;
}
.teaser-box p{
margin-left: 1em;
margin-right: 1em;
color: #ffcc00;
text-align: center;
transition: all ease .6s;
font-size: .88em;
line-height: 1.2em;
}
.teaser-box img{
border-radius: 1.4em 1.4em 0 0;
}
.teaser-box:hover{
transform: scale(1.05);
border: solid 1px #fff; 
background-position: 94% 94%;
}
.teaser-box:hover h3{
color: #fff;
}
.teaser-box:hover p{
color: #fff;
}
#reel{
position: relative;
top: 5px;
height: auto;
padding:0;
display: block;
overflow: hidden;
width: 100%;
margin: .5em 0 2em 0;
}
video{
width: 100%; 
height: 56.25%;
}
.clipbox{
flex-basis: 32.8%;
margin: .5em 0 0 0;
min-height: 250px;
}
.clipbox iframe{
width: 100%; 
height: 56.25%;
min-height: 18vw;
border: none;
}
.clipbox-xl{
flex-basis: 49%;
margin: .5em 0 1em 0;
min-height: 250px;
}
.clipbox-xl iframe{
width: 100%; 
height: 56.25%;
min-height: 24vw;
border: none;
}
.clip_description{
margin: .5em 0 1em 0;
display: block;
text-transform: uppercase;
font-size: .9em;
line-height: 1.1em;
}
.mail_button{
font-weight: 500;
display: inline-block;
line-height: 2.5em;
font-size: 1em;
padding: .5em 1em .5em 3em;
background-color: #ffcc00;
text-decoration: none;
color: #000;
text-transform: uppercase;
background-image:url(../images/layout/letter_icon_black.svg);
background-position: .6em center;
background-repeat: no-repeat;
background-size: 1.7em 1.7em;
transition: all ease-in-out .5s;
}
.mail_button:hover{
color: #000;
text-decoration: none;
transition: all ease-in-out .5s;
background-color: #F6F3EF;
}
footer{
font-size: .9em;
line-height: 1.6em;
text-transform: uppercase;
border-top: solid 1px #ffcc00; 
display: flex;
justify-content: flex-end;
width: calc(90% - 6em);
min-height: 10em;
padding: 1em 0;
background-image: url("../images/layout/foodstyling_instruments.svg");
background-repeat: no-repeat;
background-position: 0 2em;
background-size: 14vw auto;
flex-wrap: wrap;
max-width: 90%;
margin: 5em  auto;
}
footer::after{
content:'© 2026 Tim Landsberg – Foodstyling for advertising';
font-size: .6em;
display: block;
width: 100%;
height: 2em;
color: #ffcc00;
}
footer a{
color: #ffcc00;
text-decoration: none;
}
footer a:hover, a:focus, a:active{
color: #fff;
}
footer div{
flex-basis: 24%;
margin: 0;
}
footer div:first-of-type{
margin-left: 16vw;
}
.youtube-link{
background-image:url("../images/layout/youtube_icon_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 1.8em auto;
display: inline-block;
line-height: 2em;
width: 100%;
padding: 0 0 0 3em;
float: right;
margin:0;
}
.youtube-link:hover{
background-image:url("../images/layout/youtube_icon_02.svg");
}
.insta{
background-image:url("../images/layout/insta_icon_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 1.4em auto;
display: inline-block;
line-height: 2em;
width: 100%;
padding: 0 0 0 3em;
float: right;
margin: 0 0 2em 0;
}
.insta:hover{
background-image:url("../images/layout/insta_icon_02.svg");
}
.to-top-link{
background-image:url("../images/layout/to-top-01.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 3em;
display: inline-block;
height:4em;
width: 4em;
float: right;
}
.to-top-link:hover{
background-size: 4em;
transition: all ease .3s;
}
.CookieDeclaration {
display: none;
}


/* Media Queries */
@media (max-width: 1760px) {
.logo-link{
margin: 1em 0 0 .8em;
width: 16em;
display: inline-flex;
height: 6em;
background-image: url("../images/layout/foodstyling_landsberg_logo_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 16em auto;
padding: 1em;
}
.logo-link a{
height: 4em;
} 
}

@media (max-width: 1620px) {
 body{
 font-size: 18px;
 line-height: 28px;
 }

.top-nav {
padding: 1em 2em;
width: 100%;
max-width: 100%;
margin: 0;
font-size: .9em;
}
.home .top-nav{
padding: 1em 2em;
width: 100%;
max-width: 100%;
margin: 0;
font-size: .9em;
left: 0;
}
.logo-link{
margin: 1em 0 0 .8em;
width: 14em;
display: inline-flex;
height: 6em;
background-image: url("../images/layout/foodstyling_landsberg_logo_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 14em auto;
padding: 1em;
}
.logo-link a{
height: 4em;
}
.content{
max-width: 100%;
margin: 0 auto;
padding:0 1em;
}
.img-box img{
width: auto;
flex-basis: auto;
max-height:36vh;
}  
footer{
justify-content: flex-end;
margin: 5em 1em;
width: calc(100% - 2em);
max-width: none; 
background-size: 20vw auto;
}
footer div{
margin: 2em 0 0 0;
}
footer div:first-of-type{
margin-left: 24vw;
}
}
@media (max-width: 1160px) {
.logo-link{
margin: 1em 0 0 0;
width: 28vw;
display: inline-flex;
height: 4em;
background-image: url("../images/layout/foodstyling_landsberg_logo_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size:28vw auto;
padding: 1em;
}
.menu-button-container {
display: flex;
width: 3em;
height: 3em;
margin: 0;
}
.menu {
position: absolute;
top: 0;
left: 0;
margin: 7em 0 0 0;
padding: 0 0 2em 0;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: flex-start;
z-index: 123456;
}
#menu-toggle{
z-index: 1235;
}
#menu-toggle ~ .menu li {
height: 0;
margin: 0;
padding: 0;
border: 0;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
display: none;
}
#menu-toggle:checked ~ .menu {
background: #000; 
}
#menu-toggle:checked ~ .menu li {
height: 3em;
padding: 1em 2em;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
display: block;
width: 100%;
}
.menu > li {
display: flex;
margin: 0;
padding: 1em 0	;
color: #000;
z-index: 1;
}
.content{
display: flex;
justify-content: space-between;
width: 100%;
padding:0 1em;
float: left;
}
footer{
margin: 3em 1em;
}

footer div:first-of-type{
margin: 4em 0 0 0;
flex-basis: 100%;
padding: 0 0 0 48.8vw;
}
footer div{
margin: 1em 0 0 0;
flex-basis: 50%;
} 
}
@media (max-width: 820px) {
.content-fourth{
flex-basis: 48%;
}
.logo-link{
margin: 1em 0 0 0;
width: 460vw;
display: inline-flex;
height: 4em;
background-image: url("../images/layout/foodstyling_landsberg_logo_01.svg");
background-repeat: no-repeat;
background-position: center left;
background-size:46vw auto;
padding: 1em;
} 
footer{
font-size: 1em;
line-height: 1.8em;
text-transform: uppercase;
border-top: solid 3px #000; 
display: flex;
justify-content: space-between;
width: calc(100% - 2em);
min-height: 10em;
padding: 2em 0;
float: left;
background-image: url("../images/layout/foodstyling_instruments.svg");
background-repeat: no-repeat;
background-position: 0 2em;
background-size: 26%;
}
footer div:first-of-type{
margin: 4em 0 0 0;
flex-basis: 100%;
padding: 0;
}
footer div{
margin: 1em 0 0 0;
flex-basis: 100%;
}
.img-box img{
width: inherit;
max-width: 100%;
flex-basis: 100%;
max-height: 200vh;
}
.header-wrapper {
height: 60vh;
}
.header-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: auto;
max-width:100vw;
object-fit: scale-down;
aspect-ratio: 16 / 9;
transform: translate(0%, -20vh); 
}
.scroll-down{
display: none;
}
}
@media (max-width:480px) {
body{
font-size: 14px;
line-height: 22px;
}
.content-half{
flex-basis: 100%;
}
.content-third{
flex-basis: 100%;
}
.content-fourth{
flex-basis: 100%;
}
.clipbox{
flex-basis: 100%;
margin: .5em 0 1em 0;
}
.clipbox iframe{
width: 100%; 
height: 56.25%;
min-height: 52vw;
border: none;
}
.clipbox-xl{
flex-basis: 100%;
margin: .5em 0 1em 0;
}
.clipbox-xl iframe{
width: 100%; 
height: 56.25%;
min-height: 52vw;
border: none;
}
footer{
display: block;
background-size: 100%;
padding: 2em 0 6em 0;
}
footer div:first-of-type{
flex-basis: 100%;
margin: 10em 0 0 0;
}
footer div{
margin:2em 0 0 0;
}
}