.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-37 .elementor-element.elementor-element-2c7dd19{padding:0px 0px 15px 0px;}.elementor-37 .elementor-element.elementor-element-2c7dd19 .elementor-heading-title{font-family:"Klavika Condensed", Sans-serif;font-size:52px;font-weight:500;color:#5F5650;}.elementor-37 .elementor-element.elementor-element-7cf63d6{--e-image-carousel-slides-to-show:1;}.elementor-37 .elementor-element.elementor-element-4858ba7{padding:0px 0px 15px 50px;}.elementor-37 .elementor-element.elementor-element-4858ba7 .elementor-heading-title{font-family:"Klavika Condensed", Sans-serif;font-size:40px;font-weight:500;color:#5F5650;}.elementor-37 .elementor-element.elementor-element-1dcc3aa{--e-image-carousel-slides-to-show:1;}.elementor-37 .elementor-element.elementor-element-7da6b81{padding:0px 0px 15px 50px;}.elementor-37 .elementor-element.elementor-element-7da6b81 .elementor-heading-title{font-family:"Klavika Condensed", Sans-serif;font-size:40px;font-weight:500;color:#5F5650;}.elementor-37 .elementor-element.elementor-element-9e4a76e{--e-image-carousel-slides-to-show:1;}.elementor-37 .elementor-element.elementor-element-4046a5a{padding:0px 0px 15px 50px;}.elementor-37 .elementor-element.elementor-element-4046a5a .elementor-heading-title{font-family:"Klavika Condensed", Sans-serif;font-size:40px;font-weight:500;color:#5F5650;}.elementor-37 .elementor-element.elementor-element-a574065{--e-image-carousel-slides-to-show:1;}.elementor-37 .elementor-element.elementor-element-983d7e6{padding:0px 0px 15px 50px;}.elementor-37 .elementor-element.elementor-element-983d7e6 .elementor-heading-title{font-family:"Klavika Condensed", Sans-serif;font-size:40px;font-weight:500;color:#5F5650;}@media(max-width:1024px){.elementor-37 .elementor-element.elementor-element-2c7dd19 .elementor-heading-title{font-size:42px;}.elementor-37 .elementor-element.elementor-element-4858ba7 .elementor-heading-title{font-size:34px;}.elementor-37 .elementor-element.elementor-element-7da6b81 .elementor-heading-title{font-size:34px;}.elementor-37 .elementor-element.elementor-element-4046a5a .elementor-heading-title{font-size:34px;}.elementor-37 .elementor-element.elementor-element-983d7e6 .elementor-heading-title{font-size:34px;}}@media(max-width:767px){.elementor-37 .elementor-element.elementor-element-2c7dd19 .elementor-heading-title{font-size:34px;}.elementor-37 .elementor-element.elementor-element-4858ba7{padding:0px 0px 0px 0px;}.elementor-37 .elementor-element.elementor-element-4858ba7 .elementor-heading-title{font-size:20px;}.elementor-37 .elementor-element.elementor-element-7da6b81{padding:0px 0px 0px 0px;}.elementor-37 .elementor-element.elementor-element-7da6b81 .elementor-heading-title{font-size:20px;}.elementor-37 .elementor-element.elementor-element-4046a5a{padding:0px 0px 0px 0px;}.elementor-37 .elementor-element.elementor-element-4046a5a .elementor-heading-title{font-size:20px;}.elementor-37 .elementor-element.elementor-element-983d7e6{padding:0px 0px 0px 0px;}.elementor-37 .elementor-element.elementor-element-983d7e6 .elementor-heading-title{font-size:20px;}}/* Start custom CSS for image-carousel, class: .elementor-element-7cf63d6 *//* --- DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ color: #ffffff !important; /* Pfeilfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Stellt sicher, dass die Pfeile über dem Bild liegen */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next:hover { background-color: #5f5650 !important; color: #ffffff !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS GRÖSSE --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; } /* --- EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) --- */ @media (max-width: 767px) /* ========================================================================== 1. LAYOUT-KORREKTUR FÜR DAS BILD-KARUSSELL (Verhindert Verschiebungen) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-image-carousel-wrapper { position: relative !important; } /* Verhindert, dass das Karussell unten Platz für Standard-Punkte/Pfeile verschwendet */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-main-swiper { padding-bottom: 0px !important; } /* ========================================================================== 2. DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Über dem Bild */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next:hover { background-color: #5f5650 !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS FARBE & GRÖSSE (Für Bild-Karussell i und svg) --- */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; fill: #ffffff !important; /* Erzwingt weisse Pfeile bei SVGs */ color: #ffffff !important; /* Erzwingt weisse Pfeile bei Icons */ } /* ========================================================================== 3. EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) ========================================================================== */ @media (max-width: 767px) { /* Setzt die Kästchen exakt auf 24px (60% von 40px) */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { width: 24px !important; height: 24px !important; bottom: 0px !important; } /* Skaliert die Pfeil-Icons exakt mit (60% von 16px ≈ 10px) */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next svg { font-size: 10px !important; width: 10px !important; height: 10px !important; } /* Rechter Pfeil: Exakt 60% von 20px Abstand */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next { right: 12px !important; } /* Linker Pfeil: Exakt 60% von 69px Abstand */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev { right: 41px !important; } /* Verhindert "Sticky-Hover" auf Touchscreens */ .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-7cf63d6 .elementor-swiper-button-next:hover { background-color: #a59e98 !important; } } .elementor-37 .elementor-element.elementor-element-7cf63d6 .swiper-slide { aspect-ratio: 16 / 12; overflow: hidden; } .elementor-37 .elementor-element.elementor-element-7cf63d6 .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-1dcc3aa *//* --- DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ color: #ffffff !important; /* Pfeilfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Stellt sicher, dass die Pfeile über dem Bild liegen */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next:hover { background-color: #5f5650 !important; color: #ffffff !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS GRÖSSE --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; } /* --- EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) --- */ @media (max-width: 767px) /* ========================================================================== 1. LAYOUT-KORREKTUR FÜR DAS BILD-KARUSSELL (Verhindert Verschiebungen) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-image-carousel-wrapper { position: relative !important; } /* Verhindert, dass das Karussell unten Platz für Standard-Punkte/Pfeile verschwendet */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-main-swiper { padding-bottom: 0px !important; } /* ========================================================================== 2. DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Über dem Bild */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next:hover { background-color: #5f5650 !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS FARBE & GRÖSSE (Für Bild-Karussell i und svg) --- */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; fill: #ffffff !important; /* Erzwingt weisse Pfeile bei SVGs */ color: #ffffff !important; /* Erzwingt weisse Pfeile bei Icons */ } /* ========================================================================== 3. EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) ========================================================================== */ @media (max-width: 767px) { /* Setzt die Kästchen exakt auf 24px (60% von 40px) */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { width: 24px !important; height: 24px !important; bottom: 0px !important; } /* Skaliert die Pfeil-Icons exakt mit (60% von 16px ≈ 10px) */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next svg { font-size: 10px !important; width: 10px !important; height: 10px !important; } /* Rechter Pfeil: Exakt 60% von 20px Abstand */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next { right: 12px !important; } /* Linker Pfeil: Exakt 60% von 69px Abstand */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev { right: 41px !important; } /* Verhindert "Sticky-Hover" auf Touchscreens */ .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-1dcc3aa .elementor-swiper-button-next:hover { background-color: #a59e98 !important; } } .elementor-37 .elementor-element.elementor-element-1dcc3aa .swiper-slide { aspect-ratio: 16 / 12; overflow: hidden; } .elementor-37 .elementor-element.elementor-element-1dcc3aa .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-9e4a76e *//* --- DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ color: #ffffff !important; /* Pfeilfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Stellt sicher, dass die Pfeile über dem Bild liegen */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next:hover { background-color: #5f5650 !important; color: #ffffff !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS GRÖSSE --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; } /* --- EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) --- */ @media (max-width: 767px) /* ========================================================================== 1. LAYOUT-KORREKTUR FÜR DAS BILD-KARUSSELL (Verhindert Verschiebungen) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-image-carousel-wrapper { position: relative !important; } /* Verhindert, dass das Karussell unten Platz für Standard-Punkte/Pfeile verschwendet */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-main-swiper { padding-bottom: 0px !important; } /* ========================================================================== 2. DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Über dem Bild */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next:hover { background-color: #5f5650 !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS FARBE & GRÖSSE (Für Bild-Karussell i und svg) --- */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; fill: #ffffff !important; /* Erzwingt weisse Pfeile bei SVGs */ color: #ffffff !important; /* Erzwingt weisse Pfeile bei Icons */ } /* ========================================================================== 3. EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) ========================================================================== */ @media (max-width: 767px) { /* Setzt die Kästchen exakt auf 24px (60% von 40px) */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { width: 24px !important; height: 24px !important; bottom: 0px !important; } /* Skaliert die Pfeil-Icons exakt mit (60% von 16px ≈ 10px) */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next svg { font-size: 10px !important; width: 10px !important; height: 10px !important; } /* Rechter Pfeil: Exakt 60% von 20px Abstand */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next { right: 12px !important; } /* Linker Pfeil: Exakt 60% von 69px Abstand */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev { right: 41px !important; } /* Verhindert "Sticky-Hover" auf Touchscreens */ .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-9e4a76e .elementor-swiper-button-next:hover { background-color: #a59e98 !important; } } .elementor-37 .elementor-element.elementor-element-9e4a76e .swiper-slide { aspect-ratio: 16 / 10; overflow: hidden; } .elementor-37 .elementor-element.elementor-element-9e4a76e .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-a574065 *//* --- DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ color: #ffffff !important; /* Pfeilfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Stellt sicher, dass die Pfeile über dem Bild liegen */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next:hover { background-color: #5f5650 !important; color: #ffffff !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS GRÖSSE --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; } /* --- EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) --- */ @media (max-width: 767px) /* ========================================================================== 1. LAYOUT-KORREKTUR FÜR DAS BILD-KARUSSELL (Verhindert Verschiebungen) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-image-carousel-wrapper { position: relative !important; } /* Verhindert, dass das Karussell unten Platz für Standard-Punkte/Pfeile verschwendet */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-main-swiper { padding-bottom: 0px !important; } /* ========================================================================== 2. DESIGN FÜR BEIDE PFEILE (DESKTOP / STANDARD) ========================================================================== */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { background-color: #a59e98 !important; /* Wunschfarbe */ width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; /* Platziert beide Pfeile unten */ position: absolute !important; top: auto !important; bottom: 0px !important; z-index: 10 !important; /* Über dem Bild */ } /* --- HOVER-EFFEKT --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next:hover { background-color: #5f5650 !important; } /* --- LINKER PFEIL (unten rechts positioniert) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev { left: auto !important; right: 69px !important; /* Abstand nach rechts */ } /* --- RECHTER PFEIL (ganz unten rechts) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { right: 20px !important; } /* --- PFEIL-ICONS FARBE & GRÖSSE (Für Bild-Karussell i und svg) --- */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next svg { font-size: 16px !important; width: 16px !important; height: 16px !important; fill: #ffffff !important; /* Erzwingt weisse Pfeile bei SVGs */ color: #ffffff !important; /* Erzwingt weisse Pfeile bei Icons */ } /* ========================================================================== 3. EXAKTE ANPASSUNG FÜR SMARTPHONES (60% Skalierung) ========================================================================== */ @media (max-width: 767px) { /* Setzt die Kästchen exakt auf 24px (60% von 40px) */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { width: 24px !important; height: 24px !important; bottom: 0px !important; } /* Skaliert die Pfeil-Icons exakt mit (60% von 16px ≈ 10px) */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next i, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev svg, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next svg { font-size: 10px !important; width: 10px !important; height: 10px !important; } /* Rechter Pfeil: Exakt 60% von 20px Abstand */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next { right: 12px !important; } /* Linker Pfeil: Exakt 60% von 69px Abstand */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev { right: 41px !important; } /* Verhindert "Sticky-Hover" auf Touchscreens */ .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-prev:hover, .elementor-37 .elementor-element.elementor-element-a574065 .elementor-swiper-button-next:hover { background-color: #a59e98 !important; } } .elementor-37 .elementor-element.elementor-element-a574065 .swiper-slide { aspect-ratio: 16 / 12; overflow: hidden; } .elementor-37 .elementor-element.elementor-element-a574065 .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Klavika Condensed'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebBoldCondensed.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: italic; font-weight: 700; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebBoldCondensedItalic.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebLightCondensed.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: italic; font-weight: 300; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebLightCondensedItalic.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebMediumCondensed.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: italic; font-weight: 500; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebMediumCondensedItalic.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebRegularCondensed.woff') format('woff'); } @font-face { font-family: 'Klavika Condensed'; font-style: italic; font-weight: 400; font-display: auto; src: url('https://oswin-baettig.ch/wp-content/uploads/2026/09/KlavikaWebRegularCondensedItalic.woff') format('woff'); } /* End Custom Fonts CSS */