/*
Theme Name: Zeyna Child
Template: zeyna
Description: Child-Theme für Zeyna
Author: Carsten Pohl
Version: 1.0
*/
:root {
    --rb1: #d27079;
    --rb2: #21323f;
    --rb3:#0d1013;
    --rb41:#7c282d;
    --rb4:#3F293C;
    --rb5:#e2d8d2;
    --rb6:#d9c4af;
    --rb7:#bc7b28;
    --rb8:#7e7068;
    --rb9:#3d293e;
    --h1sizedt: 4.3rem!important;
    --h1sizemb: 2.9rem!important;
    --subsizedt: 1.83rem!important;
    --subsizemb: 1.33rem!important;
    --wrapwidthdesktop: 78%;
    --wrapwidthmobile: 92%;
    --marginwidthdesktop: 11%;
    --marginwidthmobile: 4%;
}
p {
    margin-bottom: .8rem;
}

@font-face {
    font-family: 'Montserrat';
    /* WOFF2, auf Latin gekuerzt (ca. 65 KB statt 689 KB TTF); alle aktuellen Browser unterstuetzen WOFF2; relative Pfade, damit es auch in einem Unterordner funktioniert */
    src: url('../../uploads/fonts/Montserrat/Montserrat-latin-VF.woff2') format('woff2');
    font-weight: 100 900; /* Variable Font: Gewichtsbereich statt fixer Wert */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../../uploads/fonts/Playfair_Display/PlayfairDisplay-latin-VF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/** Generel RB Overlay ***/
p, h4, h5, strong,ul,li {
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size:1.2rem;
    line-height:1.8rem;
}
ul {
    padding-left: 0;
    list-style-position: outside;
    margin-left: 20px;
}

li {
    padding-left: 10px;
    margin-bottom:10px;
}
strong,b {
    font-weight: 700;
}
a , a:visited{
    text-decoration: underline!important;
    transition: all 0.3s ease;
    color: inherit;
}
#g-review.layout_style-1 .g-review .gr-inner-header p a,
#g-review.layout_style-1 .g-review .gr-inner-header p a:visited,
.gr-inner-header a,
.gr-inner-header a:visited {
    color:var(--rb2)important;
}
a:hover {
    transition: all 0.6s ease;
    text-decoration: underline!important;
}
html, body {
    height:101%;
    width:100%;
    overflow-x:hidden;
    font-family: 'Montserrat', sans-serif !important;
}
hr.whitedivider {
    height:1px;
    border-top:1px solid white;
    margin-top:24px!important;
    margin-bottom:24px!important;
}
.rbtitlesub h3,
#rbhomesub h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: calc(var(--h1sizedt) * 0.32)!important;
    margin-bottom: 0 !important;
    margin-top: 0 !important; /* Füge das hinzu */
    margin-right: 2.4rem;
    text-transform: uppercase;
    line-height: 1.2 !important; /* Statt 100% */
    letter-spacing: .34rem;
}

#masthead a, #masthead a:visited{
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.13rem;
    text-transform: uppercase;
    line-height: 130%!important;
    letter-spacing: .24rem;
}
.rb-header-3 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: .1rem;
    text-transform: none;
    font-size: 2.4rem!important;
    color: white!important;
    text-align:center;
}
html {

    scroll-behavior: smooth;
}
.site--nav.nav--popup .site--menu.active {

    min-width: 100%;
}

.header--default {
    display:none!important;
}

h2 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: .1rem;
    font-size: calc(var(--h1sizedt) * 0.80);
    text-transform: none;
    margin-bottom:24px;
}
h4 {
    font-size: calc(var(--h1sizedt) * 0.28);
    font-weight:700;
    margin-bottom:18px;
    letter-spacing: .1rem;
}

.btn a, .btn a:visited{
    padding:18px 24px!important;
    font-size:150%!important;
    text-decoration: none!important;
    background-color:var(--rb3)!important;
    transition: all 0.3s ease;
    border-radius:4px;
    text-align: center!important;
}
.btn a:hover{
    padding:18px 24px!important;
    font-size:150%!important;
    text-decoration: none!important;
    color:var(--rb3)!important;
    background-color:white!important;
}
@media (max-width: 768px) {
    .btn a, .btn a:visited{
        display: block!important;
        width:100%!important;
    }
}
.entry-content h3,
.pe--infobox--title p,
#rbfooter h4,
h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: calc(var(--h1sizedt) * 0.32)!important;
    margin-bottom:18px;
    text-transform: uppercase;
    letter-spacing: .34rem;
}

h5 {
    font-size: calc(var(--h1sizedt) * 0.20);
    font-weight:700;
    margin-bottom:12px;
}
h6 {
    font-size:100%;
    font-weight:700;
}
#rb-section-beratungstermin h2,

h1 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: .1rem;
    font-size: var(--h1sizedt);
    text-transform: none;
    margin-bottom:12px;
}
h1,h2,h3,h4,h5,h6 {
    hyphens: auto;
    -webkit-hyphens: auto;

    /* Chrome, Edge, Firefox */
    hyphenate-limit-chars: 15 7 7;

    /* Safari Fallback (kennt keine Mindest-Wortlänge, hält aber 7/7 ein) */
    -webkit-hyphenate-limit-before: 7;
    -webkit-hyphenate-limit-after: 7;
    line-height:130%;
}
/*
.entry-content h3,
.pe--infobox--title p,
#rbfooter h4,
.rboverlay1 h4{
    font-family: 'Montserrat', sans-serif !important;

    font-size: 1.23rem;
    margin-bottom:36px;
    text-transform: uppercase;
    line-height: 130%!important;
    letter-spacing: .34rem;
}*/
.rbtitlemain h2,
.rbpagemain h1,
#rbhomemain h2{
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: .1rem;
    font-size: var(--h1sizedt);
    text-transform: none;
    margin-top: -1.4rem !important;
    margin-bottom: 0 !important; /* Füge das hinzu */
    hyphens: none!important;
    -webkit-hyphens: none!important;
    -ms-hyphens: none!important;
}

.rboverlay1-container {
    margin-top:12vh!important;
    margin-left:22vw!important;
}
.rboverlay1 h3 {
    color: var(--rb6);
}
.rboverlay1 {
    color: white!important;
}
.rboverlay1-text {
    width:85vh!important;
}
.rboverlay2 {
    margin-top:28vh!important;
    margin-left:auto!important;
    margin-right:auto!important;
    width:32vw!important;
}
#beratung1 {
    min-height:100vh!important;
    width:45vw!important;
}
@media (max-width: 768px) {
    #beratung1 {
        min-height:100vh!important;
        width:100%!important;
    }
}
.rboverlay5 {
    margin-top: -8vh !important;
    margin-left: -5vh !important;
    margin-right: auto !important;
    width: 32vw !important;
}
@media (max-width: 768px) {
    .rboverlay5 {
        width:100%!important;
    }
}
.rboverlay5 a, .rboverlay5 a:visited {
    color:black!important;
}

.menu-item {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: .05rem!important;
    font-size:30px!important;
}
.main-navigation ul ul {
    background: none!important;
    padding: 0!important;
}

#termine {
    min-height:140vh;
    border:0;
    margin:0;
    padding:0;
}


.menu--toggle--wrap  {
    transform: rotate(90deg);
   position:fixed;
    right:6%;

    font-family: 'Montserrat', sans-serif !important;

}
/* Infobox */
.pe--info--box, .pe--infobox--wrap {
    width:100%;
}
.pe--infobox--title p {
    width:100%;
    display: block;
    padding-bottom:40px;
    text-align:center;
}
.pe--infobox--content{
    color:white!important;
    padding:40px;
    margin:0px;
  border: 5px solid white;
    width:100%;
    min-height:300px;

    display:block;

}
.page--transitions.pt__overlay,
#rb-section-info {
    background: linear-gradient(#a39083, #534C47)!important;
}
#rb-section-info ul {
    list-style-position: outside; /* Standard */
    padding-left: 20px; /* oder dein gewünschter Abstand */

}
#rb-section-info p {
    margin-bottom:.4rem!important;
}
#rbtop {

    right:20px;
    bottom:20px;
}


.rbdown {
    width: 3rem!important;
    z-index: 10;
    position: absolute;
    left: 50%!important;
    top: 91vh !important;
    transform: translateX(-50%)!important;
}
@media (max-width: 768px) {
    .rbdown {
        display: none!important;
    }
}

#rb-section-info li {
    padding-left: 10px; /* zusätzlicher Abstand zum Bullet */
}
.rbinfoboxrow .elementor-widget-peinfobox p,
.rbinfoboxrow .elementor-widget-peinfobox li {
    color:white!important;
    font-size:1.1rem;
}


.rbinfoboxrow .elementor-widget-peinfobox a,
.rbinfoboxrow .elementor-widget-peinfobox a:visited {
    color:white;!important;
}
#rbfooter {
    color: white;
    font-size:1.1rem;
}
#rbfooter a , #rbfooter a:visited{
    color:var(--rb5);
    transition: all 0.3s ease;
}

/* google reviews  */

#g-review .swiper .swiper-wrapper .swiper-slide .g-review .gr-inner-header .gr-profile
,.gr-google{
    display: none!important;
}
.gr-stars {
    width:100%;
}
#g-review .swiper .swiper-wrapper .swiper-slide .g-review .gr-inner-header .time {
    position: absolute;
    right:-60px;
    top:5px;
}
.g-review:hover {
    cursor:pointer;
}
#g-review .swiper {
    padding-bottom:80px!important;
}
#g-review .swiper .slider-prev-next-wrapper .grwp-swiper-button-next,
#g-review .swiper .slider-prev-next-wrapper .grwp-swiper-button-prev {
    margin-top:105px!important;
}
#g-review .swiper .swiper-wrapper .swiper-slide .g-review {
    background-color: white;


    box-shadow: none;
    padding:30px!important;
    border-radius: 16px!important;
}
#g-review .swiper .swiper-wrapper .swiper-slide .g-review .gr-inner-body p {
    color: black!important;
}
#g-review .swiper .swiper-wrapper .swiper-slide .g-review .gr-inner-body {
   height:290px;
    overflow: hidden;
    line-height:130%;
    font-size:1.1rem;


}
#g-review .grwp_header {
    display: none!important;
}

/*  Header   */
#masthead {
    background-color:var(--rb2);
    color:white;
}
#masthead a, #masthead a:visited {
    color:white!important;
}



/* WICHTIG: Pointer Events für Header und Menü aktivieren */
.site-header,
#masthead {
    pointer-events: auto !important;
    z-index: 9999 !important;
}


#rbmainmenu,
.elementor-element-b02c3c1 {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

/* Alle Kinder im Menü klickbar machen */
#rbmainmenu *,
#rbmainmenu a,
#site-navigation,
#site-navigation *,
.menu-main-1,
.menu-main-1 * {
    pointer-events: auto !important;
    color:white!important;
}
#rbmainmenu {
    background-color:var(--rb2)!important;
    color:white!important;
}

/* Das Menü Widget selbst */
.elementor-element-04e4cb5,
.elementor-element-04e4cb5 * {
    pointer-events: auto !important;
}
.cblack {
    color: black!important;
}

/* Sichtbarkeit erzwingen */
#rbmainmenu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hero-Section sollte KEINE pointer events blockieren */
#rb-section-home {
    z-index: 1 !important;
}

/* page transition */
.page--transition--caption {
    background-image: url('../../uploads/2026/01/kieferorthopaedin-rosenberger.png'); /* relativ zur style.css, damit es auch im Unterordner funktioniert */
    background-size: 100px auto;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 300px;

    margin-left: auto;
    margin-right: auto;
}
/* Menu Overlay */
#rbmainmenu--container {
    padding:40px;
    padding-top:10%!important;
    padding-left:10%!important;
}
#rbmainmenu--container .rbmainmenu--index{

    margin-right:30px!important;
    padding-right:20px!important;
    border-right:1px solid white!important;
}
#rbmainmenu--container .rbmainmenu--index a, #rbmainmenu--container .rbmainmenu--index a:visited {
    color: white!important;
    text-decoration: underline!important;
}
#rbmainmenu--container .rbmainmenu--index a:hover{
    color: black!important;
    text-decoration: underline!important;
}
#site-navigation {
    padding-left:30px!important;
    line-height: 150%;
    padding-top:20px!important;
}
.rbmainmenu--container {
    padding: 40px!important;
}

.rb-container {
    margin-left:auto!important;
    margin-right:auto!important;
    width:var(--wrapwidthdesktop)!important;
    height:auto;
    min-height:100vh;
    padding-left:0!important;
    padding-right:60px!important;
    padding-top:50px!important;
    padding-bottom:20px!important;
    position:relative;

}
.rb--hero--text.rb-container {
    width:80%!important;
    margin-left:15%!important;
    margin-right:auto!important;
}

.zahnspangen-content {
    text-align:center;
    transition: transform 0.3s ease;

}
.zahnspangen-content h3{
    text-align:center;
    display: inline-block;
    color:white;
    margin-bottom:48px;


}
.zsp {
    border:6px solid white;
    width:200px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    transition: transform 0.3s ease;
    position:relative;
    color:white;
}
.zsp svg {
    fill: white;
    width:30px;
    height:30px;
    position: absolute;
    bottom:15px;
    right:15px;
    transition: transform 0.3s ease;
}
.zsp1 {
    background-color:var(--rb7);
    transition: transform 0.3s ease;
}
.zsp2 {
    background-color:var(--rb8);
    transition: transform 0.3s ease;
}

.zsp3 {
    background-color:var(--rb9);
    transition: transform 0.3s ease;
}
a:hover .zsp1 {
    background-color:var(--rb5);
}
a:hover .zsp2 {
    background-color:var(--rb6);
}
a:hover .zsp3 {
    background-color:var(--rb4);
}
a:hover .zsp {
    transform: rotate(8deg);
}
a:hover .zsp svg {
    transform: rotate(82deg);
}
.rboverlay3 {
    margin-top:40vh!important;
    margin-left:25vw!important;
    width:30vw!important;
}

.herotext {
    padding-top:8vh!important;
}
.herotext p {
    font-size:120%;
    line-height:160%;
}
.rbtitlecontainer {
    top:67vh!important;
}

#rbheadlogo {
    position: fixed!important;
    right:var(--marginwidthdesktop)!important;
    top:50px!important;
    width:70px!important;
    margin:0!important;
    padding:0!important;
}
#rbheadlogo img {
   width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
}
#rbsitenav {
    right:0%!important;
    top:42vh;
    margin:0!important;
    padding:0!important;
}

/* Heros  */
.rb-grid {
    padding:0!important;
}
/* Dein Container/Parent Element */
.rb--page1 > .rb-grid {
    display: grid!important;
    gap: 0!important;
}

/* Desktop: 35% links, 65% rechts */

@media only screen and (min-width: 769px) and (max-width: 1064px) {
    .rb--page1 > .rb-grid {
        grid-template-columns: 45% 1fr!important;
    }
    .rb--page1  .herotext {
        padding:30px!important;
    }
}

/* Mobile: 100% beide Spalten */
@media (max-width: 768px) {
    .rb--page1 > .rb-grid {
        grid-template-columns: 1fr!important;
    }
    .rb--page1 > .rb-grid .col1 { order: 2; padding-top:40px!important;}
    .rb--page1 > .rb-grid .col2 { order: 1; }
    .rb--page1 > .rb-grid h1,
    .rb--page1 > .rb-grid h3 {
        color:white!important;
        position: absolute!important;

        left:var(--marginwidthdesktop)!important;
    }
    .rb--page1 > .rb-grid h1{
        top: calc(var(--marginwidthdesktop) + 50px);
    }
    .rb--page1 > .rb-grid h3 {
        top:var(--marginwidthdesktop)!important;
    }

}


/* Media Queries */
@media only screen and (min-width: 769px) and (max-width: 1064px) {
    .rb-container {
        width: var(--wrapwidthmobile)!important;

    }
    #rbheadlogo {
        top:var(--marginwidthmobile)!important;
        right:var(--marginwidthmobile)!important;
    }
    #rbsitenav {
        right:var(--marginwidthmobile)!important;

    }
    .rbtitlecontainer {
        top:62vh!important;
    }
}
@media only screen and (max-width: 768px) {
    .herotext,
    .rb-container {
        width:var(--wrapwidthmobile)!important;
        padding-right:0px!important;
    }

    .rboverlay1-text {
        width:100%!important;
    }

    #rbheadlogo {
        display: none;
    }
    .pe--info--box--wrapper {
        padding-left:0!important;
        padding-right:0!important;
        margin-left:0!important;
        margin-right:0!important;
    }
    #rbsitenav {
        right: var(--marginwidthmobile)!important;
        top:32vh!important;
    }

    .rbtitlecontainer {
        top:58vh!important;
    }
    .rbtitlesub h3,
    #rbhomesub h1 {
        font-size: calc(var(--h1sizemb) * 0.4)!important;
        margin-right: 0!important;
        hyphens: none!important;
        -webkit-hyphens: none!important;
        -ms-hyphens: none!important;
    }

    h2 {
        font-size: calc(var(--h1sizemb) * 0.80);
    }
    h4 {
        font-size: calc(var(--h1sizemb) * 0.35);
    }
    .entry-content h3,
    .pe--infobox--title p,
    #rbfooter h4,
    h3 {
        font-size: calc(var(--h1sizemb) * 0.4)!important;
    }

    h5 {
        font-size: calc(var(--h1sizemb) * 0.3);
    }
    .rbtitlemain h2,
    h1,
    .rbpagemain h1,
    #rbhomemain h2{
        font-size: var(--h1sizemb)!important;
    }

    #rb-section-info {
        padding:0!important;
    }


    .zahnspangen-content h3 {
       margin-bottom:12px!important;
        margin-top:24px!important;
    }

}

/* Accordion */
.pe--accordion {
    width:80%!important;
}

.pe-accordion-item h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    font-size: calc(var(--h1sizemb) * 0.4)!important;
    margin: 0 !important;
    text-transform: uppercase;
    line-height: 1.2 !important; /* Statt 100% */
    letter-spacing: .24rem;
}
@media (max-width: 768px) {
    .pe--accordion {
        width:100%!important;
    }
    .pe-accordion-item h6 {
        font-size: 1rem!important;
    }
}
.pe-accordion-item .pe-accordion-item-title {
    background-color: var(--rb9)!important;
    color: white!important;
    padding:18px 25px !important;
    border-radius: 12px;
}
.pe-accordion-item .accordion-toggle {
    color: white!important;
}
.pe-accordion-item span.accordion-toggle.toggle--plus>span:last-child,
.pe-accordion-item span.accordion-toggle.toggle--plus>span:first-child {
    background: white !important;
}
.pe-accordion-item  .pe-accordion-item-content p {
    padding:25px;
}
.pe-accordion-item  .pe-accordion-item-content {
    background-color: white!important;
    color: black!important;
    margin:0;
    padding:0;
    border-radius: 0 0 12px 12px ;
}
.pe-accordion-item.accordion--active .pe-accordion-item-title {
    border-radius: 12px 12px 0 0;
}

/* Textboxen */

.rb-textbox1 {
    margin-top:22vh!important;
    margin-left:4vw!important;
    margin-right:33vh!important;
    margin-bottom:4vh;
}
.rb-textbox2 {
    margin-top:22vh;
    margin-left:18vw;
    margin-right:18vw;
    margin-bottom:4vh;
}
.rb-textbox3 {
    margin-top:6vh;
    margin-bottom:6vh;
    margin-left:6vw!important;
    margin-right:6vw!important;
}
.rb-textbox4{
    padding-top:14vh;
    padding-bottom:8vh;
    padding-left:12vw!important;
    padding-right:8vw!important;
}
.rb-textbox5{
    padding-top:14vh;
    padding-bottom:8vh;
    padding-right:16vw!important;
    padding-left:4vw!important;
}
.rb-textbox6 {
    margin-top:10vh;
    margin-left:18vw;
    margin-right:18vw;
    margin-bottom:4vh;
}
.rb-textbox7 {
    margin-top:10vh;
    margin-left:18vw;
    margin-right:18vw;
    margin-bottom:0;
}
.rb-textbox8 {
    margin-top:1vh;
    margin-left:18vw;
    margin-right:2vw;
    margin-bottom:1vh;
}
.rb-textbox9 {
    margin-top:1vh;
    margin-left:2vw;
    margin-right:18vw;
    margin-bottom:1vh;
}
.rb-textbox10 {
    padding-top:50px!important;
    padding-left:6vw!important;
    padding-right:6vw!important;
    padding-bottom:1vh!important;
}

@media (max-width: 768px) {
    .rb-textbox1,.rb-textbox2 ,.rb-textbox3 ,.rb-textbox4 ,.rb-textbox6
    ,.rb-textbox7, .herotext,.rbcenteredtext,.rb--hero--text.rb-container,
    .rboverlay1-container,.rboverlay2,.rboverlay3,.rboverlay4,.rboverlay5,
    .rb-textbox8,.rb-textbox9 ,.rb-textbox10  {
        width: var(--wrapwidthmobile)!important;
        margin-left:auto!important;
        margin-right:auto!important;
        margin-top:40px!important;
        margin-bottom:40px!important;
    }
    .rboverlay1-container {
        margin-top:26vh!important;
    }
    .rboverlay3{
        margin-top:46vh!important;
    }
    .rboverlay4{
        margin-top:30vh!important;
    }
    .rbtextbox2,
    .rboverlay5{
        margin-top:22vh!important;
        margin-bottom:22vh!important;
    }
    .rboverlay2 {
        margin-top:22vh!important;
        margin-bottom:22vh!important;
    }

    .rb--hero--text.rb-container {
        margin-top:0px!important;
    }
    .rb-textbox5  {
        width: var(--wrapwidthmobile)!important;
        margin-left:auto!important;
        margin-right:auto!important;
        margin-top:40px!important;
        margin-bottom:40px!important;
        padding:0!important;
    }
    #mobile--nav--handle .toggle--hamburger {
        transform: rotate(-90deg);
    }
    #mobile--nav--handle .menu--toggle--wrap {
        right: var(--marginwidthmobile)!important;
        top: var(--marginwidthmobile)!important;
    }
    #mobile--nav--handle .menu--toggle--wrap .toggle--text--wrapper {
        width:50px!important;

    }
    #mobile--nav--handle .menu--toggle--wrap .toggle--icon--wrap {
        width:40px!important;
    }
}
.elementor-widget-n-accordion {
    border:0!important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title {
    border-width:0!important;
    padding:0!important;
}
.elementor-widget-n-accordion .e-n-accordion-item {
    border:0!important;
    padding:0!important;
}
.e-n-accordion-item-title-text {

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400!important;
    font-size:1.2rem!important;
    line-height:1.8rem!important;
}
#rb-section-leistungen {
    max-height:103vh!important;
}
/* Leistungen-Liste: Einrückung verkleinern, Bullet bleibt sichtbar,
   Umbruchzeilen bleiben buendig mit der ersten Zeile (haengender Einzug) */
/* Grid-Container um die Listen hatte eigenes padding-left, das die Liste
   gegenueber der Ueberschrift "Leistungsspektrum" einrueckte - direkt an
   der Quelle entfernt statt mit einem Differenzwert zu kompensieren */
#rb-section-leistungen .elementor-element-26411ef {
    padding-left: 0 !important;
}
#rb-section-home ul,
#rb-section-leistungen ul {
    margin-left: 15px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
}
#rb-section-home ul {
    margin-left: 12px !important;
}
#rb-section-home li,
#rb-section-leistungen li {
    margin-left: 0 !important;
    padding-left: 0.4em !important;
}
#rb-section-home li::marker,
#rb-section-leistungen li::marker {
    color: inherit !important;
}

/* Leistungsspektrum-Seite: Inhaltsverzeichnis-Liste im Header
   (zwei Text-Editor-Bloecke). Der Grid-Container hatte justify-items:center,
   wodurch der schmalere zweite Block eingerueckt zentriert statt buendig
   zum ersten Block dargestellt wurde. */
#rb-leistung-hero {
    justify-items: stretch !important;
}
#rb-leistung-hero a,
#rb-leistung-hero a:visited {
    text-decoration: none !important;
}
#rb-leistung-hero a:hover {
    text-decoration: underline !important;
}
@media (max-width: 768px) {
    /* Fix: Liste wurde auf Mobil durch die Desktop-Höhe abgeschnitten,
       da die zwei Spalten hier untereinander stehen statt nebeneinander */
    #rb-section-leistungen {
        max-height: none !important;
    }
    /* Zweiter Listen-Block: kein zusaetzlicher Abstand auf Mobil */
    .elementor-element-923e7d1,
    .elementor-element-923e7d1 .elementor-widget-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
.mxtra {
    max-height:30px!important;
}
@supports (-webkit-touch-callout: none) {
    /* Alle filter und blend-modes auf iOS deaktivieren */
    * {
        mix-blend-mode: normal !important;
        filter: none !important;
        background-blend-mode: normal !important;
    }

    /* Oder nur für Bilder */
    img {
        mix-blend-mode: normal !important;
        filter: none !important;
    }
}

/* ============================================================
   MOBILE GUTTER-NORMALISIERUNG (<= 768px)
   Ziel: Der seitliche Rand wird NUR von den rb-Wrappern bestimmt
   (92% Breite, auto-Margin = 4% je Seite = var(--marginwidthmobile)).
   Ursachen der bisherigen Streuung (15 / 24,2 / 28,8 / 37,5 px):
   1) Elementor-Container mit eigenem seitlichen Padding (10px) um einen Wrapper
   2) verschachtelte Wrapper (92% von 92%)
   3) eigenes seitliches Padding an den Wrappern (rb-textbox4/5/10: 6vw)
   ============================================================ */
@media (max-width: 768px) {
    /* 1) Container, die einen Wrapper enthalten, tragen kein eigenes seitliches Padding */
    .e-con:has(.rb-container),
    .e-con:has([class*="rb-textbox"]),
    .e-con:has(.herotext),
    .e-con:has(.rboverlay1-container, .rboverlay2, .rboverlay3, .rboverlay4, .rboverlay5),
    #rbfooter {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3) Wrapper selbst ohne seitliches Padding */
    .rb-container,
    .herotext,
    [class*="rb-textbox"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2) Verschachtelte Wrapper: kein zweites Mal 92% + auto-Margin */
    .rb-container .herotext,
    .rb-container .rb-container,
    .rb-container [class*="rb-textbox"],
    [class*="rb-textbox"] .herotext,
    [class*="rb-textbox"] [class*="rb-textbox"],
    .herotext .rb-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hero-Ueberschriften (per JS/absolute ueber das Bild gelegt) auf denselben Rand */
    .rb--page1 > .rb-grid h1,
    .rb--page1 > .rb-grid h3 {
        left: var(--marginwidthmobile) !important;
    }
}

/* Mobile Gutter: weitere Padding-Quellen innerhalb der Wrapper */
@media (max-width: 768px) {
    /* Hero-Titel-Container (absolut positioniert) hat eigenes 10px-Padding */
    .rbtitlecontainer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Nested-Accordion: Inhaltsflaeche buendig zum Accordion-Titel */
    .e-n-accordion-item > .e-con {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Startseite Leistungen: Listen-Widgets nicht zentrieren, sondern linksbuendig fuellen */
    #rb-section-leistungen .elementor-element-26411ef {
        justify-items: stretch !important;
    }
}

/* ============================================================
   MOBILE STARTSEITE: Bild Weiterbildung, Lesbarkeit Beratung,
   Testimonials-Rand, Info-Boxen kompakter
   ============================================================ */
@media (max-width: 768px) {
    /* Weiterbildung: Bild war in Elementor auf Mobil ausgeblendet -> sichtbar,
       dadurch keine leere Flaeche mehr */
    #rb-section-weiterbildung .elementor-hidden-mobile {
        display: block !important;
    }

    /* Beratung: dunkles Overlay ueber dem Hintergrundbild (Lesbarkeit der Schrift) */
    #rb-section-beratung .container--bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
        pointer-events: none;
    }

    /* Testimonials: Karte buendig auf den globalen Rand (Slide hatte 10px Eigenabstand) */
    #g-review .swiper-slide .g-review {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Testimonials: Widget-Container (Quelle-Zeile) hat eigenen 15px-Aussenabstand */
    #rb-section-testimonials .elementor-widget-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Info-Boxen: kleineres Innenpadding, keine erzwungene Hoehe (JS gleicht
       auf Mobil sonst die Boxen auf die hoechste an -> Leerraum) */
    .pe--infobox--content {
        padding: 24px !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/* Startseite Leistungen: "Mehr erfahren" war durch die globale Link-Farbe (inherit)
   schwarz auf dunklem Grund -> in dieser Sektion wieder weiss */
#rb-section-leistungen p,
#rb-section-leistungen a,
#rb-section-leistungen a:hover,
#rb-section-leistungen a:visited {
    color: #fff !important;
}
@media (max-width: 768px) {
    /* Elementor-Grid hat auf Mobil zwei gleich hohe Zeilen (je ~694px): die Zeile mit
       nur "Mehr erfahren" wurde dadurch aufgeblasen -> Zeilen auf Inhaltshoehe */
    #rb-section-leistungen .elementor-element-bbf6cc1,
    #rb-section-leistungen .elementor-element-6d010ea {
        grid-template-rows: auto !important;
    }
}

/* ============================================================
   STARTSEITE (page-id-31): alle Einblend-Animationen aus
   - Elementor-Eintritts-Animationen fadeIn / fadeInLeft / fadeInRight
     (Elemente sind sonst bis zum Trigger per elementor-invisible unsichtbar)
   - Theme-GSAP-Einblendung der Inhaltsbloecke (will__animated)
   Bewusst NICHT: slideInDown (Scroll-Pfeile), Hover-Effekte, und kein
   transform auf Unterelemente (Testimonial-Karussell nutzt transform).
   ============================================================ */
body.page-id-31 .elementor-invisible[data-settings*="fadeIn"] {
    visibility: visible !important;
}
body.page-id-31 .elementor-invisible[data-settings*="fadeIn"],
body.page-id-31 .animated[class*="fadeIn"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
body.page-id-31 .entry-content .will__animated,
body.page-id-31 .entry-content .will__animated :is(h1, h2, h3, h4, p, a, span:not(.toggle-line)) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   HEADER / MENUE (alle Seiten): Menue-Icon war zufaellig unsichtbar.
   Ursache (gemessen): #mobile--nav--handle traegt die Theme-Klasse will__animated;
   die GSAP-Eintrittsanimation setzt visibility:hidden und laeuft manchmal nicht
   durch -> Hamburger bleibt unsichtbar. Daher im Header immer sichtbar,
   dazu die Fade-In-Animationen im Header aus.
   Kein transform/display hier angefasst (Menue-Overlay, Drehung des Icons).
   ============================================================ */
#rbsitenavhandle .will__animated {
    visibility: visible !important;
    opacity: 1 !important;
}
#rbsitenavhandle .elementor-invisible[data-settings*="fadeIn"] {
    visibility: visible !important;
}
#rbsitenavhandle .elementor-invisible[data-settings*="fadeIn"],
#rbsitenavhandle .animated[class*="fadeIn"] {
    animation: none !important;
    opacity: 1 !important;
}

/* ============================================================
   MOBILE GUTTER: Hero-Titel und innere Container (Unterseiten)
   ============================================================ */
@media (max-width: 768px) {
    /* Hero-Titel (h1/h3 werden per JS in die Bildspalte verschoben). Die alte Regel
       ".rb--page1 > .rb-grid h1,h3" griff nie (das Grid hat die Klasse rb-grid nicht)
       -> Titel standen bei 0px (Kinder/Jugendliche) bzw. 10px (Erwachsene) */
    .rb--hero--img {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .rb--page1 .rb--hero--img h1,
    .rb--page1 .rb--hero--img h3 {
        padding-left: var(--marginwidthmobile) !important;
        padding-right: var(--marginwidthmobile) !important;
        box-sizing: border-box;
    }

    /* Container INNERHALB eines Wrappers, die Text-Widgets tragen, ohne eigenes Seitenpadding */
    .rb-container .e-con:has(> .elementor-widget-text-editor, > .elementor-widget-heading),
    [class*="rb-textbox"] .e-con:has(> .elementor-widget-text-editor, > .elementor-widget-heading) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   MOBILE LEISTUNGSSPEKTRUM: Farbflaechen-Bloecke ohne Foto auf Inhaltshoehe.
   Die Mindesthoehe 100vh (Desktop) erzeugte auf Mobil 180-480px Leerraum unter dem Text.
   Bewusst ausgenommen: #rb-leistung3 (hat Foto-Hintergrund) und die Haupt-Liste oben.
   ============================================================ */
@media (max-width: 768px) {
    #rb-leistung1,
    #rb-leistung5,
    #rb-leistung7,
    #rb-leistung8,
    #rb-leistung11,
    #rb-leistung12,
    #rb-leistung13,
    #rb-leistung14,
    #rb-leistung15,
    #rb-leistung16,
    #rb-leistung17,
    #rb-leistung18 {
        min-height: 0 !important;
    }
}

/* Datenschutz-Kontaktbloecke nutzten Roboto (Google Font, nicht mehr geladen) -> Seitenschrift */
.contact-info {
    font-family: 'Montserrat', sans-serif !important;
}

/* ============================================================
   MOBIL: farbige Textboxen (Kinder k5 / Jugendliche jg4) und Accordion-Abstaende
   - Boxen bekamen durch die Gutter-Normalisierung kein Innenpadding mehr
     (Text lag direkt am Rand der Farbflaeche) und hatten 113px/65px bzw. 0px
     oben/unten sowie 40px Aussenabstand -> ca. 80px Luft zwischen den Boxen (jetzt 0: Boxen stossen aneinander).
   - Zwei Accordion-Gruppen auf Jugendliche hatten 40px Aussenabstand + Gap (80px).
   ============================================================ */
@media (max-width: 768px) {
    .elementor-element-1c778a5,
    .elementor-element-6ac9f07,
    .elementor-element-f5bf3f7,
    .elementor-element-d6ddde2 {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 32px var(--marginwidthmobile) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    #rb-section-jg5 .elementor-element-f070a7f,
    #rb-section-jg5 .elementor-element-379c5a9 {
        margin-bottom: 0 !important;
    }
}

/* MOBIL Startseite Weiterbildung: 162px Aussenabstand um den Textblock (weisse Luecke zwischen den Fotos) */
@media (max-width: 768px) {
    #rb-section-weiterbildung .elementor-element-bc41309 {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}

/* MOBIL Leistungsspektrum-Header: Grid-Zeilen nach Inhalt statt auf min-height 735px gestreckt
   (verursachte Extra-Luecke zwischen den beiden Listenbloecken) */
@media (max-width: 768px) {
    #rb-leistung-hero {
        grid-template-rows: auto !important;
        align-content: start !important;
        row-gap: 0 !important;
    }
}

/* ============================================================
   STARTSEITE: Inhalte nicht bis zum JS-Start verstecken (LCP)
   Das Plugin pe-core setzt *[data-anim-general="true"] auf visibility:hidden, bis das Theme-JS
   .anim_start vergibt. Die Hero-Ueberschrift ("Dr. Stefanie Rosenberger") war dadurch erst nach
   ca. 7 s sichtbar (PageSpeed: "Verzoegerung beim Rendering des Elements").
   Die Einblend-Animationen sind auf der Startseite ohnehin abgeschaltet (siehe oben).
   Nur im Inhaltsbereich, nicht im Header/Menue-Overlay.
   ============================================================ */
body.page-id-31 .entry-content *[data-anim-general="true"],
body.page-id-31 .entry-content *[data-animate="true"] {
    visibility: visible !important;
}

/* ============================================================
   KONTAKT-SEITE (page-id-3621, Kopie der Terminseite): Text weiss
   ============================================================ */
body.page-id-3621 .entry-content :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, span, label, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-container) {
    color: #fff !important;
}
body.page-id-3621 .entry-content a,
body.page-id-3621 .entry-content a:visited,
body.page-id-3621 .entry-content a:hover {
    color: #fff !important;
}

/* ============================================================
   STARTSEITE: Luecke zwischen "about" und "Das Richtige tun" (und zwischen weiteren Abschnitten)
   Ursache 1: Die Abschnitte #rb-section-about und #rb-section-ganzheitlich haben in Elementor den Effekt
   "Parallax-Container, Richtung nach oben, Staerke 10". GSAP verschiebt den ganzen Abschnitt beim Scrollen
   um bis zu 10 % seiner Hoehe nach oben; dahinter scheint der graue Seitenhintergrund (#f1f1f1) durch.
   Ursache 2: #rb-section-about hat min-height 106vh, der Inhalt aber nur 100vh -> 6vh weisser Streifen.
   ============================================================ */
body.page-id-31 #rb-section-about,
body.page-id-31 #rb-section-ganzheitlich {
    transform: none !important;
}
body.page-id-31 #rb-section-about {
    min-height: 100vh !important;
}