@font-face { font-family: 'exoBi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/Exo2-BoldItalic.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'exoSemBi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/Exo2-SemiBoldItalic.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'exoMedi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/Exo2-MediumItalic.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openBo'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/opensans-bold-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openReg'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/opensans-regular-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openNorm'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/opensans-normal-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openLi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/opensans-light-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openCondLi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/opensans-condlight-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'monLi'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/montserrat-light-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'monNorm'; src: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/font/montserrat-regular-webfont.woff2) format('woff2'); font-weight: normal; font-style: normal; }  html {
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: border-box;
} body.home .site-content .col-full {
max-width: 100% !important;
padding: 0 !important;
}
body.home .site-header .col-full,
body.home .site-footer .col-full {
max-width: 1100px;
margin: 0 auto;
padding: 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
} h1, h2, h3 {
margin: 0 0 15px 0;
}
.section-title {
text-align: center;
}
.text-center {
text-align: center;
} .heroMargin {
margin: 40px auto;
}
.hero {
position: relative;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
background: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/img/gruener-audi-sport-design.webp) center center no-repeat;
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.05) 40%,
rgba(0, 0, 0, 0.4) 65%,
rgba(0, 0, 0, 0.8) 85%,
rgba(0, 0, 0, 1) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
width: 90%;
max-width: 1100px;
color: #fff;
}
.hero h1 {
font-size: 1.8rem;
color: rgba(255,255,255,0.75);
font-family: 'exoBi', sans-serif;
}
.hero h2 {
font-size: 1.2rem;
color: rgba(255,255,255,0.75);
font-family: 'exoBi', sans-serif;
}
.hero p {
font-size: 1rem;
font-family: 'openLi', sans-serif;
}
.heroTrust {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
width: 100%;
font-family: 'exoBi', sans-serif;
font-size: 1.1rem;
color: #FFF;
text-shadow: #000 2px 2px 2px;
margin-top: 30px;	
}
.btn-primary {
display: inline-block;
background: #FF4800;
color: #fff;
padding: 14px 22px;
border-radius: 8px;
font-family: 'exoSemBi', sans-serif;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.25s linear 0s;
margin: 40px 0;
}
.btn-primary:hover {
background: #FFC830;
color: #000;
} .introMargin {
margin: 40px auto;
}
.intro {
width: 90%;
display: flex;
margin: 0px auto;
flex-direction: column;
gap: 15px;
text-align: center;
border-width: 0 3px;
border-style: solid;
border-color: #FF4800;
padding: 0 15px 0 15px;
}
.intro p {
margin: 0;
font-family: 'openLi', sans-serif;
color: #000;
font-size: 1rem;
}
.intro a {
color: #000;
text-decoration: underline;
}
.intro a:hover {
color: #FF4800;
text-decoration: underline;
} .subline {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1.1rem;
}
.headline {
font-family: 'exoBi', sans-serif;
color: #000;
font-size: 1.8rem;
} .trendMargin {
margin: 40px auto;
}
.trend h2 {
margin-top: 0;	
}
.trend p {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1.4rem;
}
.trend p:last-of-type {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1.4rem;
padding-top: 20px;
}
blockquote {
font-family: 'openReg', sans-serif;
font-size: 1rem;
font-style: italic;
border-left: 4px solid #999;
padding: 5px 5px 5px 15px;
margin: 20px 0;
color: #333;
background-color: #f5f5f5;
}
blockquote footer {
font-size: 0.9rem;
font-style: normal;
text-align: right;
padding-right: 5px;
margin-top: 10px;
color: #555;
}
blockquote a {
color: #000;
text-decoration: underline;
}
blockquote a:hover {
color: #FF4800;
text-decoration: underline;
}
.trend img {
width: 100%;
height: auto;
display: block;	
}
.trendKat {
display: block;
font-family: 'openNorm', sans-serif;
color: #858585;
font-size: 0.8rem;
}
.trendSet {
display: block;
font-family: 'exoBi', sans-serif;
color: #000;
font-size: 1.5rem;
margin: 20px 0;
}
.trendSet a {
color: #000;
text-decoration: none;
}
.trendSet a:hover {
color: #FF4800;
text-decoration: none;
}
.trendPreis {
display: block;
font-family: 'exoSemBi', sans-serif;
color: #858585;
font-size: 1rem;
margin-bottom: 20px;
} .vorteileMargin {
margin: 40px auto;
}
.vorteile h2 {
font-size: 1.8rem;
color: rgba(255,255,255,0.75);
font-family: 'exoBi', sans-serif;
}
.vorteile ul{
font-family: 'openNorm', sans-serif;
font-size: 1rem;
text-shadow: #000 1px 1px 2px;
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
}
.vorteile li{
display: flex;
align-items: center;
}
.vorteile li::before{
content: "★";
margin-right: 10px;
font-size: 1.8rem;
color: #D2A333;
flex-shrink: 0;
} .garantMargin {
margin: -40px auto;
}
.grid .garant {
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
padding: 20px 10px 0px 10px;	
background: #F0F0F0;
padding-bottom: 15px;
margin-bottom: 20px;
z-index: 3;
}
.garant img {
width: 50%;
height: auto;
display: inline-block;
margin-bottom: 20px;
}
.garant h3 {
font-family: 'openNorm', sans-serif;	
font-size: 1.6rem;
color: #000;	
}
.garant p {
font-family: 'openLi', sans-serif;	
font-size: 1rem;
color: #000;	
} .newsMargin {
margin: 80px auto;
}
.news {
margin-top: 40px;
}
.news img {
width: 100%;
height: auto;
display: inline-block;
}
.news h3 {
display: block;
font-family: 'exoSemBi', sans-serif;
color: #858585;
font-size: 1.5rem;
}
.news p {
display: block;
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1rem;	
}
.news a {
display: block;
font-family: 'exoBi', sans-serif;
color: #000;
font-size: 1.6rem;
padding: 20px 0px;
text-decoration: none;
}
.news a:hover {
color: #FF4800;
text-decoration: none;
}
.news span {
display: block;
font-family: 'exoSemBi', sans-serif;
color: #858585;
font-size: 1rem;
padding-bottom: 40px;
border-bottom: 1px solid #999;
} .grid {
display: flex;
flex-direction: column;
gap: 30px;
}
.grid-item {
width: 100%;
}
.boBott {
border-bottom: 1px solid #999;
} .section-bg {
position: relative;
min-height: 100dvh;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
}
.section-bg .container {
position: relative;
z-index: 2;
color: #fff;
} .stickMargin {
margin: 40px auto;
}
.stick .container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}
.stick {
align-items: flex-start;
padding-top: 20px;
}
.stick h2 {
font-family: 'openLi', sans-serif;
color: rgba(255,255,255,0.8);
font-size: 1.3rem;
letter-spacing: 0.35em;
margin: 15px 0;
}
.stick p {
font-family: 'openNorm', sans-serif;
color: #FFF;
font-size: 1rem;
margin-top: auto;	
}
.stick a {
margin-top: 15px;
} .meiMargin {
margin: 80px auto;
}
.mei .container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}
.mei img {
width: 100%;
height: auto;
display: block;
}
.mei span {
display: block;
font-family: 'openNorm', sans-serif;
color: #858585;
font-size: 0.8rem;
}
.mei p {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 0.9rem;	
}
.mei blockquote {
font-family: 'exoSemBi', sans-serif;
font-size: 1.2rem;
font-style: normal;
border-left: 4px solid #777;
padding: 5px 5px 5px 15px;
margin: 20px 0;
color: #000;
background-color: #f5f5f5;
text-align: left;
}
.mei blockquote footer {
font-family: 'openNorm', sans-serif;
font-size: 0.9rem;
font-style: normal;
text-align: right;
padding-right: 5px;
margin-top: 10px;
color: #555;
}
.btn-secundary {
background: #ffc830;
border-radius: 8px;
color: #000;
text-decoration: none;
display: inline-block;
font-family: 'exoSemBi', sans-serif;
font-size: 1.3rem;
padding: 18px 28px;
text-align: center;
margin-top: 20px;
transition: all 0.25s linear 0s;
}
.btn-secundary:hover {
background: #FF4800;
color: #FFF;
}
hr {
width: 50%;
border: none;
border-top: 2px solid #FF4800;
margin: 20px auto;
} .bg-vorteile {
background-image: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/img/blauer-ford-mustang-sport-design.webp);
background-attachment: scroll;
}
.bg-sticker {
background-image: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/img/bronzener-bmw-mattschwarz-teilfoliert.webp);
background-attachment: scroll;
}
.bg-tipps {
background-image: url(//www.werbezentrum-shop.de/wp-content/themes/storefront-child/img/schwarzer-bmw-mit-xenonlicht.webp);
background-attachment: scroll;
} .tipMargin {
margin: 80px auto;
}
.tip .container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}
.tip {
align-items: flex-start;
padding-top: 20px;
}
.tip h2 {
font-family: 'openLi', sans-serif;
color: rgba(255,255,255,0.8);
font-size: 1.6rem;
letter-spacing: 0.35em;
margin: 15px 0;
}
.tip h3 {
font-family: 'openLi', sans-serif;	
font-size: 1.2rem;
color: #FFF;
margin-top: auto;	
}
.tip ul{
font-family: 'openLi', sans-serif;
font-size: 1rem;
text-shadow: #000 1px 1px 2px;
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
margin-top: 15px;
padding-bottom: 10%;
}
.tip li{
display: flex;
align-items: center;
padding-top: 10px;
}
.tip li::before{
content: "\1F4A1";
margin-right: 10px;
font-size: 1.2rem;
flex-shrink: 0;
}
.tip a {
color: #FFC830;
text-decoration: none;
}
.tip a:hover {
color: #FFF;
text-decoration: underline;
} .faq {
width: 90%;
max-width: 970px;
margin: 80px auto;
}
details {
border-bottom: 1px solid #C0C0C0;
padding: 18px 0;
}
.faq details:first-of-type {
border-top: 1px solid #C0C0C0;
margin-top: 40px;
}
.faq details:last-of-type {
margin-bottom: 40px;
}
summary {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1.1rem;
cursor: pointer;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
details[open] summary {
color: #777;
}
.answer {
font-family: 'openNorm', sans-serif;
color: #000;
font-size: 1rem;
margin-top: 15px;
}
.answer a {
color: #005bbb;
text-decoration: underline;
}
.answer a:hover {
text-decoration: none;
}
summary {
position: relative;
padding-right: 25px;
}
summary::after {
content: "+";
position: absolute;
right: 0;
font-size: 1.4rem;
}
details[open] summary::after {
content: "−";
} .animate {
opacity: 0;
transform: translateY(40px);
transition: 0.6s ease;
}
.animate.visible {
opacity: 1;
transform: translateY(0);
} @media (min-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.hero h2 { font-size: 2rem; }
.hero p { font-size: 1.2rem; }
.grid {
flex-direction: row;
flex-wrap: wrap;
}
.grid-item {
flex: 1 1 45%;
}
.heroTrust {
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
hr {
display: none;
}
.stick h2 {
font-size: 1.7rem;
}
.tip h2 {
font-size: 1.8rem;
}
} @media (min-width: 1024px) {
.hero {
min-height: 100vh;
background-attachment: fixed;
}
.bg-hero {
min-height: 100vh;
background-attachment: fixed;
}
.section-bg {
min-height: 100vh;
background-attachment: fixed;
}
.grid-item {
flex: 1 1 30%;
}
.btn-primary {
font-size: 1.5rem;
}
.intro p {
font-size: 1.3rem;
}
.subline {
font-size: 1.4rem;
}
.headline {
font-size: 2.6rem;
}
.vorteile h2 {
font-size: 2.4rem;
}
.vorteile ul{
font-size: 1.2rem;
}
.vorteile li::before{
font-size: 2.3rem;
}
.stick h2 {
font-size: 2.6rem;
}
.stick p {
font-size: 1.2rem;
}
.stick {
padding-bottom: 30px;
}
.mei img {
margin-top: 40px;
margin-bottom: 10px;
}
.tip h2 {
font-size: 2.6rem;
}
}