@charset "UTF-8";
/*! Contents generated by MODX - this file will be overwritten. */:root{--main-bg-color: #000000;--font-color: #ffffff;--naviumbruch: 1000px;--font1:"Montserrat", sans-serif;--font2:"Quicksand", sans-serif;--page-color1:#c11721;--page-color2:#535353;--page-color3:#282828;--page-color4:#ffffff;--maxwidth:1500px}/*!in SCSS wieder integrieren, css var in media queries funktionieren*/@media (max-width:1000px){button.menu-btn{display:-webkit-box;display:-ms-flexbox;display:flex}.navbar{z-index:1001;position:relative}.navbar::before{content:"";display:block;width:100%;height:100%;background:white;position:absolute;top:0;left:0;z-index:1001}.logo{position:relative;z-index:1002}nav{display:none;position:absolute;width:100%;top:79px;border-top:1px solid #e5ede7;-webkit-transform:translateY(-220%);-ms-transform:translateY(-220%);transform:translateY(-220%);background-color:white;z-index:1000;-webkit-transition:-webkit-transform ease 0.3s;transition:-webkit-transform ease 0.3s;-o-transition:transform ease 0.3s;transition:transform ease 0.3s;transition:transform ease 0.3s, -webkit-transform ease 0.3s}nav ul{display:block;background:white;z-index:1000;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;height:-webkit-fit-content;height:fit-content;border-bottom:4px solid #073a57}nav li{height:auto;width:100%;padding:0}nav li.active::before{content:"";display:block;background-color:#073a57;width:4px;height:100%;position:absolute;top:0;left:0}nav li.active:not(.parent)::after{content:"";display:block;background-color:#073a57;width:4px;height:100%;position:absolute;top:0;right:0}nav a,nav span{width:100%;padding:12px 20px;text-align:center;border-bottom:1px solid #a4bfcf}.menu-active nav{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}nav{display:block}.mactive span{border-bottom-style:dotted}.mactive ul{visibility:visible;opacity:1;height:auto;display:block;border-top:0;padding-bottom:0;padding:20px;background:rgba(0, 0, 0, 0.05);padding-top:0;padding-bottom:0}li.parent::after{right:none;border-right:2px solid var(--page-color1);border-bottom:2px solid var(--page-color1);width:11px;height:11px;right:33px;top:33px}li.parent:hover::after{border-right:2px solid #000;border-bottom:2px solid #000}nav>ul>li>ul{visibility:hidden;opacity:0;position:relative;background:0;padding-top:0;height:0;display:none}nav>ul>li.mactive>ul{visibility:visible;opacity:1;height:auto;display:block}li.parent>ul a,li.parent>ul span{border-top:0}nav>ul>li>ul a,nav>ul>li>ul span{line-height:1.3em}}@media (max-width:1000px) and (min-width:1150px){nav>ul>li:hover>ul{display:block;opacity:1;visibility:visible}}@media (min-width:1000px){nav>ul>li:hover>ul{display:block;opacity:1;visibility:visible}}/*!Farbe Dropdown*/nav>ul>li>ul{background:var(--main-bg-color)}/*!Zeilenabstand*/body{line-height:1.7}/*!LogoBreite Fussteile ändern*/.global-kontakt img{width:350px;max-width:100%;max-height:100%}/*!Sektionen ausblenden über Ankerlink-ID*/#offline{display:none}/*!Grösse Navigation*/.navbar{height:100px}/*!Schriftart vergrössern*/nav a{font-size:20px}li.parent a,li.parent span{font-size:20px}/*!Hintergrundbild & Zeilenabstand*/body{line-height:1.7;background:url(/assets/userupload/assets/uploads/hintergrund.jpg) fixed no-repeat;background-size:cover;background-position:left center;/*! Standard: zentriert */}.navbar{background:var(--main-bg-color);border-bottom:1px solid var(--page-color3)}@media (max-width:1000px){.navbar::before{content:"";display:block;width:100%;height:100%;background:var(--main-bg-color);position:absolute;top:0;left:0;z-index:1001}nav ul{display:block;background:var(--main-bg-color);z-index:1000;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;height:-webkit-fit-content;height:fit-content;border-bottom:4px solid var(--page-color1)}nav li.active::before{background-color:var(--page-color1);width:4px;height:100%}nav li.active:not(.parent)::after{background-color:var(--page-color1);width:4px;height:100%}nav a,nav span{width:100%;padding:12px 20px;text-align:center;border-bottom:1px solid var(--page-color1)}}/*!============================================*//*! Burger *//*!============================================*/button.menu-btn{position:relative;z-index:1060;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0;color:var(--page-color1);border:none;background-color:transparent;display:none;margin-right:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.burger-icon{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:30px;height:22px}.custom-animated-burger .line{display:block;width:100%;height:3px;background-color:var(--page-color1);border-radius:2px;transition:all 0.3s ease-in-out}.custom-animated-burger.is-active .line-2{opacity:0;transform:translateX(-10px)}.custom-animated-burger.is-active .line-1{transform:translateY(9px) rotate(45deg)}.custom-animated-burger.is-active .line-3{transform:translateY(-10px) rotate(-45deg)}@media (max-width:1000px){button.menu-btn{display:-webkit-box;display:-ms-flexbox;display:flex}}/*!Schrift Floating-Google-Bewertungen*/.google-bewertung{font-family:arial;font-size:14px;color:var(--page-color1);background-color:var(--main-bg-color);border:1px solid var(--page-color1)}/*!Anpassung höhe Headerfoto auf Mobilgeräten*/@media (max-width:1000px){.header-fullheight{min-height:calc(60vh - 80px)}}.icons img{vertical-align:bottom;height:auto;width:100%;max-width:200px;max-height:100%}/*!=============================================
CTA-Button
=============================================*//*! Container für die Zentrierung */.button-wrapper{display:flex;justify-content:center;align-items:center;padding:30px;/*! Mehr Platz für den Welleneffekt */}.btn-contact{display:inline-block;padding:15px 40px;background-color:var(--page-color1);color:#ffffff;text-decoration:none;font-weight:bold;border-radius:5px;transition:all 0.4s ease;position:relative;border:1px solid var(--page-color3);text-transform:uppercase;letter-spacing:1px;z-index:1}/*! Pulsierender Welleneffekt */.btn-contact::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:5px;border:2px solid var(--page-color1);animation:ripple 3s infinite;z-index:-1}@keyframes ripple{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.3);opacity:0}}.btn-contact:hover{background-color:var(--page-color3);transform:scale(1.05);cursor:pointer}/*!Kontaktbereich/Footer abdunkeln*/.global-kontakt section{background:rgba(50, 0, 0, 0.5)}/*!==========================================
Service 1x5 Raster
==========================================*/.services-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:15px;width:100%}@media (max-width:1100px){.services-grid{grid-template-columns:1fr}}.service-card{display:flex;flex-direction:column;position:relative;padding-bottom:20px;text-align:center}.header-line{width:100%;height:2px;background:linear-gradient(to right, transparent, var(--page-color1) 25%, var(--page-color1) 75%, transparent);margin:15px 0;opacity:0;transition:opacity 1.5s ease}.is-visible .header-line{opacity:1}.card-header h4{color:var(--page-color1);font-weight:bold;margin:0;font-size:1.5rem;/*! Etwas grösser als Standard h4 */}.price-tag{color:var(--font-color);font-size:0.85rem;margin-top:5px;margin-bottom:-5px}.body-container{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:10px}.body-container::before{content:"";position:absolute;left:50%;top:0;width:2px;height:0;background:linear-gradient(to bottom, var(--page-color1), transparent);transition:height 1s ease 0.5s}.is-visible .body-container::before{height:100%}.service-list{list-style:none;padding:0;margin:0;width:100%}.service-list li{margin:10px 0;display:flex;/*! Nicht mehr inline-flex */justify-content:center;/*! Hält das Icon + Text zentriert */align-items:center;opacity:0;transform:translateY(10px);transition:all 0.5s ease;background:black;color:white;padding:4px 12px;border-radius:4px;width:fit-content;/*! Das sorgt dafür, dass der schwarze Balken nur so breit ist wie der Inhalt */margin-left:auto;/*! Zusammen mit margin-right sorgt das für Zentrierung */margin-right:auto}/*! Vollständige Liste der 10 Elemente */.is-visible .service-list li:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0.6s}.is-visible .service-list li:nth-child(2){opacity:1;transform:translateY(0);transition-delay:0.7s}.is-visible .service-list li:nth-child(3){opacity:1;transform:translateY(0);transition-delay:0.8s}.is-visible .service-list li:nth-child(4){opacity:1;transform:translateY(0);transition-delay:0.9s}.is-visible .service-list li:nth-child(5){opacity:1;transform:translateY(0);transition-delay:1s}.is-visible .service-list li:nth-child(6){opacity:1;transform:translateY(0);transition-delay:1.1s}.is-visible .service-list li:nth-child(7){opacity:1;transform:translateY(0);transition-delay:1.2s}.is-visible .service-list li:nth-child(8){opacity:1;transform:translateY(0);transition-delay:1.3s}.is-visible .service-list li:nth-child(9){opacity:1;transform:translateY(0);transition-delay:1.4s}.is-visible .service-list li:nth-child(10){opacity:1;transform:translateY(0);transition-delay:1.5s}.service-list li::before{content:"";width:16px;height:16px;background-image:url("assets/userupload/assets/uploads/hantel.png");background-size:contain;margin-right:6px;flex-shrink:0}/*!==========================================
Service Raster System
==========================================*/.services-grid{display:grid;gap:30px;width:100%}/*! Fallback: Wenn keine Spaltenklasse definiert ist, nimmt er 3 */.services-grid{grid-template-columns:repeat(3, 1fr)}/*! Klassen für manuelle Steuerung */.grid-3{grid-template-columns:repeat(3, 1fr)}.grid-4{grid-template-columns:repeat(4, 1fr)}.grid-5{grid-template-columns:repeat(5, 1fr)}@media (max-width:900px){.services-grid{grid-template-columns:1fr}}.service-card{display:flex;flex-direction:column;position:relative;text-align:center;width:100%;/*! Wichtig: Hier keine feste Breite! */}