@charset "UTF-8";
/*! Contents generated by MODX - this file will be overwritten. */@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@700&display=swap");:root{--main-bg-color: #ffffff;--font-color: #2B2B2B;--naviumbruch: 1000px;--font1:"Montserrat", sans-serif;--font2:"Quicksand", sans-serif;--page-color1:#ff2f35;--page-color2:#ff2f35;--page-color3:#f3e9e9;--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}}/*!Schriftart von Google Fonts*/h1,h2,h3,h4,h5,h6{font-family:"Reem Kufi", sans-serif;font-weight:700;line-height:1.5em}/*!Icongrösse bei Icon-Liste ändern*/.wicon{width:56px}/*!Zentrierte Bilder beim 3-Spalten Layout*
/*! Nur Spalten mit der Klasse .col3-zentriert werden zentriert */.col3.maxw.col3-zentriert .c3{display:flex !important;flex-direction:column !important;align-items:center !important;/*! Zentriert alles horizontal */text-align:center !important;/*! Zentriert den Text */justify-content:flex-start}/*! Sicherstellen, dass das Picture-Tag in zentrierten Spalten nicht im Weg steht */.col3.maxw.col3-zentriert .c3 picture{display:block !important;width:100% !important;text-align:center !important}/*! Das Bild in zentrierten Spalten ausrichten */.col3.maxw.col3-zentriert .c3 img{display:inline-block !important;margin:0 auto !important;float:none !important}/*!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}/*!letzten navipunkt hervorheben*/@media (min-width:1000px){nav>ul>li.last{border-radius:5px;height:20px;margin-right:20px;background:var(--page-color1)}nav>ul>li.last a{color:var(--page-color4)}nav>ul>li.last a:hover{color:var(--page-color4);text-decoration:underline}nav>ul>li.last:hover>a{color:var(--page-color4)}li.last.active::before{display:none}}/*!letzten navipunkt hervorheben Ende*//*!Grösse Navigation*/.navbar{height:80px}/*!Schriftart vergrössern*/nav a{font-size:20px}li.parent a,li.parent span{font-size:20px}/*!Hochzähler*/.stats-container{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;/*! Ausrichtung oben, damit die Kreise bündig sind */gap:40px;flex-wrap:wrap;padding:60px 20px;background:transparent;font-family:Arial, sans-serif}.stat-element{display:flex;flex-direction:column;align-items:center;width:180px;/*! Etwas mehr Breite für den Text */}.ring-wrapper{position:relative;width:160px;height:160px;display:flex;justify-content:center;align-items:center;margin-bottom:15px;/*! Abstand zum Text darunter */}.ring-svg{position:absolute;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#ffffff;stroke-width:8}.ring-progress{fill:none;stroke:#ff2f35;/*! Dein Rot */stroke-width:8;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 3s ease-in-out}.stat-center{display:flex;align-items:baseline;z-index:5}.stat-number{font-size:3rem;/*! Grössere Zahl */font-weight:bold;color:#ffffff;line-height:1}.stat-unit{font-size:1.8rem;/*! Symbol etwas dezenter als die Zahl */font-weight:bold;color:#ff2f35;margin-left:2px}.stat-label{margin:0;font-size:1.1rem;color:#ffffff;text-transform:uppercase;text-align:center;letter-spacing:1px;width:100%}@media (max-width:768px){/*! Falls die Zahlen in der Mitte durch das Skalieren zu klein werden */.stats-container{gap:10px;padding:40px 10px;display:flex;flex-wrap:wrap;justify-content:center}.stat-element{/*! Zwei Spalten */width:45% !important;margin-bottom:20px;display:flex;flex-direction:column;align-items:center}.ring-wrapper{/*! Wir behalten die logische Grösse von 160px bei... */width:160px;height:160px;/*! ...aber wir verkleinern die optische Darstellung auf 65% */transform:scale(0.65);/*! Damit der Text unten nicht weggeschoben wird, korrigieren wir den Margin */margin-bottom:-30px;margin-top:-20px}.stat-label{font-size:0.9rem;margin-top:0;z-index:10;position:relative}.stat-number{font-size:3.5rem !important;/*! Hier etwas grösser, da scale alles schrumpft */}.stat-unit{font-size:2rem !important}}/*!Hintergrundbild bei Text rechts*//*! ============================================================
   ContentBlocks Sektion: Text Rechts (Mobile Fix: 15% Bild)
   ============================================================ *//*! 1. Grund-Container */.header.text-rechts{display:flex !important;align-items:center;position:relative;background-color:var(--main-bg-color) !important;overflow:hidden;width:100%}/*! 2. Der Verlauf-Layer (Overlay) - Desktop */.header.text-rechts .header-bg-overlay{opacity:1 !important;z-index:2;background:linear-gradient(to bottom, var(--main-bg-color) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(to left, var(--main-bg-color) 0%, var(--main-bg-color) 35%, rgba(255, 255, 255, 0) 70%) !important}/*! 3. Bild-Anpassung */.header.text-rechts .header-bg img{display:block;width:100%;height:100%;object-fit:cover}/*! 4. Der Inhalts-Container (maxw) */.header.text-rechts .header-content.maxw{position:relative;z-index:3;width:100%;margin:0 auto !important;padding:0 40px !important;display:block !important}/*! 5. Positionierung Desktop (55% Offset) */.header.text-rechts .header-content>h1,.header.text-rechts .header-content>h2,.header.text-rechts .header-content>hr,.header.text-rechts .header-content>div,.header.text-rechts .header-content>p{margin-left:55% !important;margin-right:auto !important;width:auto !important;text-align:left !important;display:block !important}/*! 6. Schriftfarben */.header.text-rechts .header-content h1,.header.text-rechts .header-content h2,.header.text-rechts .header-content h3,.header.text-rechts .header-content h4,.header.text-rechts .header-content h5{color:var(--page-color1) !important}.header.text-rechts .header-content p,.header.text-rechts .header-content span,.header.text-rechts .header-content li{color:var(--font-color) !important}/*! 7. HR-Linie Desktop */.header.text-rechts .header-content hr{height:2px !important;background-color:var(--page-color2) !important;border:none !important;max-width:250px;margin-left:0 !important}/*! 8. Mobile Optimierung */@media (max-width:991px){/*! Text linksbündig *//*! Der Mobile-Schleier mit 85% Deckkraft (15% Bild-Sichtbarkeit) */.header.text-rechts .header-content>h1,.header.text-rechts .header-content>h2,.header.text-rechts .header-content>hr,.header.text-rechts .header-content>div,.header.text-rechts .header-content>p{margin-left:0 !important;width:100% !important;max-width:100% !important;text-align:left !important;background:transparent !important;padding:5px 0 !important}.header.text-rechts .header-bg-overlay{opacity:1 !important;/*! Wir nutzen 0.85 für 85% Farbabdeckung */background:linear-gradient(to bottom, var(--main-bg-color) 0%, rgba(255, 255, 255, 0.85) 15%, rgba(255, 255, 255, 0.85) 85%, var(--main-bg-color) 100%) !important}.header.text-rechts .header-content hr{margin-left:0 !important;margin-right:auto !important;max-width:150px !important}}/*! Spezielle Korrektur für die Linie in Text-Rechts */.header.text-rechts .header-content>hr{margin-left:55% !important;/*! Gleicher Einzug wie der Text */margin-right:auto !important;width:250px !important;/*! Fixe Breite gemäss Inline-Style */display:block !important}/*! Mobile Korrektur für Text-Rechts (wieder ganz nach links) */@media (max-width:991px){.header.text-rechts .header-content>hr{margin-left:0 !important;max-width:150px !important}}/*!Hintergrundbild bei Text links*//*! ============================================================
   ContentBlocks Sektion: Text Links (Gespiegelte Logik)
   ============================================================ *//*! 1. Grund-Container */.header.text-links{display:flex !important;align-items:center;position:relative;background-color:var(--main-bg-color) !important;overflow:hidden;width:100%}/*! 2. Der Verlauf-Layer (Overlay) - Desktop */.header.text-links .header-bg-overlay{opacity:1 !important;z-index:2;background:linear-gradient(to bottom, var(--main-bg-color) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(to right, var(--main-bg-color) 0%, var(--main-bg-color) 35%, rgba(255, 255, 255, 0) 70%) !important;/*! Verlauf oben */}/*! 3. Bild-Anpassung */.header.text-links .header-bg img{display:block;width:100%;height:100%;object-fit:cover}/*! 4. Der Inhalts-Container (maxw) */.header.text-links .header-content.maxw{position:relative;z-index:3;width:100%;margin:0 auto !important;padding:0 40px !important;display:block !important}/*! 5. Positionierung Desktop (55% Offset von RECHTS) */.header.text-links .header-content>h1,.header.text-links .header-content>h2,.header.text-links .header-content>hr,.header.text-links .header-content>div,.header.text-links .header-content>p{margin-right:55% !important;/*! Text bleibt in der linken Hälfte */margin-left:0 !important;width:auto !important;text-align:left !important;display:block !important}/*! 6. Schriftfarben */.header.text-links .header-content h1,.header.text-links .header-content h2,.header.text-links .header-content h3,.header.text-links .header-content h4,.header.text-links .header-content h5{color:var(--page-color1) !important}.header.text-links .header-content p,.header.text-links .header-content span,.header.text-links .header-content li{color:var(--font-color) !important}/*! 7. HR-Linie Desktop */.header.text-links .header-content hr{height:2px !important;background-color:var(--page-color2) !important;border:none !important;max-width:250px;margin-left:0 !important}/*! 8. Mobile Optimierung */@media (max-width:991px){/*! Der Mobile-Schleier (identisch mit text-rechts für Konsistenz) */.header.text-links .header-content>h1,.header.text-links .header-content>h2,.header.text-links .header-content>hr,.header.text-links .header-content>div,.header.text-links .header-content>p{margin-right:0 !important;width:100% !important;max-width:100% !important;text-align:left !important;background:transparent !important;padding:5px 0 !important}.header.text-links .header-bg-overlay{opacity:1 !important;background:linear-gradient(to bottom, var(--main-bg-color) 0%, rgba(255, 255, 255, 0.85) 15%, rgba(255, 255, 255, 0.85) 85%, var(--main-bg-color) 100%) !important}.header.text-links .header-content hr{margin-left:0 !important;margin-right:auto !important;max-width:150px !important}}/*!-------------------------------*//*!Bild im Header zentrieren*//*!-------------------------------*/img{display:block;margin-left:auto;margin-right:auto;vertical-align:bottom;height:auto;width:auto;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}/*!-------------------------------*//*! CSS für die Header-Struktur und Ausrichtung *//*!-------------------------------*/.site-header{width:100%;background-color:transparent;/*! Falls du einen Hintergrund möchtest */padding:px px;height:0px;/*! Höhe des Headers – etwas angepasst für das grössere Logo */display:flex;align-items:center}.header-container{margin:50px;width:100%}/*! Absolute Positionierung des Logos */.absolute-logo-link{position:fixed;/*! Löst das Element aus dem Layout-Fluss */top:130px;/*! Klebt ganz oben */right:50px;/*! Klebt ganz rechts */z-index:100000000;/*! Stellt sicher, dass das Logo ÜBER dem Header liegt */display:block;background:transparent;/*! Verhindert eine weiße Box um das Logo */border:none;/*! Entfernt Standard-Rahmen von Links */}.absolute-header-logo{display:block;height:auto;/*! GRÖSSE:
       max-height: 60px war der alte Wert.
       Wir verdoppeln ihn auf ca. 120px für den Desktop-View.
       Du kannst hier auch `width` verwenden, falls das besser passt.
    */max-height:120px;width:auto;background:transparent;/*! Erzwingt Transparenz für das PNG */}/*! Responsive Anpassung: Auf kleinen Bildschirmen sollte das Logo nicht 
     alles überdecken. Wir verkleinern es hier wieder etwas. */@media (max-width:768px){.absolute-header-logo{display:none}}/*!============================================*//*! 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}}