html{}body{font-family:'Outfit',sans-serif;background-color:var(--primary-background)}.navbar-expand-lg .offcanvas{flex-grow:0}h2{font-size:56px;margin-bottom:24px}h3{font-size:44px;color:var(--dark-blue);font-weight:600;margin-bottom:24px}h4{font-size:34px;color:var(--dark-blue);font-weight:600;margin-bottom:24px}h5{font-size:26px}p{font-weight:300}.offcanvas.show{width:100%}.offcanvas-header{border-bottom:1px solid var(--border);padding:12px 24px}.btn-close{background:var(--light-blue);color:var(--dark-blue);opacity:1;height:auto;width:auto;border-radius:var(--bs-border-radius-sm)}.subhead{font-size:20px;font-weight:600;color:var(--dark-blue)}.primary-bg{background-color:var(--primary-background)}.primary-fg{background-color:var(--dark-blue);color:white}.muted-bg{background-color:var(--muted-background)}.text-small{font-weight:200}.material-symbols-outlined{line-height:1;vertical-align:bottom}.container{max-width:1200px}.stoerer{color:var(--light-blue);width:100%;text-align:center;padding:12px;margin-bottom:24px;height:48px}.navbar-expand-lg{flex-wrap:wrap;padding-top:0;padding-bottom:24px}.nav-container{position:relative}.navbar-toggler{position:absolute;right:24px;top:16px;background-color:var(--light-blue);border-radius:12px;border:0;height:40px;width:40px;padding:0}.navbar-toggler:focus{box-shadow:inset 0 0 0 .25rem var(--dark-blue)}.navbar-toggler-icon{width:20px;height:20px}.navbar-nav{margin:0 3rem 0 1rem;display: flex;align-items: center;}.navbar-expand-lg .navbar-nav .nav-link{padding-top:.25rem;padding-right:1rem;padding-left:1rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius-sm)}.navbar-expand-lg .navbar-nav .nav-item:first-of-type .nav-link{line-height:1}.nav-link:hover,.nav-link:active,.nav-link:focus{background-color:var(--light-blue)}.nav-link.active{background-color:var(--light-blue);color:var(--dark-blue);position:relative}.nav-link.active::before{content:'';width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--dark-blue);position:absolute;bottom:-12px;left:50%;transform:translateX(-50%)}.btn-primary{border-radius:var(--bs-border-radius-xl);border:0;background-color:var(--dark-blue);padding:16px}.btn-primary:hover,.btn-primary:active,.btn-primary:focus{background-color:var(--light-blue);color:var(--dark-blue)}.btn-secondary{background-color:var(--light-blue);color:var(--dark-blue);border-radius:var(--bs-border-radius-xl);border:0;padding:16px}.btn-hollow{background-color:transparent;color:var(--dark-blue);border-radius:var(--bs-border-radius-xl);border:1px solid var(--dark-blue)}.btn-hollow.active,.btn-hollow:hover,.btn-hollow:active,.btn-hollow:focus{background-color:var(--dark-blue);color:white;border-radius:var(--bs-border-radius-xl);border:1px solid var(--dark-blue)}.swiper{width:100%;height:750px;overflow-y:visible;padding:0 12px}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px}.swiper-horizontal>.swiper-pagination-bullets{bottom:50px}.swiper-pagination-bullet-active{outline:1px solid var(--dark-blue);outline-offset:3px;background:var(--dark-blue)}.swiper-slide{background:#dedede;display:flex;justify-content:center;align-items:center;height:662px;max-width:1176px;overflow:hidden;border-radius:var(--bs-border-radius-xl)}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.slidertext{background-color:var(--blush-pink);padding:48px}.sliderimage{background:url('https://www.mrservice-gelsenkirchen.de/css/assets/img/backdrop.png');background-size:cover;background-position:bottom left;height:662px}.textwrapper{padding:48px}.brandimagewrapper{overflow:hidden;position:relative}.brandimagewrapper img{width:100%;max-width:176px}.showmorebutton{position:absolute;bottom:0;z-index:10;width:fit-content}.contact{border-radius:24px;padding:48px;border:1px solid var(--border);position:relative}.form-control{background-color:#fafafa}footer{background-color:var(--dark-blue)}footer h5{color:white;margin-bottom:1rem}footer img{margin-bottom:1rem;height:24px}footer{color:white}footer a{color:var(--light-blue);padding-left:24px;text-decoration:none;font-weight:300}footer .openinghours{margin-bottom:1rem}footer .openinghours table{margin-bottom:.6rem}footer .openinghours table td:nth-child(1){padding-right:.5rem;vertical-align:top}footer .openinghours table td:nth-child(2){text-align:right;vertical-align:top;min-width:150px}.textbox-height{min-height:602px}@media(max-width:1200px){.textbox-height{min-height:initial}}@media(max-width:991px){.imagewrapper{height:600px;margin-bottom:24px}.contact{margin-bottom:48px;height:auto}}@media(max-width:767px){h2{font-size:34px}h3{font-size:20px}h4{font-size:26px}p{font-size:16px}.nav-link.active::before{content:'';width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--dark-blue);position:absolute;bottom:50%;transform:translateY(50%);right:-24px;left:auto}.slidertext{height:231px;padding:24px}.sliderimage{height:431px}.imagewrapper{height:400px;margin-bottom:24px}.textwrapper{padding:24px}.pickup{padding:4rem 1rem !important}.pickup>img{display:none}.pickup>p{margin-bottom:0 !important}.shipping{padding:4rem 1rem !important;background:var(--dark-blue) !important}.contact{padding:24px 24px 48px 24px}.footerlinks{margin-top:24px}footer .openinghours{text-align:center}footer .openinghours table{margin:.6rem auto}footer .openinghours table td:nth-child(1){text-align:left}}@media only screen and (min-width:600px){.oeffnungszeiten-container{display:flex;flex-direction:column;align-items:flex-end}.oeffnungszeiten{align-self:flex-end}}.imagewrapper-nobackground{margin-bottom:24px}.downloadmodul{font-size:20px;margin-bottom:10px}.downloadmodul a{color:var(--dark-blue);text-decoration:none}.downloadmodul a span{font-size:30px}#oeffnungszeiten{width:386px;margin-bottom:1rem}.openinghours-headline{font-weight:400;border-bottom:1px solid}.openinghours-zeile{white-space:nowrap}.openinghours-tag{display:inline-block;width:40px}.openinghours-vormittag{display:inline-block;width:180px}.openinghours-nachmittag{display:inline-block;width:166px}.oeffnungszeiten-ausrichtung{display:flex;flex-direction:column;align-items:center}@media only screen and (min-width:766px){.oeffnungszeiten-ausrichtung{display:flex;flex-direction:column;align-items:flex-end}}
.mySwiper {
display: flex;
gap: 30px;
align-items: center;
flex-direction: column;
}
body {
overflow-x: hidden;
}
/* Services Section */
.services-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
}
.services-header {
text-align: center;
margin-bottom: 60px;
}
.services-header h2 {
font-size: 42px;
color: #2c5282;
font-weight: bold;
margin-bottom: 15px;
}
.services-header p {
font-size: 18px;
color: #666;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #e91e63, #9c27b0);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.service-icon {
width: 80px;
height: 80px;
border-radius: 16px;
background: linear-gradient(135deg, #e91e63, #9c27b0);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
color: white;
font-size: 32px;
}
.service-card h3 {
font-size: 24px;
color: #2c5282;
font-weight: bold;
margin-bottom: 15px;
}
.service-card p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
font-size: 16px;
}
.service-features {
list-style: none;
padding: 0;
}
.service-features li {
color: #555;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
font-size: 14px;
}
.service-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #4CAF50;
font-weight: bold;
}
.service-price {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.price-text {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.price-amount {
font-size: 24px;
font-weight: bold;
color: #e91e63;
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-card {
padding: 30px;
}
.services-header h2 {
font-size: 32px;
}
}
.contact-info {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 50px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.2);
margin-top: 60px;
}
.contact-info h3 {
font-size: 28px;
color: #2c5282;
margin-bottom: 30px;
font-weight: bold;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 25px;
padding: 20px;
background: rgba(244, 248, 255, 0.8);
border-radius: 15px;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.contact-item:hover {
background: rgba(233, 30, 99, 0.1);
border-left-color: #e91e63;
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #e91e63, #9c27b0);
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 16px;
color: #2c5282;
font-weight: bold;
margin-bottom: 5px;
}
.contact-details p {
color: #666;
font-size: 15px;
line-height: 1.4;
}
.contact-details a {
color: #e91e63;
text-decoration: none;
transition: color 0.3s;
}
.contact-details a:hover {
color: #9c27b0;
}