/* =====================================================================
   therapiepraxis-amp (Karlsruhe) – amp.css
   Version: v7  ·  2026-08-17
   ---------------------------------------------------------------------
   Changelog:
   v7 – Logo im geschrumpften Zustand maximal: navbar-transition-Hoehe
         70 -> 92px, Logo-Bild 80% -> 100% der Brand-Hoehe. Grosszustand
         130px unveraendert.
   v6 – Topbar-Hoehe fixiert (min-height 42px, line-height 1.65 explizit):
         das Konzept erbte 1.65 vom Body, das Theme liefert weniger,
         dadurch wirkte die Leiste gestaucht.
   v5 – Footer hell: Inhalt auf Surf #f7f4ef (dunkler Grund war zu
         schwer), Schrift dunkel, Links orange; Meta-Zeile bleibt als
         schmaler dunkler Abschluss. Triline und Spaltenfarben bleiben.
   v4 – Orange Topbar (JS-injiziert, therapiepraxis-amp.js v3) + Telefon-
         Pill als letzter Navigationspunkt. Mobil zeigt die Topbar nur die
         Telefonnummer (tippbar), ab 760px Zeiten/Adresse/Kassen ohne
         Telefon — der sitzt dann als Pill in der Navigation (ab 992px)
         bzw. als oranger Eintrag im Burger-Menue.
   v3 – Footer auf das neue Design gehoben (Konzept amp-startseite v15):
         dunkler Grund #26221d, Triline (Physio/Ergo/Logo) als 8px-Band
         oben, Spalten-Border in den drei Disziplinfarben, helle Schrift.
         Alte helle Footer-Regeln inkl. "color:black !important" ersetzt.
         Farb-Variablen (--amp-*) kommen aus amp-startseite.css v2,
         Fallback-Werte stehen direkt in den Eigenschaften.
   v2 – News-Modul: Farben der Praxis fuer die Meldungen ergaenzt
         (Aussehen zentral in fileadmin/theme/css/newsmodul.css).
   v1 – Footer-Regel praezisiert: ".bp-page-footer p, h4" traf wegen des
         Kommas JEDE h4 der Site und war mit !important nicht zu
         ueberschreiben. Jetzt ".bp-page-footer h4". Sonst unveraendert.
   ===================================================================== */
#page-header {
    padding: 0 0 0 0;
}
.frame a[class=""], .frame a:not([class]) {
    color: #B95107;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 500;
}
h1, .h1 {
    font-size: 2rem;
}
h2, .h2 {
    font-size: 1.5rem;
}
h3, .h3 {
    font-size: 1.25rem;
}
h4, .h4 {
    font-size: 1.125rem;
}
a,
button {
  transition: all 0.2s ease-in-out;
}
.element-subheader {
    font-weight: 400;
    color: var(--secondary);
}

/* navbar */
.navbar-mainnavigation .navbar-nav > li > .nav-link::before {
  content: none;
  display: hidden;
}

/* =====================================================================
   TOPBAR + TELEFON-PILL  · v4 · 2026-08-17
   Markup injiziert therapiepraxis-amp.js v3 (Sanitizer-frei).
   Mobil: nur Telefon, zentriert. Ab 760px: Zeiten + Adresse + Kassen,
   Telefon wandert in die Navigation.
   ===================================================================== */
.amp-topbar {
    background: var(--amp-orange, #EA5B0C);
    color: #fff;
    font-size: 14.5px;
    line-height: 1.65;   /* Konzept erbte das vom Body — hier explizit */
}
.amp-topbar-fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1031;   /* eine Stufe ueber Bootstrap-fixed-Navbar (1030) */
}
.amp-tb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 9px 0;
    min-height: 42px;    /* Zielhoehe wie im Konzept, unabhaengig vom Theme */
}
.amp-tb-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
a.amp-tb-item:hover {
    color: #fff;
    text-decoration: none;
}
.amp-tb-item i { font-size: 17px; }
.amp-tb-hours, .amp-tb-addr, .amp-tb-kassen { display: none; }
.amp-tb-phone { font-size: 15.5px; }
@media (min-width: 760px) {
    .amp-tb { justify-content: space-between; }
    .amp-tb-hours, .amp-tb-addr, .amp-tb-kassen { display: inline-flex; }
    .amp-tb-phone { display: none; }
}

/* Telefon in der Navigation: Desktop-Pill, mobil oranger Menue-Eintrag */
.amp-nav-phone { display: flex; align-items: center; }
.amp-nav-phone .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
}
@media (min-width: 992px) {
    .amp-nav-phone { margin-left: 1.25rem; }
    .amp-nav-phone .nav-link {
        background: var(--amp-orange, #EA5B0C);
        color: #fff !important;
        border-radius: 10px;
        padding: 0.55rem 1.05rem !important;
    }
    .amp-nav-phone .nav-link:hover {
        background: var(--amp-orange-d, #C44A07);
        color: #fff !important;
    }
}
@media (max-width: 991px) {
    .amp-nav-phone .nav-link {
        color: var(--amp-orange, #EA5B0C) !important;
    }
}
@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-brand-image img {
        max-height: 100%;   /* v7: Logo fuellt die Brand-Hoehe voll aus */
    }
}

/* =====================================================================
   FOOTER — dunkel nach neuem Startseiten-Design  · v3 · 2026-08-17
   ---------------------------------------------------------------------
   Nur Umfaerbung per Layer, Theme-Markup unveraendert. Triline als
   ::before-Band, Spalten-Border im Wegeleitsystem (Orange/Gruen/Violett).
   ===================================================================== */
.bp-page-footer {
    position: relative;
}
/* Signatur: Drei-Linien-Band ueber dem Footer (Physio / Ergo / Logo) */
.bp-page-footer::before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg,
        var(--amp-physio, #EA5B0C) 0 33.33%,
        var(--amp-ergo, #20794d) 33.33% 66.66%,
        var(--amp-logo, #7A4FA8) 66.66% 100%);
}
.footer-section-content {
    color: #4f4940;
    background-color: #f7f4ef;
    background-image: none;
}
/* Spalten-Border: 1. Orange, 2. Gruen, 3. Violett.
   Faellt die Spaltenstruktur anders aus als .row > div, bleibt ueberall
   Orange stehen — kein Bruch. */
.footer-section-content .frame-inner {
    border-left: 2px solid var(--amp-physio, #EA5B0C);
    padding-left: 1rem;
}
.footer-section-content .row > div:nth-child(2) .frame-inner {
    border-left-color: var(--amp-ergo, #20794d);
}
.footer-section-content .row > div:nth-child(3) .frame-inner {
    border-left-color: var(--amp-logo, #7A4FA8);
}
/* Ersetzt die alte Regel "color: black !important" aus v1 —
   !important bleibt, um dieselben Theme-Regeln zu schlagen. */
.bp-page-footer h4,
.footer-section-content h4 {
    color: #26221d !important;
}
.bp-page-footer p {
    color: #4f4940 !important;
}
.footer-section-content a {
    color: var(--amp-orange, #EA5B0C);
    font-weight: 600;
}
.footer-section-content a:hover {
    color: var(--amp-orange-d, #C44A07);
    text-decoration: none;
}
/* Meta-Zeile: schmaler dunkler Abschluss (Konzept-Footer im Kleinen) */
.footer-section-meta {
    color: #8f877e;
    background-color: #26221d;
}
.footer-section-meta p {
    color: #8f877e !important;
}
.footer-section-meta a {
    color: #cfc8c0;
}
.footer-section-meta a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* career */
.icongroup {
    margin: 3rem 0 0 0 !important;
    gap: 1.5rem;
}
.icongroup-item {
    margin: 0;
    width: calc( 50% - 1rem );
    min-width: unset;
    max-width: unset;
}
.icongroup-item-icon {
    width: 1.5rem;
    margin-right: 1rem;
}
.icongroup-item-text-header {
    font-size: 1rem;
    font-weight: 400;
}

/* leistungen */
.row .frame.frame-background-primary, .row .frame.frame-background-secondary {
    border-radius: 0.5rem;
    padding: 1.5rem 0;
}
.card {
    border-radius: 0.5rem;
    background-size: 30%;
    background-image: url("/fileadmin/bilder/therapiepraxis-amp/pattern.svg");
}
.card-menu .card-title {
    font-size: 1rem;
}
.card-footer {
    display: none;
}

/* carousel */
.carousel-box {
    border-radius: 0.5rem;
    background-size: 120px;
    background-image: url("/fileadmin/bilder/therapiepraxis-amp/pattern.svg");
}

.frame-background-primary {
    border-radius: 0.5rem;
}

@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: 92px;   /* v7: geschrumpfter Zustand groesser (war 70) */
    }
}


.frame-background-primary {
    padding: 1.5rem 0;
}

.card .card-body {
    padding: 1.5rem;
}

.card .card-body .card-title {
    display: flex;
    align-items: center;
    height: 100%;
}

.card .card-body .card-icon {
    display: none;
}

/* ===== News-Modul: Farben der Praxis ===== v2 · 2026-08-10 =====
   Aussehen liegt zentral in fileadmin/theme/css/newsmodul.css, hier stehen
   nur die Werte. Auch .frame-type-list, weil die Ueberschrift des Plugins
   VOR .news steht und die Variablen sonst nicht erbt.
   Vollstaendige Variablenliste: Kopf von newsmodul.css. */
.news, .frame-type-list {
    --nw-layer: "amp v3";        /* Debug-Marker gegen Stale-Cache */
    --nw-accent: #ea5b0c;
    --nw-accent-dark: #cc4f0a;
    --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 {
        border: none;
        border-left: 5px solid #ea5b0c;
        box-shadow:none;
        width: 100%;
        border-radius: 0;
        padding: 0 0 0 0;
        width: 100% !important;
    }
    .navbar-mainnavigation .dropdown-menu .dropdown-icon {
        margin-right: .5rem;
    }
}
@media all and (min-width: 992px) {
    .navbar-mainnavigation .navbar-nav{
        justify-content: flex-end;
        align-items: center;
    }
}
.frame-background-primary .frame a[class=""], .frame-background-primary .frame a:not([class]) {
        color: #ffffff;
    }