/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 25 2025 | 01:18:22 */
/*  ASCII FONT

https://patorjk.com/software/taag/#p=display&f=BlurVision+ASCII&t=UPPERCASE&x=none&v=4&h=4&w=120&we=true

https://patorjk.com/software/taag/#p=display&f=Pagga&t=UPPERCASE&x=none&v=4&h=4&w=120&we=true


*/

body, html {
    overflow-x: hidden !important;
    width: 100vw !important;
	font-family: "Tomorrow";
}




/* SNIPPETS

calc(var(--space) * 1)

transform: var(--skew);


*/
/*
transform: skew(-13.5deg);
*/


/*
░▒▓█▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░ ░▒▓███████▓▒░ 
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
 ░▒▓█▓▒▒▓█▓▒░░▒▓████████▓▒░▒▓███████▓▒░ ░▒▓██████▓▒░  
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░      ░▒▓█▓▒░ 
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░      ░▒▓█▓▒░ 
   ░▒▓██▓▒░  ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░  
*/   
                                         
:root {
    --MM-M1: hwb(327 0% 10%);
    --MM-M2: hwb(327 0% 20%);
    --MM-M3: hwb(327 0% 25%);
    --MM-M4: hwb(327 0% 30%);
    --MM-C1: hwb(197 0% 10%);
    --MM-C2: hwb(197 0% 20%); 
    --MM-C3: hwb(197 0% 25%);    
    --MM-C4: hwb(197 0% 30%);    
    --MM-Y1: hwb(60 0% 0%);
    --MM-Y2: hwb(60 0% 10%);
    --MM-Y3: hwb(60 0% 15%);
    --MM-Y4: hwb(60 0% 20%);
    
    --space: calc(1vw + 1vh);
    
    --skew: skewX(-13.5deg);
    
    
    --text-stroke-width: calc(var(--space) * .1);
    
    --text-drop-shadow: calc(var(--space) * .15);
    
    /*
    --text-fake-shadow: calc(var(--space) * .25);
    --text-fake-shadow-inv: calc(var(--text-fake-shadow) * -1);
    */
}


/*
░▒▓████████▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░ ░▒▓██████▓▒░  
   ░▒▓█▓▒░   ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
   ░▒▓█▓▒░   ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
   ░▒▓█▓▒░    ░▒▓██████▓▒░░▒▓███████▓▒░░▒▓█▓▒░░▒▓█▓▒░ 
   ░▒▓█▓▒░      ░▒▓█▓▒░   ░▒▓█▓▒░      ░▒▓█▓▒░░▒▓█▓▒░ 
   ░▒▓█▓▒░      ░▒▓█▓▒░   ░▒▓█▓▒░      ░▒▓█▓▒░░▒▓█▓▒░ 
   ░▒▓█▓▒░      ░▒▓█▓▒░   ░▒▓█▓▒░       ░▒▓██████▓▒░                           
*/  

html {
    font-size: 22px;
    
} 

body {
    font-size: 1rem !important;
    color: #000;
}

h1 {
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    font-size: calc(var(--space) * 3.5);
    -webkit-text-stroke-color:#fff;
	text-stroke-color:#fff;
	-webkit-text-stroke-width:var(--text-stroke-width);
	text-stroke-width:var(--text-stroke-width);
    text-shadow: var(--text-drop-shadow) var(--text-drop-shadow) 0 #fff;
    padding-left: .5em;	
	transform: translateX(-.375em);
} 

.black h1 {
    -webkit-text-stroke-color:#000;
	text-stroke-color:#000;
    text-shadow: var(--text-drop-shadow) var(--text-drop-shadow) 0 #000;
}





h2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

h3 {
    font-weight: 700;
}

h4 {
    font-weight: 600;
}

h5 {
    font-weight: 600;
}

p {
    line-height: 1.4;
}

ul {
	list-style-type: none !important;
	padding-left: 1.25em !important;
}

li::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	width: 0.75em;
	height: .75em;
	background: #000;
	margin-top: 0.22em;
}
   
::selection {
    color: #fff;
    background-color: #000;
}

/*
.black ::selection {
    color: #000;
    background-color: #fff;
}*/

.footer-frankfurt {
    ::selection {
        background-color: var(--MM-C1);
    }
}
.footer-duesseldorf {
    ::selection {
        background-color: var(--MM-M1);
    }
}
.footer-main {
    ::selection {
        background-color: hsl(0 0% 50% / 1);
    }
}


/*
 ░▒▓██████▓▒░░▒▓█▓▒░      ░▒▓██████▓▒░░▒▓███████▓▒░ ░▒▓██████▓▒░░▒▓█▓▒░        
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
░▒▓█▓▒░      ░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
░▒▓█▓▒▒▓███▓▒░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓█▓▒░        
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░        
 ░▒▓██████▓▒░░▒▓████████▓▒░▒▓██████▓▒░░▒▓███████▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓████████▓▒░ 
*/


/* TEMP */ 

header {
    display: none;
}
    
.et_pb_divider {
    height: 30vh;        
    &::before  {
        display: none;
    }    
}
/*/*/

/* DIVI FIX */
    
.et_pb_row {
    width: 100%;
    max-width: none !important;
}


/*
░█▀▀░█▀▄░█░█░█▀█░█▀▀░█▀▀
░█░█░█▀▄░█░█░█░█░█░█░█▀▀
░▀▀▀░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀▀
*/
.et_pb_section {
    padding-top: calc(var(--space) * 2) !important;
    padding-bottom: calc(var(--space) * 7.5) !important;

    &::before, &::after {
        position: absolute;
        content: "";
        display: block;
        /*width: calc(calc(var(--space) * 6) * 10.82);
        min-width: 100%;*/
        aspect-ratio: 10.82;
        width: 100%;
        height: calc(var(--space) * 6.5);
        top: calc(var(--space) * -6.4);
        background: #fff;
        mask-image: url(https://media-motor.de/wp-content/uploads/design-elements/grunge-mask.svg);
        mask-size: cover;
        /*mask-size: calc(2560px - calc((calc(2560px - 100vw)) * 0.8));*/
        mask-repeat: repeat;
        mask-position: center bottom;
    }
  
    &:nth-child(odd)::before {
        transform: scaleX(-1)
    }
    
    &::after {
        content: none;
        top: unset;
        bottom: calc(var(--space) * -6.4);
        z-index: 1;
        transform: scaleY(-1)
    }
}

/*
░▀▀█░█▀▄░░░░░█▀▄░█░░░█▀█░█▀▀░█░█░█▀▀
░░▀▄░█░█░▄▄▄░█▀▄░█░░░█░█░█░░░█▀▄░▀▀█
░▀▀░░▀▀░░░░░░▀▀░░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀
*/
.block, .intro-block-main {
    &::after, &::before {
        display: block;
        content: "";
        position: absolute;
        transform-origin: top left;
    }
    
    &::after {
        width: calc(var(--space) * 1);
        height: 100%;
        top: 0;
        bottom: 0;
        right: calc(var(--space) * -1);
        transform: skewY(45deg);
    }
    
    &::before {
        width: 100%;
        height: calc(var(--space) * 1);
        left: 0;
        bottom: calc(var(--space) * -1);
        transform: skewX(45deg);
    }
}

.intro-block-base {
    position: absolute;
    display: block;
    content: "";
    inset: 0;
    z-index: 0;
}

.stripe-1, .stripe-2 {
    width: calc(var(--space) * 1);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    animation: stripe 5s infinite;
    animation-timing-function: linear
}

.stripe-1 {
    left: calc(var(--space) * -2);
    z-index: -2;
}

.stripe-2 {
    left: calc(var(--space) * -1);
    z-index: -1;
    animation-direction: reverse;
}

.et_pb_section:nth-child(even) {
    .stripe-1 {
        left: unset;
        right: calc(var(--space) * -2);
        z-index: 2;
    }
    .stripe-2 {
        left: unset;

        right: calc(var(--space) * -1);
        z-index: 1;
        animation-direction: reverse;
    }
} 


@keyframes stripe {
    0% {transform: translateY(0)}
    25% {transform: translateY(calc(var(--space) * 2))}
    75% {transform: translateY(calc(var(--space) * -2))}
    100% {transform: translateY(0)}
}

/* INTRO-BLOCK*/ 

.intro-block-main {    
    width: 75vw !important; 
    padding: calc(var(--space) * 3);
    gap: calc(var(--space) * 3);
    
    z-index: 1;
    transform: var(--skew);
    
    p {
        color: #fff;
    }
     
    .et_pb_column:nth-child(1) {
        justify-content: space-between;
        width: 62.8%;
        gap: calc(var(--space) * 3);
    }
        
    .et_pb_column:nth-child(2) {
        justify-content: space-between;
        width: 38.2%;
        
        /* only for first section?*/
        .et_pb_image {
            height: 100%;
            .et_pb_image_wrap {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                img {
                    height: 100%;
                    min-width: 0 !important;
                    width: 100%;
                    object-fit: contain;
                    aspect-ratio: unset;
                }
            }            
        }/**/
        
    }
}

.et_pb_section:nth-child(even) {
    .intro-block-main { 
        flex-direction: row-reverse;
    }
} 



/*
░█▀▀░█▀▀░█▀▀░▀█▀░▀█▀░█▀█░█▀█░░░█▀▀░█▀█░█░░░█▀█░█░█░█▀▄░█▀▀
░▀▀█░█▀▀░█░░░░█░░░█░░█░█░█░█░░░█░░░█░█░█░░░█░█░█░█░█▀▄░▀▀█
░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀▀▀░▀░▀░░░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀
*/

.section-magenta {
    background: var(--MM-M2);
    &::before  {background: var(--MM-M2)}
    .intro-block-main {
        background: var(--MM-M1);
        &::after {background: var(--MM-M3)}
        &::before {background: var(--MM-M4)}
        h1 {color: var(--MM-M1)}
        .intro-block-base {
            background: var(--MM-M1);
        }
        .stripe-1 {
            background: var(--MM-C1);
            &::after {background: var(--MM-C3)}
            &::before {background: var(--MM-C4)}        
        }
        .stripe-2 {
            background: var(--MM-Y1);
            &::after {background: var(--MM-Y3)}
            &::before {background: var(--MM-Y4)}        
        }
    }
}

.section-cyan {
    background: var(--MM-C2);
    &::before  {background: var(--MM-C2)}
    .intro-block-main {
        background: var(--MM-C1);
        &::after {background: var(--MM-C3)}
        &::before {background: var(--MM-C4)}
        h1 {color: var(--MM-C1)}
        .intro-block-base {
            background: var(--MM-C1);
        }
        .stripe-1 {
            background: var(--MM-Y1);
            &::after {background: var(--MM-Y3)}
            &::before {background: var(--MM-Y4)}        
        }
        .stripe-2 {
            background: var(--MM-M1);
            &::after {background: var(--MM-M3)}
            &::before {background: var(--MM-M4)}        
        }
    }
}

.section-yellow {
    background: var(--MM-Y2);
    &::before  {background: var(--MM-Y2)}
    .intro-block-main {
        background: var(--MM-Y1);
        &::after {background: var(--MM-Y3)}
        &::before {background: var(--MM-Y4)}
        h1 {color: var(--MM-Y1)}
        p {color: #000;}
        .intro-block-base {
            background: var(--MM-Y1);
        }
        .stripe-1 {
            background: var(--MM-C1);
            &::after {background: var(--MM-C3)}
            &::before {background: var(--MM-C4)}        
        }
        .stripe-2 {
            background: var(--MM-M1);
            &::after {background: var(--MM-M3)}
            &::before {background: var(--MM-M4)}        
        }
    }
}



/*
 ░▒▓███████▓▒░▒▓████████▓▒░▒▓██████▓▒░▒▓████████▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░  
░▒▓█▓▒░      ░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░   ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
░▒▓█▓▒░      ░▒▓█▓▒░     ░▒▓█▓▒░        ░▒▓█▓▒░   ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 ░▒▓██████▓▒░░▒▓██████▓▒░░▒▓█▓▒░        ░▒▓█▓▒░   ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
       ░▒▓█▓▒░▒▓█▓▒░     ░▒▓█▓▒░        ░▒▓█▓▒░   ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
       ░▒▓█▓▒░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░   ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
░▒▓███████▓▒░░▒▓████████▓▒░▒▓██████▓▒░  ░▒▓█▓▒░   ░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░ 
*/

/*                                                         
░█░█░█▀▀░█▀▄░█▀█
░█▀█░█▀▀░█▀▄░█░█
░▀░▀░▀▀▀░▀░▀░▀▀▀
*/
.section-hero {
    background: #000;
    
    &::before  {
        content: none;
    }
}

/* 
░█▀▀░█░░░█▀█░▀█▀░█▄█
░█░░░█░░░█▀█░░█░░█░█
░▀▀▀░▀▀▀░▀░▀░▀▀▀░▀░▀                                                                        
*/

.section-claim {
    background: #fff;
    
    &::before  {
        background: #fff;
    }
}

/*
░█░█░█▀▀░█▀▄░█▀▀░█▀▄░░░█░█░█▀█░█▀▀
░█░█░█▀▀░█▀▄░█▀▀░█▀▄░░░█░█░█░█░▀▀█
░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀░▀░░░▀▀▀░▀░▀░▀▀▀
*/
.section-ueber-uns {
	
    .logo-white {
        background: url(https://media-motor.de/wp-content/uploads/design-elements/logo-white.webp) no-repeat center ;
        background-size: contain;
        
        transform: scaleX(1.135);
        
        img {
            display: none;
        }
	}
	
	.spotlights {
		padding: calc(var(--space) * 1) 0;
		transform: var(--skew);

		gap: calc(var(--space) * 2);
		width: 70vw;

				
		& > div {
			background: #fff;
			padding: calc(var(--space) * 1);
			border: 0.175rem solid;
			box-shadow: .5rem .5rem
		}
		
		h3 {
			padding: 0.5rem 0.65rem 0.6rem;
			font-size: 2rem;
			background: #000;
			color: #fff;
			width: fit-content;
		}
		
		ul {
			padding-bottom: 0;
				li:not(:last-child) {
					margin-bottom: .5em
			}
		}
		
		p, li {
			font-weight: 500;
			font-size: 110%;
		}

		
		.on-focus span {
			color: var(--MM-M1);
		}
		.on-mandates span {
			color: var(--MM-C1);
		}
		.on-top span {
			color: var(--MM-Y1);
		}
		
		
	}
}

/* 
░█▄█░█▀█░█▀█░█▀▄░█▀█░▀█▀░█▀▀
░█░█░█▀█░█░█░█░█░█▀█░░█░░█▀▀
░▀░▀░▀░▀░▀░▀░▀▀░░▀░▀░░▀░░▀▀▀
*/
.section-mandate {

}

/*
░█░░░█▀▀░▀█▀░█▀▀░▀█▀░█░█░█▀█░█▀▀░█▀▀░█▀█
░█░░░█▀▀░░█░░▀▀█░░█░░█░█░█░█░█░█░█▀▀░█░█
░▀▀▀░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀
*/
.section-leistungen {

}

/*
░█▀▀░█▀█░█▀▀░█▀▀░█▀▀
░█░░░█▀█░▀▀█░█▀▀░▀▀█
░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀▀▀
*/
.section-cases {
    

}

/*
░█░█░█▀█░█▀█░▀█▀░█▀█░█░█░▀█▀
░█▀▄░█░█░█░█░░█░░█▀█░█▀▄░░█░
░▀░▀░▀▀▀░▀░▀░░▀░░▀░▀░▀░▀░░▀░
*/
.section-kontakt {
    &::before  {
        background: var(--MM-C2);
    }
    &::after {
        content: "";
        background: var(--MM-C2);     
    }
}

/*
░▀█▀░█▀▀░█░░░█▀▀░█░█░▀█▀░█▀▀░▀█▀░█▀█░█▀█
░░█░░█▀▀░█░░░█▀▀░▀▄▀░░█░░▀▀█░░█░░█░█░█░█
░░▀░░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀
*/
.section-tv {
    background: #fff;
    height: calc(100vh + calc(var(--space) * 5.5));
    padding: 0 !important;
    margin-bottom: calc(var(--space) * -5.5) !important; ;
    
    &::before  {
        content: none;
    }
}

/*
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█▀▄
░█▀▀░█░█░█░█░░█░░█▀▀░█▀▄
░▀░░░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀
*/
.section-footer {
    background: #000;
    &::before  {
        background: #000;
    }
}