/* =====================================================================
   therapiepraxis-heim (Durmersheim/Bietigheim) – durmersheim.css
   Version: v3  ·  2026-08-10
   ---------------------------------------------------------------------
   Changelog:
   v3 – Footer-Regel praezisiert: ".bp-page-footer p, h4" faerbte JEDE h4
         der Site schwarz. Variablen des News-Moduls zusaetzlich an
         .frame-type-list gehaengt, damit die Ueberschrift des Plugins
         die Praxisfarbe bekommt.
   v2 – News-Modul: Farben der Praxis fuer die Meldungen ergaenzt.
         Akzent = Orange des Startseiten-Relaunchs, nicht das alte Rot
         der Ueberschriften-Unterstriche.
   v1 – Ausgangsfassung: Buttons, Navigation, Karten, Typo, Footer.
   ===================================================================== */
#page-header {
    padding: 0 0 0 0;
}

.frame a[class=""], .frame a:not([class]) {
    color: #B95107;
}

/* GENERAL */
.shortwhite {
    max-width: 200px;
    border-top: 2px solid white;
}
.btn {
    border-radius: 999px;
    background-image: linear-gradient(to right, #0193de, #8d82ba);
    border: none;
}

.navbar-mainnavigation .navbar-nav > li > .nav-link::before { border-radius: 999px; background-image: linear-gradient(to right, #22a83b, #f6ca00); height: 3px; }
.navbar-light .navbar-nav .nav-link:hover, .navbar-default .navbar-nav .nav-link:hover, .navbar-default-transition .navbar-nav .nav-link:hover, .navbar-default-transition.navbar-transition .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-default .navbar-nav .nav-link:focus, .navbar-default-transition .navbar-nav .nav-link:focus, .navbar-default-transition.navbar-transition .navbar-nav .nav-link:focus { color: #2b2b2b; }
.navbar-light .navbar-nav .nav-link, .navbar-default .navbar-nav .nav-link, .navbar-default-transition .navbar-nav .nav-link, .navbar-default-transition.navbar-transition .navbar-nav .nav-link { color: rgba(17,17,17,0.8); }
.gallery-item img { border-radius: 5px; }
.pswp__bg { background-color: rgba(0,0,0,0.7); }
.navbar-mainnavigation .dropdown-menu {
    border: none;
    border-bottom: 1px solid #eaeaea;
}
.collage-wrapper, .bottom-row, .top-row { width: 100%; }
.collage-wrapper { margin-top: 5px; }
.collage-wrapper img { border-radius: 4px; }
.top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.img-full-width { width: 100%; height: auto; }
.img-half-width { width: calc( 50% - 5px ); height: auto; }

.card { border: none; border-radius: 5px; background-color: #eaeaea }
.card-body { text-align: center; }
.card-footer { border: none; background-color: transparent; padding: 0 2rem 1rem 2rem; }
.card-menu .card-link {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    background-image: linear-gradient(to right, #0193de, #8d82ba);
    border: none;
    color: #fff;
    padding: 0.5rem;
}
.card-menu .card-link:hover { color: #eaeaea; }
.card a { color: #2b2b2b; }
.card a:hover { color: #8d82ba; }

.tel-href-wrapper { display: flex; align-items: center; justify-content: center; margin-top: 20px; width: 100%; }
.tel-href {
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    padding: 5px 25px 5px 25px;
    border-radius: 999px;
    font-size: 2rem;
    position: relative;
}
.tel-href:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.15), 0 17px 50px 0 rgba(0,0,0,0.15) }
.tel-href.dark { background-color: #f6ca00; color: #2b2b2b; }
.carousel .carousel-backgroundimage-fade {
    opacity: 0.3;}

.carousel .carousel-indicators li::marker { content:''; }

/* ICONS */
.icongroup-item { flex-direction: column; }
.icongroup-item path { fill: #22a83b; }
.icongroup-item-icon { margin: 0 0 20px 0; }
.icongroup-item-text-header { font-weight: 400; font-size: 18px; }
.frame-type-icon_group .element-header { margin-bottom: 4rem; }

/* TYPO */
.element-subheader {
    font-weight: 400;
}
h4.text-left, .h4.text-left {
    padding-bottom: 1rem;
    position: relative;
}
h4.text-left::after, .h4.text-left::after {
    content: "";
    position: absolute;
    top: calc( 100% - 2px );
    left: 0;
    width: 100%;
    max-width: 60px;
    height: 4px;
    background-color: #B95107;
    background-image: linear-gradient(to right, #B95107, #ffa500);
    border-radius: 2px;
}

/* 2026-08-10 · Selektor praezisiert. Vorher stand hier ".bp-page-footer p, h4":
   wegen des Kommas traf "h4" JEDE Ueberschrift der Site, nicht nur die im
   Fussbereich – zusammen mit !important war das nicht zu ueberschreiben.
   Sichtbar geworden an der Vorzeile des News-Kopfes, die schwarz blieb. */
.bp-page-footer p,
.bp-page-footer h4 {
    color: black !important;
}

.carousel-content {
    margin-top: 5%;
}

.carousel-text-inner h1,h2{
    font-weight: 500 !important;
}

/* FOOTER */
.footer-section-content { color: #2b2b2b; background-color: transparent; }
.footer-section-meta { color: #2b2b2b; background-color: white; text-align: center; }
.footer-meta .meta-menu > li { display: inline-block; padding-left: 0.5rem; padding-right: 0.5rem; }
footer .section-row { border-bottom: 1px solid #e9ecef; }

@media (min-width: 768px) {
    .icongroup-columns-3 .icongroup-item {
        width: calc(100% / 2 - 20px * 2);
    }
}

@media (min-width: 1200px) {
    .navbar-mainnavigation:not(.navbar-transition) .navbar-brand {
        height: 130px;
    }
}

@media (min-width: 1200px) {
    .navbar-transition .navbar-brand {
        height: 70px;
    }
}

.card-menu-item .card-title a {
    color: black !important;
}

.card-menu-item .card-title a:hover {
    color: #8d82ba !important;
}

.card-footer a {
    color: white !important;
}

.card-footer a:hover {
    color: #eaeaea !important;
}
/* Auch .frame-type-list, weil die Ueberschrift des Plugins VOR .news steht
   und die Variablen sonst nicht erbt (newsmodul.css ab v6). */
.news, .frame-type-list {
    --nw-layer: "durmersheim v2";        /* Debug-Marker gegen Stale-Cache */
    --nw-accent: #F1803E;
    --nw-accent-dark: #dd6f2e;
    --nw-title: #2b2b2b;
}
/* Dropdown-Menue der Hauptnavigation unterhalb des Menuepunkts statt darueber
   Ohne Bootstraps natives Dropdown-JS (siehe custom.js) wird die Position nie
   von Popper.js berechnet - .dropdown-menu hat daher kein top/left und
   ueberlappt den auesloesenden Menuepunkt. top/left wirken nur bei position:
   absolute (Desktop), auf dem mobilen position:static-Menue ohne Effekt. */
.navbar-nav .dropdown-menu {
    top: 100%;
    left: 0;
    right: auto;
    width: auto;
    margin-top: 0;
}


@media all and (max-width: 991px) {
    #page-header {
        --mainnavigation-link-height: 70px;
    }
    .navbar-mainnavigation .dropdown-menu {
        box-shadow:none;  width: 100%;
        border-radius: 0;
        padding: 0 0 0 0;
        width: 100% !important;
    }
}
@media all and (min-width: 992px) {
    .navbar-mainnavigation .navbar-nav{
        justify-content: flex-end;
        align-items: center;
    }
}