/* ===========================================================
   PHYSIO PLÖTZ / ERGO PLÖTZ
   Joomla 6
   Helix Ultimate
   custom.css
=========================================================== */

/*----------------------------------------------------------
Fonts lokal einbinden
----------------------------------------------------------*/

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Roboto-Regular', sans-serif;
}


/*----------------------------------------------------------
FARBEN
----------------------------------------------------------*/

:root{

    --primary:#61c2b2;
    --primary-hover:#4cb2a2;

    --secondary:#7b5630;

    --text:#555555;

    --heading:#2b8ea6;

    --border:#ececec;

    --white:#ffffff;

}


/*----------------------------------------------------------
BODY
----------------------------------------------------------*/

body{

    font-family:Arial,Helvetica,sans-serif;

    font-size:17px;

    line-height:1.7;

    color:var(--text);

    background:#ffffff;

    overflow-x:hidden;

}


a{

    color:var(--heading);

    transition:.3s;
}

a:hover{

    color:var(--primary);

    text-decoration:none;

}


/*----------------------------------------------------------
CONTAINER
----------------------------------------------------------*/

.container,
.sppb-row-container{

    max-width:1180px;

}


/*----------------------------------------------------------
HEADER
----------------------------------------------------------*/

#sp-header{

    background:#ffffff;

    height:110px;

    border:none;

    box-shadow:none;

    transition:.3s;

}

#sp-header.header-sticky{

    background:#ffffff;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

}


.logo img{

    max-height:90px;

}


/*----------------------------------------------------------
HAUPTMENÜ
----------------------------------------------------------*/

.sp-megamenu-parent{

    margin-top:18px;

}


.sp-megamenu-parent > li{

    margin-left:5px;

}


.sp-megamenu-parent > li > a{

    color:#555;

    font-size:24px;

    font-weight:300;

    text-transform:uppercase;

    padding:18px 18px;

    letter-spacing:.5px;

}


.sp-megamenu-parent > li:hover>a,
.sp-megamenu-parent > li.active>a{

    background:var(--primary);

    color:#ffffff;

}


body.ltr .sp-megamenu-parent > li:last-child > a,
.sp-megamenu-parent > li:last-child > a{

    padding:18px 18px !important;



}


/*----------------------------------------------------------
DROPDOWN
----------------------------------------------------------*/

body.ltr .sp-megamenu-parent .sp-dropdown,
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items,
body.ltr .sp-megamenu-parent .sp-dropdown ul,
body.ltr .sp-megamenu-parent .sp-dropdown li,
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items,
.sp-megamenu-parent .sp-dropdown ul,
.sp-megamenu-parent .sp-dropdown li{

    background:#4cb2a2 !important;

    border:none !important;

    border-radius:0 !important;

}


body.ltr .sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown{

    min-width:280px;

    box-shadow:0 5px 20px rgba(0,0,0,.10) !important;

}


body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{

    padding:0 !important;

}


body.ltr .sp-megamenu-parent .sp-dropdown ul,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items,
.sp-megamenu-parent .sp-dropdown ul,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items{

    margin:0 !important;

    padding:0 !important;

    list-style:none !important;

}


body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge),
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:not(.sp-group-title),
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge),
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:not(.sp-group-title){

    display:block !important;

    color:#ffffff !important;

    background:#4cb2a2 !important;

    font-size:24px !important;

    text-transform:uppercase !important;

    font-weight:300 !important;

    padding:18px 18px !important;

    letter-spacing:.5px !important;

    line-height:1.4 !important;

}


body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a,
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus,
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
body.ltr .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a{

    background:var(--primary) !important;

    color:#ffffff !important;

}


/*----------------------------------------------------------
OFFCANVAS
----------------------------------------------------------*/

.offcanvas-menu{

    background:#ffffff;

}

.offcanvas-menu a{

    color:#555;

    text-transform:uppercase;

}

.offcanvas-menu a:hover{

    color:var(--primary);

}


/*----------------------------------------------------------
SLIDER
----------------------------------------------------------*/

.sppb-carousel{

    margin-top:20px;

}

.sppb-carousel img{

    width:100%;

    display:block;

    object-fit:cover;

}


/*----------------------------------------------------------
ÜBERSCHRIFTEN
----------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--heading);

    font-weight:300;

    text-transform:uppercase;

    letter-spacing:.5px;

}

h1{

    font-size:46px;

}

h2{

    font-size:40px;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}


/*----------------------------------------------------------
TEXT
----------------------------------------------------------*/

p{

    margin-bottom:25px;

}


/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

.sppb-btn,
.btn{

    border-radius:0;

    text-transform:uppercase;

    font-weight:400;

    padding:14px 30px;

    transition:.3s;

}


.sppb-btn-primary,
.btn-primary{

    background:var(--primary);

    border:none;

    color:#ffffff;

}

.sppb-btn-primary:hover,
.btn-primary:hover{

    background:var(--primary-hover);

}


/*----------------------------------------------------------
INFOBOX TÜRKIS
----------------------------------------------------------*/

.info-box{

    background:var(--primary);

    color:#ffffff;

    padding:35px;

    text-align:center;

    font-size:34px;

    font-weight:300;

}


/*----------------------------------------------------------
BRAUNE BOX
----------------------------------------------------------*/

.brown-box{

    background:var(--secondary);

    color:#ffffff;

    padding:40px;

}


/*----------------------------------------------------------
SECTIONS
----------------------------------------------------------*/

.sppb-section{

    padding:70px 0;

}

.sppb-addon{

    margin-bottom:30px;

}


/*----------------------------------------------------------
BILDER
----------------------------------------------------------*/

img{

    max-width:100%;

    height:auto;

}


.sppb-addon-image img{

    display:block;

}


/*----------------------------------------------------------
KARTEN
----------------------------------------------------------*/

.card{

    border:none;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}


/*----------------------------------------------------------
FORMULARE
----------------------------------------------------------*/

input,
textarea,
select{

    border:1px solid #dddddd;

    border-radius:0;

    box-shadow:none;

    padding:12px;

}


input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:none;

}


/*----------------------------------------------------------
FOOTER
----------------------------------------------------------*/

#sp-footer{

    background:#ffffff;

    border-top:1px solid var(--border);

    padding:60px 0;

    color:#777777;

}


#sp-footer a{

    color:#777777;

}

#sp-footer a:hover{

    color:var(--primary);

}


/*----------------------------------------------------------
ABSTÄNDE
----------------------------------------------------------*/

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}

.pt-50{

    padding-top:50px;

}

.pb-50{

    padding-bottom:50px;

}


/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media (max-width:991px){

#sp-header{

    height:auto;

    padding:15px 0;

}

.logo img{

    max-height:70px;

}

h1{

    font-size:34px;

}

h2{

    font-size:30px;

}

h3{

    font-size:24px;

}

.info-box{

    font-size:24px;

    padding:25px;

}

.sppb-section{

    padding:40px 0;

}

}


@media (max-width:767px){

body{

    font-size:16px;

}

.container{

    padding-left:20px;

    padding-right:20px;

}

h1{

    font-size:30px;

}

h2{

    font-size:26px;

}

h3{

    font-size:22px;

}

}