/*
Theme Name: Frank Berce Zahnarzt in Bottrop
Template: twentytwenty
Author: ordana GmbH
Version: 3.0.1768559326
Updated: 2026-01-16 11:28:46

*/


.soft-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    color: inherit;
}

.entry-content h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
	color: #1b2d70;
}
.entry-content h3 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
	color: #1b2d70;
}

.entry-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 4px;
    background: #00a1e0;
    border-radius: 50% / 100%;
}

/* Fließtext */
body,
body p,
body li,
body input,
body textarea,
body select,
body button {
    font-family: "varela-round", sans-serif !important;
}

/* Überschriften */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.entry-title,
.site-title {
    font-family: "varela-round", sans-serif !important;
}

/* Navigation */
.primary-menu,
.primary-menu a,
.modal-menu,
.modal-menu a {
    font-family: "varela-round", sans-serif !important;
}


.n2-ss-slider,
.n2-ss-slider * {
    font-family: "varela-round", sans-serif !important;
}

/* ==================================================
   HEADER + SMART SLIDER + CTA-BUTTON
   Nur auf der Startseite transparent über dem Slider
   ================================================== */


/* ==================================================
   1. HEADER ÜBER DEM SLIDER
   ================================================== */

body.home #site-header {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Header-Innenbereich */
body.home #site-header .header-inner {
    padding-top: 2rem;
    padding-bottom: 2rem;

    transition:
        padding-top 0.3s ease,
        padding-bottom 0.3s ease;
}


/* Logo */
body.home #site-header .site-logo img {
    transition:
        width 0.3s ease,
        max-height 0.3s ease,
        transform 0.3s ease;
}


/* ==================================================
   2. HAUPTMENÜ
   ================================================== */

body.home #site-header .primary-menu {
    display: flex !important;
    align-items: center !important;
}


/* Normale Menülinks */
body.home #site-header .primary-menu > li:not(.menu-button) > a {
    color: #1b2d70 !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.65);
}


/* Hover und aktive Menüpunkte */
body.home #site-header .primary-menu > li:not(.menu-button) > a:hover,
body.home #site-header .primary-menu > li.current-menu-item:not(.menu-button) > a,
body.home #site-header .primary-menu > li.current-menu-ancestor:not(.menu-button) > a {
    color: #00a1e0 !important;
}


/* Menü-, Such- und Mobile-Schalter */
body.home #site-header .toggle,
body.home #site-header .toggle-inner,
body.home #site-header .toggle-text,
body.home #site-header .toggle-icon {
    color: #1b2d70 !important;
}


/* ==================================================
   3. CTA-BUTTON „TERMIN BUCHEN“
   ================================================== */

/* Deutlicher Abstand zum letzten normalen Menüpunkt */
#site-header .primary-menu > li.menu-button {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 4rem !important;

    padding: 0 !important;
}


/* Gestaltung des Buttons */
#site-header .primary-menu > li.menu-button > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0.9rem 1.8rem !important;

    background: #1b2d70 !important;
    background-color: #1b2d70 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 50px !important;

    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;

    box-shadow: 0 5px 16px rgba(27, 45, 112, 0.24);

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        padding 0.3s ease;
}


/* Hover und aktiver Zustand */
#site-header .primary-menu > li.menu-button > a:hover,
#site-header .primary-menu > li.menu-button.current-menu-item > a,
#site-header .primary-menu > li.menu-button.current-menu-parent > a {
    background: #00a1e0 !important;
    background-color: #00a1e0 !important;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 161, 224, 0.28);
}


/* ==================================================
   4. HEADER NACH DEM SCROLLEN
   ================================================== */

body.home #site-header.berce-header-scrolled {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;

    background: rgba(255, 255, 255, 0.98) !important;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    box-shadow: 0 5px 22px rgba(27, 45, 112, 0.14) !important;
}


/* Kompakterer Header */
body.home #site-header.berce-header-scrolled .header-inner {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}


/* Menü ohne Textschatten */
body.home #site-header.berce-header-scrolled
.primary-menu > li:not(.menu-button) > a {
    color: #1b2d70 !important;
    text-shadow: none !important;
}


/* Hover und aktive Menüpunkte */
body.home #site-header.berce-header-scrolled
.primary-menu > li:not(.menu-button) > a:hover,
body.home #site-header.berce-header-scrolled
.primary-menu > li.current-menu-item:not(.menu-button) > a,
body.home #site-header.berce-header-scrolled
.primary-menu > li.current-menu-ancestor:not(.menu-button) > a {
    color: #00a1e0 !important;
}


/* Button im kompakten Header etwas kleiner */
body.home #site-header.berce-header-scrolled
.primary-menu > li.menu-button > a {
    padding: 0.75rem 1.6rem !important;
}


/* ==================================================
   5. UNTERSEITEN
   Header bleibt dort normal weiß
   ================================================== */

body:not(.home) #site-header {
    background: #ffffff !important;
}


body:not(.home) #site-header .primary-menu > li:not(.menu-button) > a {
    color: #1b2d70 !important;
}


body:not(.home) #site-header .primary-menu > li:not(.menu-button) > a:hover,
body:not(.home) #site-header .primary-menu > li.current-menu-item:not(.menu-button) > a,
body:not(.home) #site-header .primary-menu > li.current-menu-ancestor:not(.menu-button) > a {
    color: #00a1e0 !important;
}


/* ==================================================
   6. WORDPRESS-ADMINLEISTE
   ================================================== */

body.home.admin-bar #site-header {
    top: 32px;
}


@media screen and (max-width: 782px) {

    body.home.admin-bar #site-header {
        top: 46px;
    }
}


/* ==================================================
   7. SMARTPHONE UND TABLET
   ================================================== */

@media screen and (max-width: 999px) {

    /* Header nicht über den Slider legen */
    body.home #site-header,
    body.home #site-header.berce-header-scrolled {

        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;

        background: #ffffff !important;
        box-shadow: 0 3px 12px rgba(27, 45, 112, 0.10) !important;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Gleiche Headerhöhe */
    body.home #site-header .header-inner,
    body.home #site-header.berce-header-scrolled .header-inner {
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
    }

    /* Keine zusätzlichen Abstände vor dem Slider */
    body.home #site-content,
    body.home main,
    body.home .post-inner,
    body.home .entry-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Desktop-Button im normalen Menü zurücksetzen */
    #site-header .primary-menu > li.menu-button {
        margin: 0 !important;
        padding: 0 !important;
    }

    #site-header .primary-menu > li.menu-button > a {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
        color: inherit !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
        transform: none !important;
    }

    #site-header .primary-menu > li.menu-button > a:hover,
    #site-header .primary-menu > li.menu-button.current-menu-item > a,
    #site-header .primary-menu > li.menu-button.current-menu-parent > a {
        background: transparent !important;
        background-color: transparent !important;
        color: inherit !important;

        box-shadow: none !important;
        transform: none !important;
    }

    /* Button im mobilen Menü */
    .modal-menu li.menu-button {
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal-menu li.menu-button > .ancestor-wrapper > a,
    .modal-menu li.menu-button > a {

        display: block !important;

        width: auto !important;
        margin: 1.5rem 2rem !important;
        padding: 1.2rem 1.8rem !important;

        background: #1b2d70 !important;
        background-color: #1b2d70 !important;
        color: #ffffff !important;

        border-radius: 50px !important;

        text-align: center !important;
        line-height: 1.2 !important;
    }

    .modal-menu li.menu-button > .ancestor-wrapper > a:hover,
    .modal-menu li.menu-button > a:hover {
        background: #00a1e0 !important;
        background-color: #00a1e0 !important;
        color: #ffffff !important;
    }
}


/* ==================================================
   8. REDUZIERTE BEWEGUNG
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    body.home #site-header,
    body.home #site-header .header-inner,
    body.home #site-header .site-logo img,
    #site-header .primary-menu > li.menu-button > a {
        transition: none !important;
    }
}


/* ==================================================
   9. SMART SLIDER DIREKT AM OBEREN SEITENRAND
   ================================================== */

body.home #site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


body.home main,
body.home .post-inner,
body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Oberen Abstand des ersten Smart Sliders entfernen */
body.home .entry-content > .n2-section-smartslider:first-child,
body.home .entry-content > div:first-child .n2-section-smartslider {
    margin-top: 0 !important;
}

/* ==========================================
   SICHTBARER ABSTAND VOR DEM TERMIN-BUTTON
   ========================================== */

/* Desktop */
@media screen and (min-width: 1000px) {

    #site-header .primary-menu > li.menu-button {
        margin: 0 !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 4rem !important;
    }

    #site-header .primary-menu > li.menu-button > a {
        margin: 0 !important;
    }
}


/* Mobil: zusätzlichen Abstand wieder entfernen */
@media screen and (max-width: 999px) {

    #site-header .primary-menu > li.menu-button,
    .modal-menu li.menu-button {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==================================================
   MOBIL: SMART SLIDER DIREKT UNTER DEM HEADER
   ================================================== */

@media screen and (max-width: 999px) {

    body.home #site-header,
    body.home #site-header.berce-header-scrolled {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        background: #ffffff !important;
        box-shadow: 0 3px 12px rgba(27, 45, 112, 0.10) !important;

        transform: none !important;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.home #site-header .header-inner,
    body.home #site-header.berce-header-scrolled .header-inner {
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
    }

    body.home #site-header + .n2_clear,
    body.home #site-header + .n2_clear + ss3-force-full-width,
    body.home ss3-force-full-width {
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    body.home ss3-force-full-width,
    body.home .n2-ss-slider,
    body.home .n2-ss-slider-wrapper-inside {
        --subtract-vertical-offset: 0px !important;
    }

    body.home #site-content,
    body.home main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ==================================================
   LEISTUNGSKARTEN
   ================================================== */

.leistungen-karten {
    display: flex !important;
    align-items: stretch !important;
    gap: 3rem !important;
}


/* ==================================================
   EINZELNE KARTEN
   ================================================== */

.leistungen-karten > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    min-height: 370px !important;
    padding: 3rem 2.4rem !important;

    background: #ffffff !important;

    border: 1px solid rgba(0, 161, 224, 0.10) !important;
    border-radius: 14px !important;

    box-shadow:
        0 2px 8px rgba(27, 45, 112, 0.03),
        0 12px 30px rgba(27, 45, 112, 0.07) !important;

    text-align: center !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Dezenter Hover-Effekt */
.leistungen-karten > .wp-block-column:hover {
    transform: translateY(-3px);

    border-color: rgba(0, 161, 224, 0.18) !important;

    box-shadow:
        0 4px 12px rgba(27, 45, 112, 0.04),
        0 18px 40px rgba(27, 45, 112, 0.09) !important;
}


/* ==================================================
   ICONBEREICH
   ================================================== */

.leistungen-karten > .wp-block-column figure,
.leistungen-karten > .wp-block-column .wp-block-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 90px !important;
    height: 90px !important;

    margin: 0 auto 2rem !important;

    flex-shrink: 0 !important;
}


/* Icon-Bild */
.leistungen-karten > .wp-block-column figure img,
.leistungen-karten > .wp-block-column .wp-block-image img {
    display: block !important;

    width: 90px !important;
    height: 90px !important;

    object-fit: contain !important;
}


/* ==================================================
   ÜBERSCHRIFT
   ================================================== */

.leistungen-karten > .wp-block-column h3 {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 82px !important;

    margin: 0 0 2rem !important;

    color: #1b2d70 !important;

    font-size: 2.4rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
}


/* Unterstreichung in den Karten deaktivieren */
.leistungen-karten > .wp-block-column h3::after {
    display: none !important;
}


/* ==================================================
   BESCHREIBUNGSTEXT
   ================================================== */

.leistungen-karten > .wp-block-column p {
    margin: 0 !important;

    color: #222222 !important;

    font-size: 1.9rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
}


/* ==================================================
   TABLET
   ================================================== */

@media screen and (max-width: 999px) {

    .leistungen-karten {
        gap: 2rem !important;
    }

    .leistungen-karten > .wp-block-column {
        min-height: 350px !important;
        padding: 2.6rem 2rem !important;
    }

    .leistungen-karten > .wp-block-column h3 {
        min-height: 76px !important;
        font-size: 2.2rem !important;
    }

    .leistungen-karten > .wp-block-column p {
        font-size: 1.8rem !important;
    }
}


/* ==================================================
   SMARTPHONE
   ================================================== */

@media screen and (max-width: 699px) {

    .leistungen-karten {
        display: block !important;
    }

    .leistungen-karten > .wp-block-column {
        min-height: 0 !important;
        margin-bottom: 2rem !important;
        padding: 2.6rem 2rem !important;
    }

    .leistungen-karten > .wp-block-column:last-child {
        margin-bottom: 0 !important;
    }

    .leistungen-karten > .wp-block-column h3 {
        min-height: 0 !important;
    }
}


/* ==================================================
   REDUZIERTE BEWEGUNG
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    .leistungen-karten > .wp-block-column {
        transition: none !important;
    }

    .leistungen-karten > .wp-block-column:hover {
        transform: none !important;
    }
}