/*=========================================================================== TEMPLATE GLOBAL ========================================================= ===========================================================================*/ /*GREY BACKGROUND*/ html body .alternate-content { background: #f9f9f9; max-width: 100% !important; } html body .alternate-content .alternate-inner-container{ max-width: 1430px; margin: 0 auto; } /*PADDING TOP & BOTTOM*/ html body .alternate-content, div.custom-two-grid, html .ym-wrapper.closer #closer-content .logo-grid { padding-top: 100px; padding-bottom: 100px; } /*HOME ABSTÄNDE*/ .startseite.no-intro .content-main { padding-top: 35px; } #subnav ul li a { padding-top: 10px; padding-bottom: 10px; } #subnav { max-height: 210px; margin-bottom: 30px; overflow-y: scroll !important; } #subnav::-webkit-scrollbar { width: 10px; /* Breite der Scrollbar */ } #subnav::-webkit-scrollbar-track { background: #f9f9f9; /* Hintergrund */ border-radius: 10px; } #subnav::-webkit-scrollbar-thumb { background: #232522; /* Farbe des Scrollbalkens */ border-radius: 10px; } #subnav::-webkit-scrollbar-thumb:hover { background: #232522; /* Hover-Farbe */ } #subnav { scrollbar-width: thin; /* oder auto */ scrollbar-color: #232522 #f9f9f9; /* thumb / track */ } /*DOC BOX*/ .content-sidebar .article-content-wrapper:not(.col1) .article-image, .content-sidebar .article-content-wrapper:not(.col1) .article-image img { max-height: 180px; } .content-sidebar .article-content-wrapper:not(.col1) .doc-content { padding-top: 20px; padding-bottom: 20px; } /*ABSTÄNDE CONTENT*/ .textile.flex-counting, .textile.flex-counting + .textile:not(.flex-counting), .textile ul + h2, p + h3, p + h2, .textile:not(.flex-counting) + .textile:not(.flex-counting) { margin-top: 40px; } .textile.flex-counting + .textile.flex-counting { margin-top: 20px; } p:empty + h2 { margin-top: 0; } hr { margin: 2em 0 1em; } /*=========================================================================== SHADOWS GLOBAL ========================================================== ===========================================================================*/ body .article, html .splide.col3 .splide-content, .doc-box, .formgen, .reason-why .ym-g50, .box-fullwidth .article .article-image, div#main .search-wrapper .searchform_sidebar .searchform { -webkit-box-shadow: 0px 5px 12px rgb(0 0 0 / 18%); box-shadow: 0px 5px 12px rgb(0 0 0 / 18%); } /*=========================================================================== BORDER-RADIUS GLOBAL ========================================================== ===========================================================================*/ body .article, body .article-list.box-view .article, body .article-list.list-view .article, body .article-content, body #subnav, body .doc-box, .article-image img, .ec-custom-article, .article-content-wrapper:not(.col1) .article-image img, .reason-why .ym-g50, .formgen, .quote-slider-container.green .slide .slide-content, .page_1 .article-list.box-view .article, .page_1 .article-list.list-view .article, html .promokachel .promo_image, html .promokachel .promo-text, html .promokachel .promo_image img, html .doc-labels .link-container, div#main .search-wrapper .searchform_sidebar .searchform { border-radius: 10px; overflow: hidden; } /*NO BORDER-RADIUS TOP*/ body .article-content{ border-top-left-radius: 0px; border-top-right-radius: 0px; } /*NO BORDER-RADIUS BOTTOM*/ body .article-image img, body .ec-custom-article, .article-content-wrapper:not(.col1) .article-image img { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } /*=========================================================================== TYPOGRAPHY ============================================================ ===========================================================================*/ @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-Oblique.woff2') format('woff2'), url('../fonts/Avenir-Oblique.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-Roman.woff2') format('woff2'), url('../fonts/Avenir-Roman.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-MediumOblique.woff2') format('woff2'), url('../fonts/Avenir-MediumOblique.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-LightOblique.woff2') format('woff2'), url('../fonts/Avenir-LightOblique.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-Light.woff2') format('woff2'), url('../fonts/Avenir-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-Heavy.woff2') format('woff2'), url('../fonts/Avenir-Heavy.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-Medium.woff2') format('woff2'), url('../fonts/Avenir-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/Avenir-HeavyOblique.woff2') format('woff2'), url('../fonts/Avenir-HeavyOblique.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; } /*HEADLINES default*/ .ec-light, h1, h2, h3, h4, .facts-box h2, h1 strong, h2 strong, h3 strong { font-weight: 400; } /*.ec-light { display: inline; }*/ h1 { font-size: 32px; line-height: normal; } /*HEADLINE H2 default oder H3 BIG*/ .quote-slider-container.green .navigation h2.title, .kachel-box-wrap .info-text h3, html .promokachel-wrapper .promo-box-wrap .promo-text h3 { font-size: 26px; line-height: normal; } /*HEADLINE H4*/ .splide .splide-content h4, html body .splide__slide.article-list .splide-content h4, .doctor-ap .doctor-ap .doc-box h4, .doc-box h4, .article-content-wrapper:not(.col1) h4, .reason-why .content-box h4, html h4, html .h4-style { font-size: 20px; margin-bottom: 0.75rem; padding-bottom: 0px; } html body .doc-box h4 { margin-bottom: 10px; } /*STARTSEITE HEADLINES BIG*/ .startseite h1, .startseite h2 { font-size: 40px; line-height: normal; font-weight: 400; max-width: 900px; margin-bottom: 1rem; } .logo-grid h2 { margin: 0 auto; } .logo-inner { max-width: 1320px; } /*BODY*/ /*Text default*/ p, body, .splide .splide-content p, .reason-why p, footer p, footer b, footer a { font-weight: 400; font-size: 16px; line-height: normal !important; } /*Text BIG*/ html .quote-slider-container.green .slide .slide-content span.star, html .quote-slider-container.green .navigation .text, html .content-wbox .promokachel p, html .promo-text ul.checkmark-marker li, html .custom-two-grid .info-text p, html .custom-two-grid .info-text .contact-data p, html .custom-two-grid .info-text .contact-data div, html .custom-two-grid .info-text .contact-data a, html .usp-single .usp-text p, html .reason-why h2 + p { font-size: 18px; line-height: normal; } .page_11 .content_image, .textile img, p, .page_186 .content_image { margin: 0 0 20px 0; } :focus-visible { outline: none; } /*=========================================================================== Intro Startseite ========================================================== ===========================================================================*/ /*Disable Intro image & Text (Mediapool) */ html .startseite .channel_bg img.intro, html .startseite .slide-text, html .startseite .intro-text { display: none; } /*Startseite Intro neue Struktur*/ html .startseite .channel_bg .container h1 { font-size: 40px; line-height: normal; font-weight: 400; margin-bottom: 1rem; } html .home-intro span.slide-logos.first .icon { width: 100%; display: block; font-weight: 400; margin-bottom: 10px; font-size: 24px; } html .home-intro span.slide-logos img { margin-top: 15px; width: 250px; height: auto; -webkit-filter: contrast(2); filter: contrast(2); } html .home-intro span.slide-logos.first .icon svg { padding-right: 8px; } /*Doctor labels*/ /*Enable individual doctoral images*/ html img.doc-img { display: block; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } /*=========================================================================== Buttons =================================================================== ===========================================================================*/ /*HEADER BUTTON*/ .lang-1 #topnav .kontakt-test:hover .button { background: transparent; color: #232522; opacity: 1; border-color: #232522; } /*BORDER WIDTH*/ #topnav .button.blue, .cta-buttons a.button.mail, .cta-buttons a.button.mail:hover, .cta-buttons a.button, .cta-buttons a.button:hover, .cta-banner.center a.button.appointment, .cta-buttons a.button.appointment, .cta-banner.center a.button.appointment:hover, .cta-buttons a.button.appointment:hover, .article-content-wrapper:not(.col1) .ec-contact-button.phone-number, .article-content-wrapper .ec-contact-button.phone-number, .article-content-wrapper:not(.col1) .ec-contact-button.phone-number:hover, .article-content-wrapper .ec-contact-button.phone-number:hover, .formgen .formsubmit.button, .formgen .formsubmit.button:hover, .textile.flex-counting .button, .textile .button, .textile.flex-counting .button:hover, .textile .button:hover, .intro-text .cta-banner a.button.accent, .intro-text .cta-banner a.button.tel, .intro-text .cta-banner a.button.accent:hover, .intro-text .cta-banner a.button.tel:hover, .ec-blog-article.article .button:after, html .box-fullwidth .button:after, .infoslider .video-link:after, .article-list.list-view .article .button:after, .article-list.box-view .article .button:after, .blogslider .article-content .button:after, .splide .splide-content .button:after { border-width: 2px; } /*GREEN BORDER*/ .intro-text .cta-banner a.button.accent { border-color: #A8D685; } /*White BORDER*/ .intro-text .cta-banner a.button.tel { border-color: #fff; } /*BLACK BORDER*/ .article-content-wrapper:not(.col1) .ec-contact-button.phone-number, .article-content-wrapper .ec-contact-button.phone-number, html .stellenanzeige .button:hover, .formgen .formsubmit.button:hover, html .intro-text .cta-banner a.button.accent:hover, html .intro-text .cta-banner a.button.tel:hover, #topnav .button.blue:hover, #topnav .button.blue:active, #topnav .button.blue:focus, .ec-mega-menu-teaser-btn-container .ec-mega-menu-teaser-btn:hover { border-color: #232522; } /*ADD BORDER*/ .channel_bg a.button, a.button.appointment { border: 2px solid #A8D685; } .channel_bg a.button:hover, .cta-box span.ec-contact-button.mail, .cta-box span.ec-contact-button.phone-number, a.button.appointment:hover, html body .cta-buttons a.button.mail:hover { border: 2px solid #232522; } /*REMOVE SVG ICON*/ html body .article-content-wrapper .doc-box .cta-banner.center a.button.appointment svg, html body .article-content-wrapper .doc-box .cta-banner.center a.button.appointment:hover svg { display: none; } /*PRIMÄR BUTTON -- ICON REMOVED*/ html body .button, html body .formgen input.button, html body .cta-banner.center a.button.appointment, html body .cta-buttons a.button.appointment, html body .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment, html body .textile.flex-counting .button, .textile .button, html body a.button.accent.appointment.green, html body .menopause-check .button.secondary, div#main .search-wrapper .searchform_sidebar .searchform input.searchform__submit { background: #A8D685; border-radius: 30px; color: #232522; font-weight: 400; font-size: 18px; padding: 15px 35px; margin-left: 0; text-decoration: none; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; } /*TRANSPARENT BUTTON ON HOVER*/ .button:active, .button:hover, .formgen input.button:active, .formgen input.button:hover, .textile.flex-counting .button:hover, .textile .button:hover, .textile.flex-counting .button:active, .textile .button:active, .cta-buttons a.button.mail:hover, .cta-banner.center a.button.appointment:hover, .cta-buttons a.button.appointment:hover, .doc-box .cta-banner.center a.button.appointment:hover, .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment:hover, .formgen .formsubmit.button:hover, a.button.accent.appointment.green:hover, .intro-text .cta-banner a.button.tel:hover { background: transparent; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; border: 2px solid; opacity: 1; } /*WHITE BUTTON ON HOVER*/ body:not(.startseite) .channel_bg a.button.accent.appointment.green:hover { background:transparent; /*color(srgb 1 1 1 / 0.60);*/ } body:not(.startseite) .channel_bg a.button.accent.appointment.green:hover svg { fill: #232522; } .intro-text .cta-banner a.button.tel { background:#fff; } /*BLACK BUTTON ON HOVER */ html .promo-text .button:hover, html body .menopause-check .button.secondary:hover, html .stellenanzeige .button:hover, div#main .search-wrapper .searchform_sidebar .searchform input.searchform__submit:hover { background: #232522; color: #fff; cursor: pointer; } /*SEKUNDÄR BUTTON*/ html .promo-text .button, .cta-buttons a.button.mail, html .stellenanzeige .button, html body .menopause-check .button.secondary, div#main .search-wrapper .searchform_sidebar .searchform input.searchform__submit { background:transparent; /*color(srgb 1 1 1 / 0.60);*/ padding: 15px 30px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-radius: 50px; border: 2px solid #000; margin-bottom: unset; -webkit-transition: 300ms all; -o-transition: 300ms all; transition: 300ms all; color: #232522; } /*SMALL PADDING BUTTON*/ html .article-content-wrapper .doc-box .cta-banner.center a.button.appointment, html .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment, html .article-content-wrapper .doc-box .cta-banner.center a.button.appointment:hover, html .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment:hover, html body .article-content-wrapper.col1 .doc-box .cta-banner.center a.button.appointment, html body .doc-box.cta-box .cta-banner.center a.button.appointment, html body .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment { padding: 10px 14px 10px 43px; background-size: 24px; } /*INTRO BUTTONS*/ html body .intro-text .cta-banner a.button.accent, html body .intro-text .cta-banner a.button.tel { padding: 8px 25px 8px 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*PHONE ICON*/ html body .article-content-wrapper:not(.col1) .ec-contact-button.phone-number, html body .article-content-wrapper .ec-contact-button.phone-number, html body .ec-contact-button.phone-number, html body .article-content-wrapper.col1 .ec-contact-button.phone-number, html body .doc-box.cta-box .ec-contact-button.phone-number { background: url("data:image/svg+xml;utf8,") center center no-repeat #ffffff; background-size: 24px; } html body .article-content-wrapper:not(.col1) .ec-contact-button.phone-number:hover, html body .article-content-wrapper .ec-contact-button.phone-number:hover, html body .ec-contact-button.phone-number:hover, html body .article-content-wrapper.col1 .ec-contact-button.phone-number:hover, html body .doc-box.cta-box .ec-contact-button.phone-number:hover { background: url("data:image/svg+xml;utf8,") center center no-repeat #232522; background-size: 24px; } /*MAIL ICON*/ html body .cta-buttons a.button.mail{ padding-left: 54px; background: url("data:image/svg+xml;utf8,") 15px center no-repeat transparent; } html body .cta-buttons a.button.mail:hover { background: url("data:image/svg+xml;utf8,") 15px center no-repeat #232522; color: #fff; } html body .ec-contact-button.phone-number.mail, html body .article-content-wrapper:not(.col1) .ec-contact-button.phone-number.mail, html body .article-content-wrapper.col1 .ec-contact-button.phone-number.mail, html body .doc-box.cta-box .ec-contact-button.phone-number.mail { background: url("data:image/svg+xml;utf8,") center center no-repeat #ffffff; background-size: 24px; } html body .ec-contact-button.phone-number.mail:hover, html body .article-content-wrapper:not(.col1) .ec-contact-button.phone-number.mail:hover, html body .article-content-wrapper.col1 .ec-contact-button.phone-number.mail:hover, html body .doc-box.cta-box .ec-contact-button.phone-number.mail:hover { background: url("data:image/svg+xml;utf8,") center center no-repeat #232522; background-size: 24px; } /*APPOINTMENT ICON*/ html body .cta-banner.center a.button.appointment, html body .cta-buttons a.button.appointment, html body .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper.col1 .doc-box .cta-banner.center a.button.appointment, html body .doc-box.cta-box .cta-banner.center a.button.appointment { background: url("data:image/svg+xml;utf8,") 15px center no-repeat #a8d685; padding-left: 54px; } html body .cta-banner.center a.button.appointment:hover, html body .cta-buttons a.button.appointment:hover, html body .doc-box .cta-banner.center a.button.appointment:hover, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment:hover, html body .article-content-wrapper.col1 .doc-box .cta-banner.center a.button.appointment:hover, html body .doc-box.cta-box .cta-banner.center a.button.appointment:hover { background: url("data:image/svg+xml;utf8,") 15px center no-repeat transparent; } html body .doc-box .cta-banner.center a.button.appointment:hover, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment:hover { padding-left: 54px; } /*CTA BUTTONS REIHENFOLGE*/ html body .cta-buttons a.button.mail { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;} html body span.trenner { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;} html body .cta-banner.center a.button.appointment, .cta-buttons a.button.appointment { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;} /*ARROW BUTTON UPDATE*/ /*ALIGN LEFT*/ html body .ec-blog-article.article .button:visited, html body .ec-blog-article.article .button, html body .splide:not(.artikelslider) .article-list.list-view .article .button, html body .article-list.box-view .article:not(.ec-category-blog-article) .button, html body .blogslider .article-content .button, html body .infoslider .video-link, html body .splide:not(.artikelslider) .article-list.list-view .article .button:visited, html body .infoslider .article-list .video-link:visited, html body .article-list.box-view .article:not(.ec-category-blog-article) .button:visited, html body .blogslider .article-content .button:visited, html body .splide .splide-content .button, html body .splide .splide-content .button:visited { padding-left: 0; right: unset; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 500; padding-right: 45px; margin-bottom: 20px; } html body .ec-blog-article.article .button:after, html body .splide:not(.artikelslider) .article-list.list-view .article .button:after, html body .article-list.box-view .article:not(.ec-category-blog-article) .button:after, html body .blogslider .article-content .button:after, html body .infoslider .video-link:after, html body .infoslider .article-list .video-link:after, html body .splide .splide-content .button:after, html body .ec-blog-article.article .button:hover:after, html body .splide:not(.artikelslider) .article-list.list-view .article .button:hover:after, html body .article-list.box-view .article:not(.ec-category-blog-article) .button:hover:after, html body .blogslider .article-content .button:hover:after, html body .infoslider .video-link:hover:after, html body .infoslider .article-list .video-link:hover:after, html body .splide:not(.artikelslider) .splide-content .button:hover:after { background: url("data:image/svg+xml;utf8,") no-repeat transparent; -webkit-transform: unset; -ms-transform: unset; transform: unset; top: 40%; right: 0; border: unset; background-size: unset; height: 10px; width: 28px; } html body .ec-blog-article.article .button:hover:after, html body .splide:not(.artikelslider) .article-list.list-view .article .button:hover:after, html body .article-list.box-view .article:not(.ec-category-blog-article) .button:hover:after, html body .blogslider .article-content .button:hover:after, html body .infoslider .video-link:hover:after, html body .infoslider .article-list .video-link:hover:after, html body .splide:not(.artikelslider) .splide-content .button:hover:after { -webkit-transform: translate(10px, 0px); -ms-transform: translate(10px, 0px); transform: translate(10px, 0px); } /*REMOVE BORDER*/ html body .info-box-wrap .info-text .button:hover, .secondBanner_behandlung .content .button:hover { border:none; } /*=========================================================================== Template Styles ============================================================ ===========================================================================*/ /*LP Header Button*/ .menu-button a.menu-button-text{ background: #A8D685; border: 2px solid #A8D685; color: #232522; margin: 0px; border-radius: 50px; font-weight: 400; display: block; } .menu-button a.menu-button-text:hover { border: 2px solid #A8D685; background: transparent; color: #5e5e5e; -webkit-transition: 300ms all; -o-transition: 300ms all; transition: 300ms all; } /*Allgemein*/ .startseite75 .formgen + .cta-banner.center, .startseite66 .formgen + .cta-banner.center, .page_296 .formgen + .cta-banner.center, .startseite69 .formgen + .cta-banner.center { display: none; } #form-module-thanks { background: #e9f2d5; border: 0px; color: #fff; margin: 0; border-radius: 20px; padding: 20px; } .forminfo { background: #ffabab; border: 0px; color: #fff; margin: 0; border-radius: 20px; padding: 20px; } span.ec-contact-button.phone-number a { width: 100%; height: 100%; } .formgen { position: relative !important; } .forminfo:not(.has-error) { display: none; } .forminfo.has-error { position: absolute !important; top: 0; left: 0; right: 0; z-index: 20; } .forminfo.has-error ~ form { padding-top: 50px; } .page_403 .formgen + script + .cta-banner.center, .page_403 #form-module-thanks + .cta-banner, .page_480 .formgen + script + .cta-banner.center, .page_480 #form-module-thanks + .cta-banner { display: none; } .formgen + script + .cta-banner.center, div#form-module-thanks + script + script + .cta-banner.center{ margin: 30px auto 0; } .formgen + script + .cta-banner.center a.button, div#form-module-thanks + script + script + .cta-banner.center a.button{ padding: 15px 35px 16px 55px; } /*=========================================================================== Sidenav ============================================================== ===========================================================================*/ .fixed.sidenav { position: fixed; right: 30px; top: calc(50%/1.25); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 10px; z-index: 4; } #main .fixed.sidenav .icon { width: 32px; height: 32px; } #main .fixed.sidenav a:first-child { background: #a8d685; border: 2px solid #a8d685; border-radius: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; } #main .fixed.sidenav a:not(:first-child) { background: #fff; border: 2px solid #fff; border-radius: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; } #main .fixed.sidenav a:hover { background: #232522; border: 2px solid #232522; fill: #fff; } #main .fixed.sidenav a:hover svg, #main .fixed.sidenav a:focus svg { fill: #fff; } .startseite .content-main + .content-sidebar { display: none; } /*=========================================================================== Kundenzitate ============================================================== ===========================================================================*/ .ym-wrapper.closer #closer-content > .quote-slider-container.green { max-width: unset; background: #F9F9F9; } .quote-slider-container.green .background-img { background: url(https://www.sophienklinik-stuttgart.de/files/kundenzitate-bg-green.jpg); background-size: cover; } .quote-slider-container.green .navigation { background: url(/files/quote-green.svg); background-repeat: no-repeat; background-position: 80% 15%; background-size: 380px; } .quote-slider-container.green .slide .slide-content span.star { color: #A8D685; } .quote-slider-container.green .slide { display: -webkit-box; display: -ms-flexbox; display: flex; } .quote-slider-container.green .slide .slide-content { width: calc(100% - 10px); border-radius: 12px; } .quote-slider-container.green .slide .slide-content p, .quote-slider-container.green .slide .slide-content a.more { font-size: 16px; line-height: normal; } .quote-slider-container.green .slide .slide-content a.more { color: #232522; } .quote-slider-container.green .slide .slide-content a.more:after { -webkit-filter: brightness(0); filter: brightness(0); } .quote-slider-container.green .slide .slide-content .title h3 { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-weight: 400; } .quote-slider-container.green .slide .slide-content .text div { max-height: 120px; min-height: 120px; } .quote-slider-container.green .avatar-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .quote-slider-container.green .slide .slide-content .title { gap: 20px; } .quote-slider-container.bigger.green .slide .slide-content .title img.quote-avatar.small { width: 65px; margin: 0 auto; } .quote-slider-container.bigger.green .slide .slide-content .title img.quote-avatar { margin-bottom: 15px; width: 100px; } .ym-wrapper.closer:has(.quote-slider-container) { margin-bottom: 0; } .quote-slider-container.green .arrow:hover path { fill: #A8D685; } .quote-slider-container .review-content-person.under-content.under-content { text-align: left; margin-top: 20px; } .quote-slider-container .review-content-person.under-content.under-content p { margin-bottom: 2px; line-height: normal; } .quote-slider-container .review-content-person.under-content.under-content p.review-content-name { font-weight: 500; font-size: 15px; margin-bottom: 5px; } .quote-slider-container .review-content-person.under-content.under-content p.review-content-profession { font-style: italic; font-size: 14px; } .ym-wrapper.closer:has(.quote-slider-container) + footer { margin-top: 0px!important; } html .quote-slider-container .slide .slide-content .title img.quote-avatar.bigger { margin-bottom: 15px; width: 100px; height: 100px; -o-object-fit: cover; object-fit: cover; } .quote-slider-container .slide .slide-content .title p { margin-bottom: 10px; font-size: 20px; position: relative; padding-bottom: 12px; text-align: left; margin-top: 8px; } .quote-slider-container .slide .slide-content .title p:after { content: ""; width: 90px; height: 1px; background: #C8CCD9; display: block; position: absolute; bottom: 0; } .quote-slider-container button.pagination-dot { height: 18px; margin: 0px 3px; width: 18px !important; height: 18px !important; background: #ccc !important; border: 0 !important; border-radius: 50%; } .quote-slider-container button.pagination-dot.active { background: #06233f!important; } .quote-slider-container.green .pagination{ margin-bottom: 4px; } /*=========================================================================== Suche styles ============================================================== ===========================================================================*/ nav { height: auto; } /*Search Icon*/ header.header #nav .searchbutton span { padding-top: 0; margin: 0 0 0 20px; } header.header #nav .searchbutton path { -webkit-transition: fill 300ms ease; -o-transition: fill 300ms ease; transition: fill 300ms ease; } header.header #nav .searchbutton:hover path { fill: #A8D685; } header.header #nav .searchbutton:hover { cursor: pointer; } header.header #nav .searchbutton { margin-left: 20px; } /*Close Icon*/ header.header .menusearchform-wrapper .closebutton path { -webkit-transition: fill 300ms ease; -o-transition: fill 300ms ease; transition: fill 300ms ease; fill: #232522; } header.header .menusearchform-wrapper .closebutton:hover path { fill: #A8D685; } header.header .menusearchform-wrapper .closebutton:hover { cursor: pointer; } /*Search Form*/ .menusearchform-wrapper { background: #fff; border-top: 3px solid #e7f2d4; -webkit-box-shadow: 0px 5px 5px rgb(0 0 0 / 5%); box-shadow: 0px 5px 5px rgb(0 0 0 / 5%); } .menusearchform-wrapper .wrap-container { max-width: 1430px; padding: 20px 10px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menusearchform-wrapper .wrap-container form#menu-searchform { width: 100%; border: none; margin-right: 20px; } html .menusearchform-wrapper .wrap-container form#menu-searchform input#search { width: 100%; padding: 0px; border: none; font-weight: 400; font-size: 16px; font-family: 'Poppins', Helvetica, Arial, sans-serif; color: #232522; } html .menusearchform-wrapper .wrap-container form#menu-searchform input#search:placeholder { font-weight: 400; color: #232522; opacity: 0.8; } html .menusearchform-wrapper .wrap-container form#menu-searchform input#search:focus-visible { outline: none; } .isScroll .sticky .menusearchform-wrapper .wrap-container form#menu-searchform { width: calc(100% - 270px); margin-left: auto; } /*Search results*/ div#main .search-wrapper { max-width: 1430px; padding: 0px 10px; margin: 0 auto; padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } div#main .search-wrapper .searchform_sidebar { position: sticky !important; top: 60px !important; height: auto; overflow: inherit; width: 37% !important; float: right; margin: 0 0 0 -5px; padding: 68px 0 0 0px; } div#main .search-wrapper .searchform_sidebar .searchform { background: #f9f9f9; padding: 30px; margin-bottom: 50px; } div#main .search-wrapper .searchform_sidebar .searchform input.searchform__input { border: none; border-radius: 20px; padding: 5px 20px; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 95%; margin-top: 0; font-size: 16px; margin-bottom: 30px; font-family: 'Poppins', Helvetica, Arial, sans-serif; color: #232522; width: 100%; } div#main .search-wrapper .searchform_sidebar .searchform__heading { font-size: 22px; margin-bottom: 20px; font-weight: 500; } div#main .searchresults { width: 60%; padding-top: 40px; } div#main .searchresults .searchresult__single.single-result { margin-right: 50px; padding-bottom: 30px; padding-top: 30px; border-bottom: 1px solid rgb(221 221 221 / 50%); } div#main .searchresults .searchresult__single.single-result:last-child { border-bottom: none; } div#main .searchresults .single-result__heading { background: url(../img/arrow.svg) 0px 8px no-repeat; background-size: 7px; padding-left: 18px; font-size: 18px; font-weight: 500; margin-bottom: 5px; -webkit-transition: 300ms all; -o-transition: 300ms all; transition: 300ms all; } div#main .searchresults .searchresult__single.single-result:hover .single-result__heading { color: #a8d685; } html .single-result__excerpt strong { color: #232522 !important; } /*=========================================================================== ECONSOR Slidermodul ======================================================== ===========================================================================*/ .splide__arrow:focus-visible { outline: none; } html .splide.col3 .splide-content { margin: 20px; } .splide .splide-content p { -o-text-overflow: ellipsis; text-overflow: ellipsis; width: auto; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 147px; padding-bottom: 0; margin-bottom: 10px; } .splide .splide__pagination { margin-bottom: 0; } html body .splide__list { padding-bottom: 0 !important; } .splide__slide img { margin-bottom: 0; } /*ARROW*/ html body .splide__arrow:after { left: unset; right: unset; } html body .splide__arrow { width: 15px; } /*SLIDER PAGINATION*/ .splide__pagination .splide__pagination__page.is-active { background: #06233f; opacity: 1; } .splide__pagination .splide__pagination__page { height: 18px; margin: 10px 6px; width: 18px; } .splide__pagination__page { background: #c0c8cf; opacity: 1; } /*=========================================================================== Artikel Slidermodul ======================================================== ===========================================================================*/ html body .splide__slide.article-list { margin-bottom: 0!important; } html body .article-list.list-view .article.splide-content { width: 100%; margin: 20px; display: block; } html body .article-list.list-view .article-image img { -o-object-position: 75% 100%; object-position: 75% 100%; } html body .article-list.list-view .article-image img[alt="Hauterneuerung mit mechanischen Peelings"] { -o-object-position: 75% 50%; object-position: 75% 50%; } html body .splide__slide.article-list .button { margin: 0; } html body .splide__slide.article-list .splide-content h4, html body .splide__slide.article-list .splide-content p { padding: 0; margin-top: 0; } html body .splide__slide.article-list .splide-content h4 { } .ec-category-blog-article.article:hover .article-content h4 { overflow: unset; -o-text-overflow: unset; text-overflow: unset; } .splide__slide.article-list .splide-content .button { visibility: hidden; opacity: 0; -webkit-transition: 300ms all; -o-transition: 300ms all; transition: 300ms all; -webkit-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; bottom: 20px; } .splide__slide.article-list.list-view .article-image { margin-bottom: -50px; min-height: unset; } .splide__slide.article-list .splide-content:hover .button { visibility: visible; opacity: 1; } .splide.artikelslider { margin-bottom: 50px; } .splide.artikelslider .splide__arrow {-webkit-transform: translateY(-35px);-ms-transform: translateY(-35px);transform: translateY(-35px);} /*=========================================================================== Infokachel ================================================================= ===========================================================================*/ html .ym-wrapper .infokachel, .ym-wrapper.closer #closer-content .infokachel { margin-bottom: 70px; } .kachel-box-wrap { background: #f3f3f3; border-radius: 20px; overflow: hidden; } .kachel-box-wrap .info_image img{ width: 100%; height: auto; min-height: 130px; -o-object-fit: cover; object-fit: cover; } .kachel-box-wrap .info-text { padding: 30px 30px 40px; width: auto; } .kachel-box-wrap .info-text h3 { margin-bottom: 20px; } .kachel-box-wrap .info-text p { margin-bottom: 5px; } .infokachel .infokachel-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; width: 100%; gap: 50px; } .infokachel.two_col .infokachel-wrapper { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .infokachel.three_col .infokachel-wrapper { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } /*=========================================================================== FULLWIDTH BOX ================================================================ ===========================================================================*/ .box-fullwidth .article-content { max-height: unset; overflow: unset; } .box-fullwidth .article { overflow: unset; } /*=========================================================================== USP kachel ================================================================ ===========================================================================*/ .usp-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 80px; } .usp-single { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20%; padding: 0 20px; min-width: 230px; } .usp-single > * { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .usp-single .usp-text p { color: #3A4148; text-align: center; line-height: normal; } /*=========================================================================== Promokachel ================================================================ ===========================================================================*/ html .promokachel { margin-top: 30px; margin-bottom: 80px; display: inline-block; width: 100%; } html .promokachel .promo-box-wrap { position: relative; } html .promokachel .promo_image { width: 80%; z-index: 0; } html .promokachel .promo-text { position: absolute; background: #f9f9f9; top: 0; bottom: 0; right: 0; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto; padding: 20px; max-width: 600px; width: 40%; padding-inline: 55px; padding-block: 30px; } html .promokachel .promo_image, html .promokachel .promo-text { overflow: hidden; z-index: 1; } html .promokachel .promo_image img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; max-height: 550px; } html .content-wbox .promokachel p { margin-bottom: 0; } html .promo-box-wrap.reverse .promo-text { right: unset; left: 0; z-index: 2; margin-left: 0; } html .promo-box-wrap.reverse .promo_image { margin-left: auto; } html .promo-box-wrap.reverse .promo_image img { -webkit-transform: scalex(-1); -ms-transform: scalex(-1); transform: scalex(-1); } html .promo-text h3 { margin-bottom: unset; } html .promo-text .textile { padding-block: 25px; } html .promo-text .textile ul.checkmark-marker { margin: unset; } html .promo-text .textile ul.checkmark-marker ul { margin: 0; } html .promo-text ul.checkmark-marker li{ list-style: none; margin-left: 0; padding: unset; } html .promo-text ul.checkmark-marker li::before { content: url('data:image/svg+xml,'); display: inline-block; vertical-align: middle; padding-right: 15px; } html .promokachel-wrapper .promo-box-wrap .promo-text h3 { color: #000; font-style: normal; font-weight: 400; line-height: 1.25em; } /*=========================================================================== Kundenzitate =============================================================== ===========================================================================*/ .quote-slider-container.green .background-img { background: unset; background-size: cover; } /*=========================================================================== GRID WRAPPER ============================================================== ===========================================================================*/ .custom-two-grid { display: -ms-grid; display: grid; gap: var(--grid-gap, 50px); } .custom-two-grid .cta-banner{ display: none; } /* Standard-Aufteilung */ .custom-two-grid.is-50-50 { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } /* Weitere Varianten */ .custom-two-grid.is-33-67 { -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; } .custom-two-grid.is-40-60 { -ms-grid-columns: 2fr 3fr; grid-template-columns: 2fr 3fr; } .custom-two-grid.is-67-33 { -ms-grid-columns: 2fr 1fr; grid-template-columns: 2fr 1fr; } .custom-two-grid.is-60-40 { -ms-grid-columns: 3fr 2fr; grid-template-columns: 3fr 2fr; } /*=========================================================================== Kontaktformular & AP ======================================================= ===========================================================================*/ .custom-two-grid .formgen { margin-bottom: 0; } .ym-gbox-left .infokachel.ym-clearfix.contact_section { margin-bottom: 20px; } .doctor-ap .list-view { margin: 40px 0; display: block; } .doctor-ap .doc-box.ap-modul .article-image img { min-width: unset; min-height: unset; max-width: unset; border-radius: unset; } .doc-box.ap-modul { background: #ffffff; } .doc-box.ap-modul .article-image { padding: 0; height: 100%; width: 35%; margin-right: 0; background: #dfdfdf; } .doc-box.ap-modul .doc-content { padding-right: unset; padding: 30px; width: 65%; } .doctor-ap .jameda-bewertung { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 0; } .doctor-ap .jameda-bewertung .stars { font-size: 20px; letter-spacing: -1px; } .doctor-ap .jameda-bewertung .rating-count { font-size: 14px; padding-left: 10px; line-height: 2rem; } .doctor-ap .doc-box.ap-modul h4 { margin-bottom: 0.5rem; } .doctor-ap .info-text p.job-beschreibung { font-size: 16px; } .doctor-ap .info-text .contact-data p, .doctor-ap .info-text .contact-data div, .doctor-ap .info-text .contact-data a { text-decoration: underline; font-weight: 400; } .doctor-ap .info-text .contact-data p:hover, .doctor-ap .info-text .contact-data div:hover, .doctor-ap .info-text .contact-data a:hover { opacity: 0.8; } .doctor-ap .info-text .contact-data .email::before { content: ""; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); display: inline-block; padding-right: 5px; -webkit-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); transform: translate(0px, 5px); } .doctor-ap .info-text .contact-data .telefon::before { content: ""; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); display: inline-block; padding-right: 5px; -webkit-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); transform: translate(0px, 5px); } .ym-gbox-left .doc-box.ap-modul .article-image { max-width: 200px; } /*AP Unterseiten*/ .ym-gbox-left .doctor-ap h2 { margin-bottom: 1rem; } .ym-gbox-left .infokachel.ym-clearfix.contact_section + .contact_section .doctor-ap .list-view { margin-top: 0px; } .ym-gbox-left .infokachel.ym-clearfix.contact_section { margin-bottom: 0; } .ym-gbox-left .infokachel.ym-clearfix.contact_section + #kontakt-aufnehmen { margin-top: 20px; } .ym-gbox-left .doctor-ap .doc-box.ap-modul .article-image img { max-height: 230px; margin-bottom: 0; } .ym-gbox-left .doc-box.ap-modul .article-image { display: flex; flex-direction: column-reverse; overflow: hidden; } .doctor-ap .jameda-bewertung { padding: 0px 0 10px; } .ym-gbox-left .infokachel.ym-clearfix.contact_section + hr { margin: 10px; } /*=========================================================================== Kontaktbox========= =========================================================== ===========================================================================*/ html body .article-content-wrapper:not(.col1) .article-image img { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; max-height: 180px; min-height: unset !important; -o-object-fit: contain; object-fit: contain; background: #e0e0e0; } .ym-gbox-left .list-view .col5 .doc-box .contact-data { display: none; } .content-sidebar .side-contact .article-content-wrapper .doc-box .contact-data { display: -webkit-box;display: -ms-flexbox;display: flex; } /*=========================================================================== Footer========= =========================================================== ===========================================================================*/ html footer { background: #f9f9f9; margin-top: 0px; border-top: 1px solid; } /*Fixed Teaser */ .teaser-close-btn button.close { color: #232522; } /*========================================================================== ================================ RESPONSIVE ================== ================================ =============================================================================*/ @media screen and (min-width: 1801px) { /*Kundenzitate*/ .quote-slider-container.green .slide .slide-content .text { margin-top: -70px; } } @media screen and (min-width: 1481px) { /*Allgemein*/ .link-container { min-width: 130px; } } @media screen and (min-width: 1480px) { /*Allgemein*/ ul.main-nav-lvl-0 > li > a { padding-right: 15px; } } @media screen and (min-width: 1311px) { /*Allgemein*/ ul.main-nav-lvl-0 > li > a { padding-right: 12px; } html ul.main-nav-lvl-0 li.nav_sublayer.lvl-0-list.ym-gl > a { -webkit-transition: padding 0ms; -o-transition: padding 0ms; transition: padding 0ms; } } @media screen and (min-width: 1281px) { /*Allgemein*/ .fixed-teaser-container .headline.smaller { font-size: 1.25rem; } } @media screen and (max-width: 1375px) and (min-width: 1311px) { /*Allgemein*/ #logo a, .header.sticky #logo a { width: 160px; } .header.sticky #logo { margin-right: 0px; } .header.sticky ul.main-nav-lvl-0 > li > a, html .header.sticky ul.main-nav-lvl-0 > li.nav_sublayer.lvl-0-list.ym-gl > a { padding-right: 5px; } } @media screen and (max-width: 1310px) and (min-width: 1024px) { /*Allgemein*/ .menu-icons.hide-desktop { right: 90px; } } @media screen and (min-width: 990px) { /*ECONSOR Slidermodul*/ .splide:not(.artikelslider) .splide__arrows.splide__arrows--ltr { position: absolute; width: 100%; bottom: 18px; max-width: 900px; margin: 0 auto; left: 5px; right: 0; padding: 0; } .splide:not(.artikelslider) button.splide__arrow.splide__arrow--next:after { left: 0; } .splide:not(.artikelslider) button.splide__arrow.splide__arrow--prev:after { left: unset; right: 0; } /*Artikel Slidermodul*/ html body .splide.artikelslider .article-content { max-height: 70px; padding-top: 10px; padding-right: 50px; } html body .splide.artikelslider .article-list.list-view .article.splide-content:hover .article-content{ padding-top: 20px; } html body .splide.artikelslider .ec-category-blog-article.article .article-content h4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } html body .splide__slide.article-list .splide-content h4 { min-height: 46px; } html body .splide.artikelslider .ec-category-blog-article.article:hover .article-content h4 { min-height: unset; } html body .splide.artikelslider .ec-category-blog-article.article .article-content h4:after { right: -30px; top: 10px; } } @media screen and (min-width: 769px) { .article-list.box-view .ec-category-blog-article .article-content h4 { max-height: 50px; } .article-list.box-view .ec-category-blog-article:hover .article-content h4 { max-height: unset; } .article-list.box-view .ec-category-blog-article .article-content h4 a { min-height: 46px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 611px) { /*Startseite Intro neue Struktur*/ html .startseite .channel_bg .home-intro { width: 35%; } html .startseite .channel_bg .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; padding: 100px 0; } /*Doctor labels*/ html .doc-labels { position: relative; width: 65%; gap:0; z-index: 3; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } html .doc-labels a.dname { width: calc(100% / 5); -webkit-transform: unset; -ms-transform: unset; transform: unset; position: relative; min-width: 150px; max-width: 200px; } html .doc-labels .link-container { min-width: 130px; position: absolute; bottom: 0; width: 80%; left: 0; right: 0; margin: 0 auto; font-size: 15px; padding: 10px 6px; border-radius:10px; } } @media screen and (max-width: 1920px) and (min-width: 1481px) { /*Startseite Intro neue Struktur*/ html .startseite .channel_bg .container { max-width: 1430px; } } @media screen and (max-width: 1610px) { /*Doctor labels*/ html .doc-labels { width: calc(65% - 70px); margin-right: 70px; z-index: 1; } } @media screen and (max-width: 1480px) { /*PADDING TOP & BOTTOM*/ html body .alternate-content, div.custom-two-grid, html .ym-wrapper.closer #closer-content .logo-grid, .ym-wrapper.closer #closer-content .alternate-content, .ym-wrapper.closer #closer-content div.custom-two-grid { padding-top: 100px; padding-bottom: 100px; } /*Allgemein*/ ul.main-nav-lvl-0 > li > a { padding-right: 15px; } /*Search mobile*/ .menusearchform-wrapper .wrap-container { padding: 20px 3%; } /*Startseite Intro neue Struktur*/ html .startseite .channel_bg .container { max-width: 1430px; padding: 70px 3% 30px 3%; } html .startseite .channel_bg .container h1 { font-size: 30px; } html .home-intro span.slide-logos.first .icon { font-size: 20px; } html .doc-labels { margin: 20px 0 0; } /*Kundenzitate*/ .ym-wrapper.closer #closer-content > .quote-slider-container.green { padding: 0px; width: 100%; } .quote-slider-container .slide .slide-content p { font-size: 16px; } .quote-slider-container.bigger.green .slide .slide-content .title img.quote-avatar { margin-bottom: 10px; max-width: 70px; } .quote-slider-container.bigger.green .slide .slide-content .title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .quote-slider-container.bigger.green .slide .slide-content .title img.quote-avatar { margin-bottom: 10px; max-width: 70px; max-height: 70px; } /*Artikel Slidermodul*/ .splide.artikelslider .splide__arrow--next { right: 0px !important; } .splide.artikelslider .splide__arrow--prev { left: 0px !important; } .artikelslider .splide__track { margin: 0 30px; padding: 0px!important; } /*Kontakt-Box*/ html .side-contact .article-content-wrapper:not(.col1) .article-image img.mobile { min-height: unset; } } @media screen and (max-width: 1375px) { /*Search mobile*/ .isScroll .sticky .menusearchform-wrapper .wrap-container form#menu-searchform { width: calc(100% - 230px); } } @media screen and (max-width: 1480px) and (min-width: 1025px){ /*Kontaktformular & AP */ .doctor-ap .article-content-wrapper.col1 .doc-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .doctor-ap .doc-box .article-image { width: 100%; height: 100%; } .doctor-ap .doc-box .article-image img { -o-object-fit: contain; object-fit: contain; } .doctor-ap .doc-box .doc-content { width: calc(100% - 60px); } .ym-gbox-left .doc-box.ap-modul .article-image { max-width: unset; } } @media screen and (max-width: 1480px) and (min-width: 992px) { /*Kundenzitate*/ .quote-slider-container.green .slides-container, .quote-slider-container.green .slide .slide-content { width: 85%; } .quote-slider-container.bigger.green .slide-content .text > div { padding-right: 0; } .quote-slider-container.bigger.green .slide .slide-content .text { margin-top: 0; } } @media screen and (max-width: 1310px) { /*Navigation*/ .header .menu-icon { height: 100%; } .header .menu-icon a { top: 0; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-icon span{ top: 46%; } .menu-icons.hide-desktop { z-index: 0; } html ul.main-nav-lvl-0 li.nav_sublayer:hover ul.subnav { opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border: none; } /*Search mobile*/ div#topnav .searchbutton { display: none; } .search-mobile { right: 50px; position: relative; } /*Menu Icons*/ .menu-icons.hide-desktop { right: 45px; z-index: 999; } #language-switch a.flag-en, #language-switch a.flag-de { margin-right: 25px; } /*Startseite Intro neue Struktur*/ html .startseite .channel_bg .container { display: block; } html .startseite .channel_bg .home-intro { width: 100%; } html .home-intro span.slide-logos img { margin-top: 8px; } html .startseite .channel_bg .container { padding: 30px 3% 30px 3%; } /*Doctor labels*/ html .doc-labels { width: calc(100% - 70px); margin: unset; } html .doc-labels { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } html .doc-labels .link-container { min-height: 38px; } html .doc-labels a.dname { max-width: unset; } html img.doc-img { height: 100%; } /*Infokachel*/ .kachel-box-wrap .info-text { padding: 20px 35px; width: auto; } .infokachel.two_col .infokachel-wrapper, .infokachel.three_col .infokachel-wrapper { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } /*econsor slider*/ .splide.col3 .splide-content .button { margin-left: 30px; margin-bottom: 10px; margin-top: 0; } } @media screen and (max-width: 1280px) { /*Artikel Slidermodul*/ .splide__slide.article-list { width: calc(100% / 2) !important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; } /*Promokachel*/ html .promokachel .promo-box-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html .promokachel .promo-box-wrap.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } html .promokachel .promo_image { width: 100%; } html .promokachel .promo-text, html .promo-box-wrap.reverse .promo-text { position: relative; max-width: 80%; width: 80%; margin: 0 auto; margin-top: -5em; padding-inline: 20px; } html .promokachel-wrapper .promo-box-wrap.reverse .promo_image img { -webkit-transform: none; -ms-transform: none; transform: none; } html .promo-text .textile { padding-block: 15px; } /*Reasons Why*/ html .reason-why .green-bg ul { max-width: 100%; } /*Related Post*/ html .related-blogposts.article-list.box-view .article { width: 100%; margin-right: 0px!important; } html .ym-wrapper.closer #closer-content .related-blogposts.box-view { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 40px 1fr; grid-template-columns: 1fr 1fr; gap: 40px; grid-row-gap: 0; } html .ym-wrapper.closer #closer-content .related-blogposts.box-view:before { display: none; } html .related-blogposts.box-view .ec-blog-article .article-content { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; padding-bottom: 80px; } html .article-list.related-blogposts.box-view .article-content .button { bottom: 0; } } @media screen and (max-width: 1024px) { /*Search mobile*/ div#main .search-wrapper .searchform_sidebar { position: relative; top: 50px; height: auto; overflow: inherit; width: 100%!important; float: unset; padding: 0; margin-bottom: 50px; margin-top: 50px; } .searchform__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } div#main .search-wrapper .searchform_sidebar .searchform { margin-bottom: 0; } div#main .search-wrapper .searchform_sidebar .side-contact { margin-top: 50px; } div#main .searchresults { width: 100%; padding-top: 40px; height: auto; } div#main .search-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } div#main .searchresults .searchresult__single.single-result { margin-right: 0; } /*Kontaktformular & AP */ /* Standard-Aufteilung */ .custom-two-grid.is-50-50 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } /* Weitere Varianten */ .custom-two-grid.is-33-67 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .custom-two-grid.is-40-60 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .custom-two-grid.is-67-33 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .custom-two-grid.is-60-40 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .custom-two-grid .list-view { margin-bottom: 0; } .custom-two-grid #form-module-thanks { height: -webkit-fit-content;height: -moz-fit-content;height: fit-content; } /*AP Box new*/ html .ym-wrapper.closer #closer-content .infokachel.contact_section{ margin-bottom: 0; } /*DOC BOX*/ .content-sidebar .article-content-wrapper:not(.col1) .article-image, .content-sidebar .article-content-wrapper:not(.col1) .article-image img, html .article-content-wrapper:not(.col1) .article-image img { max-height: unset; } .side-contact { width: 100%; margin-top: 20px; } /*Buttons*/ html .cta-banner.center a.button.appointment, html .cta-buttons a.button.appointment, html .doc-box .cta-banner.center a.button.appointment, html .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment { background-position: 15px center!important; } } @media screen and (max-width: 992px) { /*Kundenzitate*/ .quote-slider-container.green .navigation { background-position: 95% 25%; background-size: 140px; width: auto; } } @media screen and (max-width: 989px) and (min-width: 611px) { /*Doctor labels*/ html .doc-labels { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } } @media screen and (max-width: 989px) { /*Buttons*/ html .cta-buttons .cta-inner .trenner + a.button.appointment { margin: 0 auto; } /*Artikel Slidermodul*/ .splide__slide.article-list { width: 95% !important; display: block!important; margin: 20px!important; } html body .article-list.list-view .article.splide-content { margin: 20px 0; } html body .splide__slide.article-list .splide-content { margin-bottom: 20px; } html body .article-list.list-view .article-image img { -o-object-position: 50% 50%; object-position: 50% 50%; } /*econsor slider*/ .splide.col3 .splide__arrow { top: 52%; } /*Related Post*/ html .ym-wrapper.closer #closer-content .related-blogposts.box-view { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } html .article-list.related-blogposts.box-view .article-content .button { position: relative; float: none; display: block; margin: 0; } html .related-blogposts.box-view .ec-blog-article .article-content { padding-bottom: 0; } } @media screen and (max-width: 768px) { /*Doctor labels*/ html .doc-labels { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; } /*Sidenav*/ .fixed.sidenav { position: fixed; right: initial; bottom: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; background: #fff; top: initial; -webkit-box-shadow: 0px 0px 13px 3px #00000012; box-shadow: 0px 0px 13px 3px #00000012; gap: 0; z-index: 700; display: none; } #main .fixed.sidenav a:first-child, #main .fixed.sidenav a { border-radius: 0px !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-left: 1px solid #a8d685 !important; border-right: 1px solid #a8d685 !important; margin-left: -1px; } .fixed-teaser-container { bottom: 0; } /*Artikel Slider*/ html body .splide__slide.article-list .splide-content h4 { padding-right: 45px; margin-bottom: 20px; } html body .splide__slide.article-list .splide-content h4 a { height: 26px; overflow: hidden; } } @media screen and (max-width: 767px) { /*Infokachel*/ .infokachel.two_col .infokachel-wrapper, .infokachel.three_col .infokachel-wrapper { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .kachel-box-wrap .info-text, .reason-why .ym-g50 { padding: 30px 22px 30px; width: calc(100% - 45px); } /*Artikel Slider*/ .splide__slide.article-list, .splide__slide { width: 92%!important; display: block !important; margin: 20px !important; padding: 0; } .artikelslider .splide__track, .splide__track { margin: 0 20px; padding: 0; } html .splide.col3 .splide-content { margin: 8px; } /*Artikelliste*/ .box-view .ec-category-blog-article:hover .button { display: block; } /*Promobox*/ html .promokachel .promo-text, html .promo-box-wrap.reverse .promo-text { max-width: 75%; width: 75%; } html .content-wbox .promokachel p { margin-bottom: 10px; } /*Abstände*/ html body .splide__slide.article-list { margin-top: 0px!important; } html body .usp-wrapper, html body .promokachel { margin-top: 20px; } .ym-wrapper.closer:has(.quote-slider-container) { margin-top: 40px; } html body .ym-wrapper.closer #closer-content .reason-why { margin-bottom: 0; } html body .splide.artikelslider, html body .usp-wrapper, html body .promokachel { margin-bottom: 40px; } html body .alternate-content, div.custom-two-grid, html .ym-wrapper.closer #closer-content .logo-grid, .ym-wrapper.closer #closer-content .alternate-content, .ym-wrapper.closer #closer-content div.custom-two-grid, html body .ym-wrapper.closer #closer-content > .quote-slider-container.green { padding-top: 50px; padding-bottom: 50px; } .reason-why h2 + p { padding-bottom: 20px; } } @media screen and (max-width: 610px) { /*TYPOGRAPHY RESPONSIVE*/ h1 br, h2 br { display: none; } /*STARTSEITE HEADLINES BIG*/ .startseite h1, .startseite h2, html .startseite .channel_bg .container h1 { font-size: 26px; } /*HEADLINES default*/ h1 { font-size: 28px; margin-bottom: 1rem; } /*HEADLINE H2 default oder H3 BIG*/ html .textile h2, h2, html .quote-slider-container.green .navigation h2.title { font-size: 24px; line-height: normal; margin-bottom: 1.5rem; } /*HEADLINE H3 default*/ html .textile h3, h3, html .kachel-box-wrap .info-text h3, html .promokachel-wrapper .promo-box-wrap .promo-text h3 { font-size: 20px; line-height: normal; } /*HEADLINE H4*/ html .splide .splide-content h4, html .doctor-ap .doctor-ap .doc-box h4, html .doc-box h4, html .article-content-wrapper:not(.col1) h4, html .reason-why .content-box h4, html h4, html .h4-style, html body .splide__slide.article-list .splide-content h4, blockquote p { font-size: 18px; } /*Text BIG*/ html .quote-slider-container.green .slide .slide-content span.star, html .quote-slider-container.green .navigation .text, html .content-wbox .promokachel p, html .promo-text ul.checkmark-marker li, html .doctor-ap .info-text p, html .doctor-ap .info-text .contact-data p, html .doctor-ap .info-text .contact-data div, html .doctor-ap .info-text .contact-data a, html .usp-single .usp-text p, html .reason-why h2 + p, .article-content-wrapper:not(.col1) p { font-size: 16px; } /*Allgemein*/ .menu-button { display: none; } .startseite .channel_bg .doc-labels img.doc-img { width: 100%; } blockquote p { padding: 60px 20px 20px; } blockquote::before { top: 10px; left: 20px; width: 50px; height: 50px; } /*Navigation*/ html ul.main-nav-lvl-0 li.nav_sublayer input { width: 110px!important; } /*Header*/ header, nav, header .ym-wrapper, header .ym-wbox { height: 130px; } .header.sticky, .header.sticky .ym-wbox .ym-grid, .header.sticky .ym-wrapper, .header.sticky .ym-wbox { height: 55px; } .header.sticky .menu-icon { top: -1px; } .menu-icons #language-switch a { margin-left: 0; } /*Search mobile*/ .search-mobile { margin-right: 20px; right: 0; } .header.sticky .menu-icons.hide-desktop { right: 45px; } .menu-icons .search-mobile .searchbutton { -webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 15%); box-shadow: 3px 3px 10px rgb(0 0 0 / 15%); width: 45px; height: 45px; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 10px; background-color: #fff; } .menu-icons .search-mobile .searchbutton svg { width: 17px; height: 17px; } .header.sticky .menu-icons .search-mobile .searchbutton { width: 35px; height: 35px; } .header.sticky .menu-icons .search-mobile .searchbutton svg { width: 15px; height: 15px; } /*Doctor labels*/ html .doc-labels { background: unset; padding: 0; } html .channel_bg .famous-add span { padding: 0 5px; } .startseite .channel_bg .famous-add img { width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; } .startseite .channel_bg .doc-labels img.doc-img { -o-object-fit: cover; object-fit: cover; } html .startseite .channel_bg .home-intro { text-align: left; } html .startseite .channel_bg .famous-add { padding-top: 0; padding-bottom: 30px; } html .link-container { font-size: 13px; } html .doc-labels a.dname.shf, html .doc-labels a.dname.gf { width: calc(50% - 8px); } html .doc-labels a.dname.shf img, html .doc-labels a.dname.gf img { max-width: 65%; margin: 0 auto; } /*USP kachel*/ .usp-single { padding: 0 10px; min-width: 150px; } .usp-wrapper { margin-bottom: 30px; } /*Promo Text*/ html .promo-text .textile ul.checkmark-marker { padding-right: 0; } /*AP Box new*/ .doctor-ap .doc-box .doc-content { padding: 20px; width: calc(100% - 40px); } .doctor-ap .doc-box .article-image { width: 100%; } .ym-gbox-left .doc-box.ap-modul .article-image { max-width: unset; } .doctor-ap .doc-box h4 { min-height: unset; } .doctor-ap .doc-box, .doctor-ap .jameda-bewertung { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .doctor-ap .doc-box .article-image img { -o-object-fit: contain; object-fit: contain; max-height: 200px; } .doctor-ap .jameda-bewertung .rating-count { padding-left: 0; } /*Promobox*/ html .promo-text ul.checkmark-marker li { display: -webkit-box; display: -ms-flexbox; display: flex; } html .promokachel .promo_image img { min-height: 300px; object-position: 0% 100%; } /*Artikelslider*/ html body .splide__slide.article-list .splide-content .article-content { padding-top: 10px; } html body .splide__slide.article-list .splide-content h4:after { top: 14px; } .ec-category-blog-article.article:hover .article-content h4 { height: unset; min-height: unset; margin-bottom: 1rem; } html body .ec-category-blog-article.article:hover .article-content { padding-top: 25px; } .splide__slide.article-list .splide-content:hover .button, .splide__slide.article-list .splide-content .button { right: 20px; } button.splide__arrow.splide__arrow--prev { -webkit-transform: translate(-10px, 0px); -ms-transform: translate(-10px, 0px); transform: translate(-10px, 0px); } button.splide__arrow.splide__arrow--next { -webkit-transform: translate(10px, 0px); -ms-transform: translate(10px, 0px); transform: translate(10px, 0px); } .splide .splide-content h4, .splide .splide-content p { padding: 0 20px 10px; } .splide__slide img { max-height: 200px; } /*Artikelliste*/ .article-list.list-view .article img, .page_1 .article-image img { max-height: 320px; } .article-list.box-view .ec-category-blog-article .article-content h4 { display: -webkit-box;display: -ms-flexbox;display: flex; } /*Related Post*/ html .related-blogposts.article-list.box-view .article img { max-height: 200px; min-height: unset; } /*Ablauf*/ .textile.cookieconsent-optout-marketing { -ms-flex-preferred-size: calc(100% - 70px); flex-basis: calc(100% - 70px); } .textile.cookieconsent-optout-marketing p { margin-left: 0; } /*Footer*/ html footer { padding-bottom: 100px; } } @media screen and (max-width: 550px) { /*Allgemein*/ #logo a, .header.sticky #logo a { width: 140px; } /*Header*/ header, nav, header .ym-wrapper, header .ym-wbox { height: 80px; } .header.sticky .menu-icon { top: unset; } /*Search mobile*/ .isScroll .sticky .menusearchform-wrapper .wrap-container form#menu-searchform { width: calc(100% - 180px); } html .menusearchform-wrapper .wrap-container form#menu-searchform input#search { font-size: 14px; } .menusearchform-wrapper .wrap-container { padding: 20px 20px; } /*Doctor labels*/ html .startseite.mobile .channel_bg .famous-add img { min-height: unset; max-height: unset; } } @media screen and (max-width: 480px) { html body .splide__slide.article-list .splide-content h4 { font-size: 16px; } .channel_bg.no_desc img, html body:not(.page_1) .channel_bg img.intro { margin-left: unset; min-height: unset; max-height: unset; width: 100vw; } html .startseite .channel_bg .famous-add img { max-width: 220px; } /*Buttons*/ .button, .formgen .formsubmit.button, .formgen input.button, .cta-banner.center a.button.appointment, .cta-buttons a.button.appointment, .doc-box .cta-banner.center a.button.appointment, .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment, .textile.flex-counting .button, .textile .button, a.button.accent.appointment.green, html body .cta-banner.center a.button.appointment, html body .cta-buttons a.button.appointment, html body .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper:not(.col1) .doc-box .cta-banner.center a.button.appointment, html body .article-content-wrapper.col1 .doc-box .cta-banner.center a.button.appointment, html body .doc-box.cta-box .cta-banner.center a.button.appointment, html .promo-text .button, .cta-buttons a.button.mail, html .stellenanzeige .button, html body .menopause-check .button.secondary { font-size: 16px; } /*Search mobile*/ a.phone-ic, .header.sticky a.phone-ic, a.mail-ic, .header.sticky a.mail-ic, .menu-icons .search-mobile .searchbutton, .header.sticky .menu-icons .search-mobile .searchbutton { width: 30px; height: 30px; } .menu-icons .search-mobile .searchbutton svg, .header.sticky .menu-icons .search-mobile .searchbutton svg { width: 14px; height: 14px; } a.mail-ic, .header.sticky a.mail-ic { background: url(../img/mail.svg) 7px 9px #fff no-repeat; background-size: 16px; } a.phone-ic, .header.sticky a.phone-ic { background: url(../img/phone.svg) 7px 9px #fff no-repeat; background-size: 14px; } #language-switch a.flag-en, #language-switch a.flag-de { margin-right: 18px; margin-left: 0px; } .search-mobile { margin-right: 15px; } /*Artikel Slidermodul & econsor Slidermodul*/ .splide.col3 .splide__slide { padding: 0 15px; height: -webkit-fit-content!important; height: -moz-fit-content!important; height: fit-content!important; } .splide.col3 .splide__arrow { top: calc(50% - 15px); } .splide.artikelslider .splide__arrow { top: calc(50% + 15px); } .splide.artikelslider .splide__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; } html body .article-list.list-view .article-image img { max-height: 200px; } html body .article-list.list-view .article-image img[alt="Ihre Spezialisten"] { max-height: 200px; -o-object-fit: contain; object-fit: contain; background: #dfdfdf; -o-object-position: 0% 73%; object-position: 0% 73%; } /*Kontaktbox*/ .content-sidebar .side-contact .doc-box .cta-banner.center { margin-right: 0; } } @media screen and (max-width: 350px) { .usp-single { width: 100%; } } /*========================================================================== ================================ IOS FIXES ================== ================================ =============================================================================*/ /*========================================================================== ================================ UPDATE Module 2026 ========== ================================ =============================================================================*/ /*========================================================================= Intro 2026 ================================================================ ===========================================================================*/ .startseite .intro-wrapper .video-link a:after { content: ''; background: url(../img/sophienklinik-arrow-right.svg) 0px 0px no-repeat transparent; height: 13px; width: 13px; background-size: 14px; position: relative; -webkit-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; right: 0; border-radius: 100%; -webkit-transform: rotate(0.75turn); -ms-transform: rotate(0.75turn); transform: rotate(0.75turn); display: inline-block; margin-left: 6px; top: 1px; color: #3A4148; } .startseite .intro-wrapper .video-link a:hover:after { color: #000; transform: rotate(0.75turn) translate(0px, 6px); } .startseite .intro-wrapper .video-link { font-weight: 400; font-size: 18px; } @media screen and (max-width: 610px) { .startseite .intro-wrapper .video-link { font-size: 16px; } } /*=========================================================================== Reason Why 2026 ================================================================ ===========================================================================*/ .reason-why .ym-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .reason-why .ym-grid .ym-g50.ym-gl { width: calc(50% - 85px); } @media screen and (max-width: 1024px) and (min-width:768px) { .reason-why .ym-grid .ym-g50.ym-gl { margin-bottom: 0; } } @media screen and (max-width:767px) { .reason-why .ym-grid .ym-g50.ym-gl { padding: 30px 22px 30px; width: calc(100% - 45px); } .reason-why .ym-grid { gap:0px; } .reason-why .container-box { padding: 50px 0 50px; } } @media screen and (max-width: 350px) { .startseite .intro-wrapper .video-link a { max-width: 280px; } } /*=========================================================================== USP kachel 2026 ============================================================= ===========================================================================*/ .usp-wrapper.usp-wrapper-5 { gap: 20px; } @media screen and (min-width: 611px) { .usp-wrapper.usp-wrapper-5 .usp-single { width: 15%; padding: 0 10px; min-width: 210px; } } @media screen and (max-width: 1375px) { .usp-wrapper.usp-wrapper-5 { -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; max-width: 900px; margin-left: auto; margin-right: auto; } } /*=========================================================================== Navigation 2026 ============================================================= ===========================================================================*/ .ec-sub-sub-container { overflow: visible !important; } .ec-subsubnav-item.has-subcats { position: relative; } .ec-subsubnav-item.has-subcats > ul.ec-sub-sub-container-list { display: none; position: absolute; left: 100%; top: 0; background: #fff; min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 8px 0; z-index: 999; list-style: none; } @media screen and (min-width:1311px) { .ec-subsubnav-item.has-subcats:hover > ul.ec-sub-sub-container-list { display: block; } .ec-subsubnav-item.has-subcats > ul.ec-sub-sub-container-list { background: #fff; } .ec-subnav-item:hover .ec-subnav-link .ec-subnav-item .ec-subnav-link { background-color:transparent; } .ec-subnav-item:hover .ec-subsubnav-item a.ec-subnav-link.has-subcats { background-color: transparent !important; } .ec-subnav-item .ec-subsubnav-item:hover a.ec-subnav-link.has-subcats { background-color: #a8d685 !important; } .ec-subnav-item:hover .ec-subnav-link .ec-subnav-item .ec-subnav-link { background-color:transparent; } .ec-subnav-item:hover .ec-subsubnav-item a.ec-subnav-link.has-subcats { background-color: transparent !important; } .ec-subnav-item .ec-subsubnav-item:hover a.ec-subnav-link.has-subcats { background-color: #a8d685 !important; } .ec-subsubnav-item.has-subcats > ul.ec-sub-sub-container-list { box-shadow: none; background: transparent; } ul.ec-sub-sub-container-list .ec-subsubnav-item-link { padding: 14px 38px 14px 24px; } .ec-subnav-item .ec-sub-sub-container { max-width: 30%; width: 30%; left: calc(35% + 60px); } ul.ec-sub-sub-container-list .ec-subsubnav-item-link { width: 100%; } .ec-sub-nav-link-container { max-width: 35% !impotant; } } /*=========================================================================== Hero Ärtze 2026 ============================================================= ===========================================================================*/ body.page_425 #main .ym-wrapper.full-width, body.page_425 #main .ym-wrapper.full-width .channel_bg, body.page_425 #main .ym-wrapper.full-width .channel_bg .container { height: fit-content !important; display: block !important; min-height: 471px; background: transparent; } body.page_425 #main .ym-wrapper.full-width { border-bottom: 1px solid #a8d685; padding: 0 !important; padding-bottom: 40px !important; } .ym-wrapper.full-width { width: 100%; max-width: unset; padding: 0; } body.page_193 #main .ym-wrapper.full-width, body.page_193 #main .ym-wrapper.full-width .channel_bg, body.page_193 #main .ym-wrapper.full-width .channel_bg .container { height: fit-content !important; display: block !important; min-height: 471px; background: transparent; } body.page_193 #main .ym-wrapper.full-width { border-bottom: 1px solid #a8d685; padding: 0 !important; padding-bottom: 40px !important; } .ym-wrapper.full-width { width: 100%; max-width: unset; padding: 0; } body.page_459 #main .ym-wrapper.full-width, body.page_459 #main .ym-wrapper.full-width .channel_bg, body.page_459 #main .ym-wrapper.full-width .channel_bg .container { height: fit-content !important; display: block !important; min-height: 471px; background: transparent; } body.page_459 #main .ym-wrapper.full-width { border-bottom: 1px solid #a8d685; padding: 0 !important; padding-bottom: 40px !important; } .ym-wrapper.full-width { width: 100%; max-width: unset; padding: 0; } /*=========================================================================== accessibility ============================================================= ===========================================================================*/ #logo a:focus-visible, nav a:focus-visible, .sidenav a:focus-visible, a.button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #000; } .sidenav a:focus-visible path{ fill:#000; } .ec-category-blog-article.article:focus-visible .article-content { max-height: 100%; } a:focus-visible img.slider-image { outline: 2px solid #000; outline-offset: -2px; } .ec-mega-menu .lvl-0-list:focus-within .ec-mega-menu-flyout-container { display: block; -webkit-box-shadow: 0 5px 5px rgb(0 0 0 / 5%); box-shadow: 0 5px 5px rgb(0 0 0 / 5%); visibility: visible; opacity: 1; z-index: 1; } .ec-mega-menu, .ec-subnav-item:focus-within .ec-sub-sub-container { display: block; } .kontakt-test:focus-within>ul, .klinik-test:focus-within>ul { visibility: visible; opacity: 1; list-style: none; } .ec-category-blog-article.article:focus-within .article-content, .ec-category-blog-article.article:focus-within .article-content p { max-height: 100%; opacity:1; visibility:visible; } label.sr-only { color:transparent; font-size: 0px; } footer .ym-g25:nth-child(2) a { color: #232522; font-size: 16px; line-height: 22px; margin: 0 0 25px; padding: 0 0 0 23px; list-style: none; background: url(../img/arrow.svg) 0 no-repeat rgba(0, 0, 0, 0); } .quote-slider-container.green .slide .slide-content span.star { color: #51822B; } html body span.trenner { opacity: 1; color: #78757A; } #breadcrumb a.first-crumb, #breadcrumb a { color: #232522; } body:not(.page_1) .intro-text span, body:not(.page_1) .intro-text p { color: #232522; } #breadcrumb a { background: url(../img/arrow.svg) 0 no-repeat rgba(0, 0, 0, 0); } .quote-slider-container.green .arrow path { fill: #000; opacity:0.8; } .quote-slider-container.green .arrow:hover path { opacity:1; fill: #000; } header.header #nav .searchbutton { border: none; background: transparent; } @media screen and (max-width:990px) { .artikelslider .splide__arrows.splide__arrows--ltr, .splider-37659 .splide__arrows.splide__arrows--ltr, .splider-91122 .splide__arrows.splide__arrows--ltr, #splide03 .splide__arrows.splide__arrows--ltr { display: flex; margin-left: 15px; } .artikelslider .splide__arrows.splide__arrows--ltr button.splide__arrow, .splider-37659 .splide__arrows.splide__arrows--ltr button.splide__arrow, .splider-91122 .splide__arrows.splide__arrows--ltr button.splide__arrow, #splide03 .splide__arrows.splide__arrows--ltr button.splide__arrow { position: relative; top: unset; bottom: unset; transform: unset; padding: 20px; } .artikelslider .splide.col3 .splide__slide, .splider-37659 .splide.col3 .splide__slide, .splider-91122 .splide.col3 .splide__slide, #splide03 .splide.col3 .splide__slide { padding-inline: 0px; } #splide03 .splide__arrows.splide__arrows--ltr { gap: 20px; } } .artikelslider .splide__track, .splide__track, .splider-37659 .splide__track, .splide__track, .splider-91122 .splide__track, .splide__track, #splide03 .splide__track, .splide__track { margin-inline: 0px; } button.searchbutton:focus-visible { outline: 2px solid #000; } .menusearchform-wrapper input#search:focus-visible { outline: 2px solid #000 !important; } @media screen and (max-width: 1310px) { .menu-icons.hide-desktop > a { display: none; } .menu-icon { left: 0px; } .menu-icon span { max-width: 25px; } ul.ec-mega-menu.main-nav-lvl-0.list-unstyled { display: none; } .menu-icon button#burger-toggle:focus-visible { outline: 2px solid; } .menu-icon button#burger-toggle { width: 33px; height: 33px; position: relative; border: none; background: transparent; } .header .menu-icon { display: flex; align-items: center; } .lang-1 #topnav .kontakt-test .button { width: fit-content; } } .menu-icons .search-mobile .searchbutton { border: none; } #breadcrumb a:hover { text-decoration: underline; transition: 0.3s ease-in-out; color: #000; } .article-list h3.h4 { margin: 0 0 16px; font-size: 20px; line-height: 27px; font-weight: 500; } .is-40-60.custom-two-grid .formgen { grid-column: 2; } .formgen .forminfo { height: fit-content; position: relative !important; margin-top: auto; } .forminfo.has-error { border-radius: 7px; } .forminfo.has-error ~ form { padding-top: 20px; } /*=========================================================================== accessibility ============================================================= ===========================================================================*/ header.header #nav .searchbutton { border: none; background: transparent; } /* Slider heading */ html body .splide.artikelslider .ec-category-blog-article.article .article-content h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; margin-bottom: 0.75rem; padding-bottom: 0px; line-height: 27px; font-weight: 500; min-height: 46px; } html body .splide.artikelslider .ec-category-blog-article.article .article-content h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; margin-bottom: 0.75rem; padding-bottom: 0px; line-height: 27px; font-weight: 500; min-height: 46px; } .alternate-inner-container .splide .splide-content h3 { font-size: 20px; margin-bottom: 0.75rem; padding: 0px 30px 0px 30px; margin-top: 15px; line-height: 27px; font-weight: 500; } .alternate-inner-container .splide .splide-content h3 strong { font-weight: 500; } @media screen and (max-width:610px) { html body .splide.artikelslider .ec-category-blog-article.article .article-content h3, .alternate-inner-container .splide .splide-content h3 { padding-inline: 20px; } html body .splide.artikelslider .ec-category-blog-article.article .article-content h3 { height: unset; min-height: unset; margin-bottom: 1rem; font-size:16px; padding-inline: 0; } } /* Slider heading Ende */ @media screen and (max-width:1300px) { .menu-icons .search-mobile .searchbutton { -webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 15%); box-shadow: 3px 3px 10px rgb(0 0 0 / 15%); width: 45px; height: 45px; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 10px; background-color: #fff; transform: translateX(-10px); } } .doc-box h4 a { font-size: 18px; } .doc-box .article-image { margin-right: 0px; } .doc-box .doc-content { padding: 30px; padding-right: 30px; } @media screen and (max-width:1024px) { .custom-two-grid.is-40-60 { display: flex; flex-direction: column; } } .doctor-ap .doc-box .article-image { background-color: #dfdfdf; height: 100%; } .doctor-ap .doc-box .article-image img { margin-bottom: -7px !important; min-width: 170px; } footer .ym-g25:nth-child(2) a { text-decoration: underline; } footer .ym-g25:nth-child(2) a:hover { text-decoration: none; } .splide.col3 .splide-content .button:focus-visible { outline: 2px solid; outline-offset: 10px; }