@import 'colors.css';

#sp-header {
    height: 60px; !important
    width: 100%;    
}

/* Readmore-Button-Farbe */
body .sppb-btn.sppb-btn-default, body .sppb-btn.sppb-btn-primary, body .sppb-btn.btn-primary, body .btn.sppb-btn-default, body .btn.sppb-btn-primary, body .btn.btn-primary {
    background-color: #0083BA;
    color: #ffffff;
	border-radius: 0px !important;
	padding: 8px 25px;
}

/* Readmore-Button-Farbe nachdem der Button aktiviert wurde */  
body .sppb-btn.sppb-btn-default:hover, body .sppb-btn.sppb-btn-default:focus, body .sppb-btn.sppb-btn-default:active, body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus, body .sppb-btn.sppb-btn-primary:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-default:hover, body .btn.sppb-btn-default:focus, body .btn.sppb-btn-default:active, body .btn.sppb-btn-primary:hover, body .btn.sppb-btn-primary:focus, body .btn.sppb-btn-primary:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active {
    background-color: #0345bf;
    color: #ffffff;
	padding: 8px 25px;
}

.article-list .article .readmore a {
    border-radius: 0px;
}

/* für Blog */
.article-list .article {
    margin-bottom: 100px;
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #0092D0;
}

/* Abstand Blogartikel zur oberen Titelleiste einstellen full screen*/  
@media screen and not (max-width: 575px) {
    .com-content.view-article #sp-main-body .article-info {
        padding: 0 0 220px 0 !important; 
    }
    .com-content.view-article #sp-main-body .article-header {
        padding-top: 10px !important;        
    }
}

/* Abstand Blogartikel zur oberen Titelleiste einstellen mobil*/  
@media screen and (max-width: 575px) {
    .com-content.view-article #sp-main-body .article-info {
        padding: 0 0 60px 0 !important; 
    }
        
}    

/* Farbe vom Artikelinfo wie z.B. Autor, Veröffentlichungsdatum etc setzen */
.article-info {    
    color: #ced4da;
}

/* Textfarbe im Artikel setzen */
.article-list .article .article-header h1 a, .article-list .article .article-header h2 a {
    color: #FFFFFF;
}

.article-list .article .article-header h1 a:hover, .article-list .article .article-header h1 a:active, .article-list .article .article-header h1 a:focus, .article-list .article .article-header h2 a:hover, .article-list .article .article-header h2 a:active, .article-list .article .article-header h2 a:focus {
    color: #ced4da;
}

/* Bildradius in der Blogvorschau einstellen */
.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
    border-radius: 0px;
}

/* Bildradius im Blogartikel einstellen */
.com-content.view-article #sp-main-body .article-media-wrapper img {
    border-radius: 0px;
}

/* Abstand Bild zum Text im Blogartikel einstellen */
.com-content.view-article #sp-main-body .article-body {
        padding-top: 0px !important;
}

/* Abstand Blogartikel zur oberen Titelleiste einstellen */
@media screen and (max-width: 575px) {
    .article-details .article-header h1, .article-details .article-header h2 {        
        padding-top: 10px;
    }
}

/* Abstand Blogartikel zur oberen Titelleiste einstellen full screen*/
/*@media screen and not (max-width: 575px) {
    .com-content. .article-header .article-details-intro {
        padding: 10px 0 250px 0px;        
}*/

.article-body {    
    color: #FFFFFF; 
}

@media screen and not (max-width: 575px) {
    #sp-header {        
        top: 80px; !important
    }
}

.sp-megamenu-parent .sp-dropdown.sp-dropdown-main {
    top: 78%; !important
}
.article-details .pagenavigation {
    display: block;
}

.pagenavigation .pagination .icon-chevron-left:before, .pagenavigation .pagination .icon-chevron-right:before {
    font-family: "Font Awesome 6 Free";
}


.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent li.menu-parent .menu-toggler:after,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent.menu-parent-open>a>.menu-toggler:after, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent.menu-parent-open>.menu-separator>.menu-toggler:after,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, 
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after 
{font-family: "Font Awesome 6 Free"; }

/* Suchbox */
.awesomplete > ul {background: rgba(0,124,176,0.9); }
/*.awesomplete > ul > li {color: white  }
.awesomplete mark { background: #eaff00; }*/

/* Email-Logo */
.sp-contact-info li {
    color: white;
}

/* oben ein Rand ausblenden */
#sp-main-body {
     margin-top: 0px;
}

/* Copyright etwas nach oben schieben 
#sp-footer { 
    margin-top: -20px;
}
*/

/* Grösse auf Handy für Icon Facebook und Insta 
@media (max-width: 575px) {
.fab, .icon-joomla, .fa-brands {
    font-size: 30px;
}
}
*/

/*
@media (max-width: 575px) {
#sp-page-builder .page-content .sppb-section:not(div.sppb-section):first-child {
    margin-top: 50px;
  }
}
*/

/*)
@font-face {
  font-family: 'Bebas Neue local';
  src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: <weight>;
  font-style: bold;
}
*/  
  
@font-face {
  font-family: 'Bebas Neue local';
  src: url('../fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
  font-weight: <weight>;
  font-style: normal;
}

h1, h2, h3
{ font-family: "Bebas Neue local", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  color: #FFF; 
}
  
strong, b  {font-family: "Bebas Neue local", sans-serif;  font-weight: 700;}
h3 {font-size: 34px}
@media (max-width: 575px) {
  h3 {font-size: 24px}
}

html { background-color: var(--_background); }

/* Main Menu Desktop Font settings */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  font-weight: 400; 
  font-family: 'Bebas Neue local' !important; 
  font-size: 18px; 
  color: #fafafa; 
  padding: 0 20px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge){
  font-weight: 400; font-family: 'Bebas Neue local'!important; font-size: 18px; color: #fafafa;
  display: list-item;
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {font-weight: 400; font-family: 'Bebas Neue local' !important; font-size: 18px; color: #fafafa; } 
.sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a  {font-weight: 400; font-family: 'Bebas Neue local' !important; font-size: 18px; color: #fafafa;}
/*Dropdownfläche Hintergrundfarbe und Breite */
.sp-megamenu-parent .sp-dropdown  {
  background: rgba(0,124,176,0.9);
  width: 260px !important;
}
.sp-dropdown .sp-dropdown-inner {background: RGBA(0, 141, 202, 0.7) !important;}
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a{font-weight: 600; color: #C0C0C0 !important;} /* aktiver Haupt-Menupunkt */
/* aktiver Hover-Menupunkt */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
  font-weight: 550; color: #C0C0C0 !important; 
  /*background-color: var(--_menu_hover) !important;
  border: 0px dotted;
  border-width: 100%;*/
  }  
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {font-weight: 550; color: #C0C0C0 !important;} /* aktiver gewählter Menupunkt */

/* Offcanvas-Menu */
/* Titel 1. Ebene */
.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {font-weight: 700; font-family: 'Bebas Neue local', sans-serif; font-size: 19px; color: var(--_offcanvas_Font) !important; } 
.offcanvas-menu .offcanvas-inner ul.menu li.active a {font-weight: 500; font-family: 'Bebas Neue local', sans-serif; font-size: 18px; color: var(--_offcanvas_Font) !important; }
.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {font-weight: 500; font-family: 'Bebas Neue local', sans-serif; font-size: 18px; color: var(--_offcanvas_Font) !important; }
.offcanvas-menu .offcanvas-inner ul.menu>li a, .offcanvas-menu .offcanvas-inner ul.menu>li span {font-weight: 500; font-family: 'Bebas Neue local', sans-serif; font-size: 18px; color: var(--_offcanvas_Font) !important; } 

/* Abstand zwischen Menu-Items */
.offcanvas-menu .offcanvas-inner ul.menu>li {line-height: 200% !important;}

/* Abstand zwischen Suchenbox und Menu */
.offcanvas-menu .offcanvas-inner .sp-module .sp-module-title {margin-top: -40px;}

.offcanvas-menu {
    /*background-color: rgba(0,124,176,0.6); /* #0d6efd99;*/
  background-color: #fefefe;
  color: var(--_offcanvas_Font);
}

/* bei Mobile Phones den oberen Headerteil ausblenden */
@media (max-width: 991px) {
  #sp-header-topbar {visibility: hidden; height: 0px !important; margin: 0px !important;}
  /*#sp-header-topbar { position: fixed; display: block; width: 100%; top: 0; left:0;}*/
  #sp-header {position: fixed; z-index: 99; animation: none; top: 0px !important; }
  #sp-header.header-sticky {position: fixed; top: 0px; animation: none !important;  }
  #sp-main-body {margin-top: 61px !important;}
  
  .logo-image {
    height: 45px !important;
    margin-top: 13px !important;
  }
  /* Burgermenu oberer Bereich mit Logo einfärben */
  .pt-4 {        
    padding-top: 10px !important;
    padding-bottom: 13px !important;
    /*background-color: rgba(0,124,176,0.6);*/
    /*background-image: linear-gradient(0deg, rgba(0, 198, 251, 0.5) 7%, #007cb0 100%); rgba(0,124,176,0.6)*/ 
    background-image: linear-gradient(0deg, #fefefe 0%, var(--_background)  100%); 
}




/* Header: Schriftgrösse Email */
.sp-contact-info li {
    display: inline-block;
    margin: 0px 10px 0px 0px;
    font-family: 'Bebas Neue local';    
    white-space: nowrap;
    font-size: 16px;
}

/* Header: Farbe Email-Icon setzen */
#sp-header-topbar .sp-contact-info {
    color: #fff;
}

a.sppb-person-email:before {
    content: "\f0e0   ";
    font-family: 'Font Awesome 6 Free';
}

#sp-header {
    height: 70px;    !important;
}