/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:absolute; top:0; left:0; width:100%; z-index:2}
header .logo{position:absolute; top:0; left:50%; transform:translateX(-50%)}
header .logo p{margin:0}
header .logo a{display:block; cursor:pointer; padding: 30px; background:#FFF; border-radius:0 0 15px 15px; transition:0.3s}
header .logo img{width:240px; height:auto; transition:0.3s}
header .logo a:hover{ box-shadow: 0 0 10px 10px #333; transition:0.3s}
header .logo a:hover img{width:220px; transition:0.3s}
header .contact{position:absolute; top:0; right:30px; width:180px; display:flex; justify-content:space-between}
header .contact p{margin:0}
header .contact a{display:flex; justify-content:center; align-items:center; width:50px; height:50px; border-radius:0 0 9px 9px; background:var(--red); transition:0.5s;}
header .contact a:hover{background:var(--blue); transition:0.5s}

header .contact img{width:25px; height:auto; filter:brightness(0)invert(1)}
header .contact span{position:absolute; bottom:-10px; left:50%; transform:translate(-50%,100%); width:100%; height:40px; display:flex; justify-content:center; align-items:center; background:var(--blue); color:#FFF; font-size:16px; border-radius:9px; opacity:0; transition:0.5s}
header .contact p:nth-child(2) span{font-size:14px}
header .contact a:hover span{opacity:1; transition:0.5s}

@media only screen and (max-width:1000px){
	header .logo a,
	header .logo img,
	header .logo a:hover,
	header .logo a:hover img{transition:none}
	header .contact span{display:none}
	header .logo a:hover img{width:240px;}
	header .logo a:hover{box-shadow: none}
	header .contact{right:15px}
}
@media only screen and (max-width:700px){
	header .logo a{padding: 60px 30px 15px 30px}
	header .contact{right:50%; transform:translateX(50%)}
}


/* HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero{width:100%; height:100vh; position:relative}
.hero_content{width:100%; height:50vh;}
.hero_content,
.hero p{margin:0}
.hero img{width:100%; height:100vh; object-fit:cover}
.hero_content img{width:100%; height:50vh; object-fit:cover}
.hero .front{position:absolute; top:0; left:0; width:100%; height:100vh; z-index:1}
.hero .background{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1}
.hero .background:after{content:""; position:absolute; top:0; left:0; width:100%; height:100vh; background: linear-gradient(
  90deg,
  rgba(0,0,0,0.5) 40%,
  rgba(0,0,0,0.2) 50%,
  rgba(0,0,0,0.5) 60%
);}
.hero .background:after{background: linear-gradient(90deg,rgba(0,0,0,0.3) 10%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.3) 90%);}
.hero .text{position:absolute; top:45%; left:0; width:100%; z-index:0}
.hero .text p{width:100%; text-align:center; font-size:6vw; line-height:100%; font-family:'ubuntobold'}
.hero .text a{color:#FFF;}
.hero .text span{display:inline-block; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction:alternate}
.hero .text span:first-child{animation-name: move_1}
.hero .text span:last-child{animation-name: move_2}
@keyframes move_1 {
    0%   {transform:translateX(-25%)}
    100% {transform:translateX(25%)}
}
@keyframes move_2 {
    0%   {transform:translateX(25%)}
    100% {transform:translateX(-25%)}
}
.hero .jumper{position:absolute; left:50%; bottom:50px; transform:translate(-50%); z-index:2}
.hero .jumper p{margin:0}
.hero .jumper p a{width:40px; height:80px; border-radius:15px; background:var(--red); display:block; transition:0.5s}
.hero .jumper p a:hover{background:var(--blue); transition:0.5s}
.hero .jumper p a span{color:#FFF; transform:rotate(90deg); position:absolute; left:9px}
.hero .jumper p a span{animation-name:jumper; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes jumper {
    0%   {top:0}
    90%  {opacity:1}
    100% {top:50px; opacity: 0}
}
@media only screen and (max-width:1000px){
	.hero .text p{font-size:10vw;}
}
@media only screen and (max-width:700px){
	.hero .background:after{background: linear-gradient(90deg,rgba(0,0,0,0.3) 10%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.3) 90%);}
}

/* ARTICLE WELCOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article > .page{width:100%; max-width:var(--page); margin:0 auto; padding:20px 15px 80px 15px; box-sizing:border-box; }
article > .welcome{width:100%; max-width:var(--page); margin:0 auto; padding:20px 15px 80px 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px;}
article > .welcome h1{width:100%; padding:50px 0 0 0}
article > .welcome .content{width:calc(50% - 15px); padding:20px 0 0 0}
article > .welcome img{width:100%; height:auto;}
article > .welcome .portrait{background:url("../images/content/portrait-schweizer-720x480.jpg"); background-size: cover; background-position-y: bottom; background-position-x: center; border-radius:15px; }
article > .welcome .menu{width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; padding:0 20%; box-sizing:border-box}
article > .welcome .menu p{margin:30px}
article > .welcome .menu a{display:block; width:200px; height:200px; padding:20%; box-sizing:border-box; background:var(--red); position:relative; border-radius:50%; font-family:ubuntobold; transition:0.5s}
article > .welcome .menu a:hover{background:var(--blue); color:var(--blue); transition:0.5s; padding:25%}
article > .welcome .menu a span{display:inline-block; position:absolute; bottom:-40px; left:50%; transform:translateX(-50%)}
article > .welcome .menu img{width:100%; height:auto; filter:brightness(0)invert(1)}

@media only screen and (max-width:1000px){
	article > .welcome .menu{padding:0 10%;}
}
@media only screen and (max-width:700px){
	article > .welcome{gap:0}
	article > .welcome h1{padding:30px 0 0 0}
	article > .welcome .content{width:100%; padding:0}
	article > .welcome .portrait{height:220px}
	article > .welcome .menu{padding:0}
	article > .welcome .menu a{width:120px; height:120px}
}

/* ARTICLE PRODUKTE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.produkte{padding:0 0 80px 0; overflow:hidden}
.produkte .content,
.produkte .prospekte,
.produkte .marken{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box; position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:30px}
/* CAR */
.produkte .car{height:360px; width:100%; position:relative}
.produkte .car p{margin:0}
.produkte .car img{width: 920px; height:auto; position:absolute; bottom:-60px; left:100%; z-index:2; animation-name:car; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear}
@keyframes car {
    0%   {left:100%}
	5%  {left:50%}
    70%  {left:50%}
	75%  {left:calc(0% - 920px)}
    100% {left:calc(0% - 920px)}
}
/* PROSPEKTE */
.produkte .content:after{content:""; width:100vw; height:320px; position:absolute; top:-140px; left:50%; transform:translateX(-50%); background:var(--blue); z-index:-1}
.produkte .content h1{color:#FFF; margin:0 0 40px 0; width:100%; padding:50px 0 0 0}
.produkte .content .txt{width:calc(50% - 15px); padding:20px 0 0 0}
.produkte .content .img{width:calc(50% - 15px); background:url("../images/content/kochen-720x480.jpg"); background-size: cover; border-radius:15px; background-position: center;}
.produkte .prospekte{margin:80px auto 0 auto; position:relative}
.produkte .prospekte:after{content:""; width:100vw; height:140px; position:absolute; top:110px; left:50%; transform:translateX(-50%); background:var(--red); z-index:-1}
.produkte .prospekte .calameo{width:calc(50% - 15px)}
.produkte .prospekte .calameo iframe{width:100%; height:auto; aspect-ratio:4/3}
/* MARKEN */
.produkte .marken{margin:60px auto}
.produkte .marken h2{width:100%; margin:0}
.produkte .marken p{width:calc(25% - 22.5px); margin:0; line-height:0}
.produkte .marken a{display:block; padding:20px; box-sizing:border-box; background:var(--red); border-radius:15px; transition:0.5s}
.produkte .marken a:hover{background:var(--blue); transition:0.5s}
.produkte .marken img{width:100%; height:auto; filter:brightness(0)invert(1)}

@media only screen and (max-width:1900px){
	.produkte .car img{width: 480px}
	.produkte .car,
	.produkte .content:after{height:180px; top:0}
}
@media only screen and (max-width:1000px){
	.produkte .car img{width:calc(50% - 15px)}
	.produkte .car,
	.produkte .content:after{height:160px; top:0}
}
@media only screen and (max-width:700px){
	.produkte .car{height:20px}
	.produkte .content h1{padding:60px 0 0 0}
	.produkte .content:after{height:130px}
	.produkte .content .txt,
	.produkte .content .img{width:100%; min-height:220px}
	.produkte .prospekte:after{display:none}
	.produkte .prospekte .calameo{width:100%}
	.produkte .prospekte,
	.produkte .content{gap:0}
	.produkte .marken{gap:15px}
	.produkte .marken p{width:calc(33.33% - 10px); }
}

/* ARTICLE SERVICE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.service{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box; position:relative;}
.service .img_smile{position:relative; width:100%; display:flex; flex-wrap:wrap; gap:30px; z-index:1}
.service .img_smile:after{content:""; width:100vw; height:320px; position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--blue); z-index:-1}
.service .img_smile p{margin:0}
.service .img_smile img{position:absolute; right:0; top:320px; width:660px; height:auto; transform:translateY(-100%); line-height:0; z-index:2}
.service .img_smile h1{color:#FFF; margin:190px 0 70px 0}
.service .offer{position:relative; width:100%; display:flex; flex-wrap:wrap; gap:30px; z-index:2}
.service .offer .content{width:calc(33.333% - 20px)}
.service .offer .content .img{width:100%; aspect-ratio:1/1; background:var(--blue); border-radius:15px; margin:0 0 30px 0; overflow:hidden; padding:0; box-sizing:border-box}
.service .offer .content .img p{margin:0; line-height:0}
.service .offer .content .img img{width:100%; height:auto}
@media only screen and (max-width:1000px){
	.service .img_smile h1{margin:20px 0 240px 0}
}
@media only screen and (max-width:700px){
	.service .img_smile:after{height:220px;}
	.service .img_smile img{top:220px; right:-50px;width:100%}
	.service .img_smile h1{margin:30px 0 190px 0}
	.service .offer .content{width:100%}
	.service .offer .content .img{aspect-ratio:0}
	.service .offer .content .img img{height:220px; object-fit:cover}
}

/* KONTAKT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{position:relative}
.contact h1{width:100%; max-width:var(--page); margin:80px auto 40px auto; padding:0 15px; box-sizing:border-box; position:relative;}
.contact .map{position:relative; overflow:hidden; width:100%}
.contact .map iframe{position:absolute; top:-50%; left:calc(-75% + 15px); height:200%; width:200%; }
.contact .map .content{position:relative; width:calc(var(--page) / 2); margin:80px 0 80px 50%; background:rgba(255,255,255,0.8); backdrop-filter: blur(5px); border-radius:15px; overflow:hidden}
.contact .map .content .img{width:100%; height:240px; overflow:hidden}
.contact .map .content .img img{width:100%; height:100%; object-fit:cover; }
.contact .map .content .timetable,
.contact .map .content address{padding:0 25px; box-sizing:border-box}
.contact .map .content .timetable p{margin:0 0 10px 0}
.contact .map .content address{font-style:normal; margin:30px 0}
.contact .map .content address a{display:flex; align-items:center;}
.contact .map .content address a img{width:30px; height:30px; margin:0 10px 0 0}
.contact .map .content address a:hover img{filter:none}
@media only screen and (max-width:1000px){
	.contact .map .content{width:50%; border-radius:15px 0 0 15px}
}
@media only screen and (max-width:700px){
	.contact .map iframe{display:none}
	.contact .map .content{width:100%; margin:0; border-radius:0}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--blue); width:100%}
footer .content{width:100%; max-width:var(--page); margin:0 auto; padding:50px 15px 30px 15px; box-sizing:border-box; position:relative; display:flex; flex-wrap:wrap}
footer .content p a{color:#FFF; display:flex; align-items:center; transition:0.5s}
footer .content p:first-child{margin:0 30px 20px 0}
footer .content p:last-child{position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:16px}
footer .content p a img{filter:brightness(0) invert(1); margin:0 10px 0 0}
footer .content p a:hover{color:#000}
footer .content p a:hover img{transform: scale(-1, 1); transition:0.5s; filter:brightness(0)}
@media only screen and (max-width:700px){
	footer .content p:last-child{position:relative; right:auto; top:auto; transform:none; margin:40px 0 0 0}
}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--red: #e6333f; --blue: #014898; --font: #000; --page:1024px;}

@font-face {font-family: 'ubuntobold'; src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'), url('../fonts/Ubuntu-Bold.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face {font-family: 'ubuntoregular'; src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'), url('../fonts/Ubuntu-Regular.woff') format('woff'); font-weight: 300; font-style: normal;}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px;line-height: 30px; font-weight: 300; font-family: 'ubuntoregular', sans-serif; color:var(--font); overflow-x:hidden}
.bg-color{background:#FFF}

h1{font-size:80px; line-height:100px; color:var(--blue); margin:0 0 40px 0; font-family:"ubuntobold"}
h2{font-size:30px; line-height:40px; color:#000; margin:0 0 20px 0; font-family:"ubuntobold"}
h3{font-size:20px; line-height:30px; color:#000; margin:0 0 10px 0; font-family:"ubuntobold"}

a,a:visited {color: var(--font); text-decoration: none;}
a:hover{color:var(--blue)}
strong {font-weight: 700}
p {margin:0 0 20px 0}


@media only screen and (max-width:1000px){
    h1{font-size:60px; line-height:80px; margin:0 0 20px 0}
}
@media only screen and (max-width:700px){
    h1{font-size:36px; line-height:44px}
}

/* BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#banner-overlay {position: fixed; bottom:30px; right:30px; display: none; z-index: 9999}
#banner-overlay .cookiemonster{position:absolute; top:0; left:50%; transform:translate(-50%,-70%); z-index:2}
#banner-overlay .cookiemonster img{width:100%; height:auto}
#banner-box {position:relative; background: var(--blue); padding: 30px 0 20px 0; width: 260px; box-sizing: border-box; border-radius: 15px; text-align: center; overflow:hidden; border:solid 2px #FFF}
#banner-box .shine{position:absolute; top:-20px; left:0; width:20%; height:320px; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0)); transform:rotate(15deg)}
#banner-box .shine{animation-name:shine; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction:}
@keyframes shine {
    0%  {left:-100%}
    85% {left:-100%}
    100%{left:100%}
}
#banner-box p{color:#FFF; margin:0 0 5px 0; font-size:16px; line-height:24px}
#banner-box p:nth-child(2){font-weight: bold; font-size:20px}
#banner-box a{color:#FFF; text-decoration: none; position:relative}
#banner-box a:after{content:""; width:0px; height:1px; display:block; background:var(--red); position:absolute; bottom:-5px; left:20px; transition:0.5s}
#banner-box a:hover:after{ width:calc(100% - 20px); transition:0.5s}

#banner-close {margin-top: 10px; padding: 3px 13px; border: none; background: var(--red); color: #fff;  cursor: pointer; border-radius: 9px; font-size:16px;}
#banner-close:hover{scale:0.95; transition:0.5s}
#banner-close span{display:inline-block; transition:0.5s}
#banner-close:hover span{transform:rotate(45deg); transition:0.5s}

@media only screen and (max-width:700px){
	#banner-overlay{right:50%; transform:translateX(50%)}
}