/* Variablen */
:root {
    --njo-font-size: 100%;
    /* Font Grösse für alles */
}

/**
   * WEBFONTS
   * generated using webfonts.gidix.net
   * 
   * 23.08.2023, 19:02
   */

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Bold_Italic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Condensed.ttf');
    font-weight: 400;
    font-style: normal;
    font-stretch: condensed;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Light_Italic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu_Medium_Italic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../Ubuntu_Italic.ttf');
    font-weight: 500;
    font-style: italic;
}




body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
    font-family: 'Ubuntu';
}

p {
    font-size: 1rem; /*var(--njo-font-size) !important;*/
}

/* Artikel Header Opacity für Kategorie und Datum ändern */
.article-details .article-details-intro .article-info,
.article-details .article-details-intro .article-info span {
    opacity: 1;
}


.sp-megamenu-parent>li a {
    font-size: var(--njo-font-size) !important;
}

/* T I P P   Titel Farbe ändern */
.sppb-feature-box-title>spantitle {
    color: #0096FF;
}

/* Bild Aussehen beim Feature Artikel Karusell verändern */
body.com-content.view-category .top-section .sppb-addon-articles-carousel.njo_acticle_scroller .sppb-articles-carousel-img {
    border-radius: 30px;
    border-width: 2px;
    border-color: #0096ff;
    border-style: solid;
}

body.com-content.view-category .top-section .sppb-addon-articles-carousel.njo_acticle_scroller .sppb-articles-carousel-img img {
    border-radius: 30px;
}

/* Das gleiche für das Intro Bild in der Artikel Blog Liste */
.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: 30px;
    border-width: 4px;
    border-color: #0096ff;
    border-style: solid;
    



}
.article-list .article .article-intro-image , 
.article-list .article .article-featured-video , 
.article-list .article .article-featured-audio , 
.article-list .article .article-feature-gallery  {
    border-radius: 30px;
    padding: 0px 0px 0px 0px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
    margin-top: 20px;

}

/* Weiterlesen Button Aussehen verändern */
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: #0096ff75;
    color: black;
    border-radius: 20px;
}

body .sppb-btn.sppb-btn-default :hover,
body .sppb-btn.sppb-btn-primary :hover,
body .sppb-btn.btn-primary :hover,
body .btn.sppb-btn-default :hover,
body .btn.sppb-btn-primary :hover,
body .btn.btn-primary :hover {
    background-color: #0096ff;
    color: #ffffff;
}

/* Bild Aussehen im Artikel selbst verändern */
.com-content.view-article #sp-main-body .article-media-wrapper img {
    border-radius: 30px;
    border-width: 2px;
    border-color: #0096ff;
    border-style: solid;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
}


/* Tags aussehen lassen wie der Weiterlesen Button */
.tags {
    margin: 10px;
    margin-top: 20px;
    /*-0.3125rem;*/
}

.tags>li a {
    background-color: #0096ff75;
    color: black;
}

/* Maximale Breite des Artikels setzen, bzw. auf Auto setzen */
.com-content.view-article #sp-main-body .article-body {
    max-width: none;
}

/* Suchfeld, Suchbutton und Erweiterte Suche Button etwas auseinander ziehen */
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 20px;
}

/* Rundung und Background des "Kontakt" Button ändern */
.contact_button_class .sppb-button-wrapper {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
}

.contact_class .sppb-btn.sppb-btn-primary.sppb-btn-rounded,
.contact_button_class .sppb-btn.sppb-btn-primary.sppb-btn-rounded
{
	border-radius: 20px;
    color:black;
}

.contact_class .sppb-btn.sppb-btn-primary.sppb-btn-rounded:hover,
.contact_button_class .sppb-btn.sppb-btn-primary.sppb-btn-rounded:hover
{
	border-radius: 20px;
    color:white;
}

/* Background Image von allen Seiten ändern */
body.default-titl {
	background-image: url("../../../images/Background/Artikel_Background_1920x550.jpg");
	background-size: contain;
}

/* Korrekturen bei "Ähnliche Rezepte"
   - Margin Titel
   - Datum blau
   - Textgrösse
*/

.related-article-list-container .related-article-title {
	font-size: 200%;
	margin-left: 0px;
}
.related-article-list-container .article-list .article .article-info,
.related-article-list-container .article-list .article .article-info span{
    opacity: 1;
    color: #0096ff;
    font-size: 100%;
}

/* Anpassungen an der Bewertung */
.article-details .article-ratings-social-share {
    margin: 0;
    opacity: 1;
    padding-left: 15px;
}

/* Anpassung am Module (left) Search */
.sp-module.simple.search_class .sp-module-content {
    border: 2px solid #0096ff !important;
    border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
    margin-top: 20px;
}

/* Anpassung am Module (left) Neue Rezepte */
.sp-module.neue_rezepte_class {
    border: 2px solid #0096ff !important;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
}

/* Anpassung am Module (left) Kategorien */
.sp-module.kategorien_class {
    border: 2px solid #0096ff !important;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
}
.blog-list-wrapper .left-sidebar .sp-module-title {
    padding-left: 0px;
}

/* Anpassung am Modul (left) Tags */
.sp-module.last-mod.tag_class {
    border: 2px solid #0096ff !important;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
    border-radius: 10px;
    padding: 20px;

}
.blog-list-wrapper .left-sidebar .last-mod .sp-module-title, 
.blog-list-wrapper .left-sidebar .last-mod .sp-module-content
{
    padding-left: 20px;
}

/* Artikel Bilder Startseite */
.sppb-addon.sppb-addon-articles.njo-artikel-startseite .sppb-carousel-inner>.sppb-item>a>img, 
.sppb-addon.sppb-addon-articles.njo-artikel-startseite .sppb-carousel-inner>.sppb-item>img, 
.sppb-addon.sppb-addon-articles.njo-artikel-startseite .sppb-img-responsive
{   
    border-radius: 30px;
    border-width: 2px;
    border-color: #0096ff;
    border-style: solid;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66); 
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.66);
    width: 80%;
}

/* Artikel Header Startseite */
.sppb-addon.sppb-addon-articles.njo-artikel-startseite h3,
.sppb-addon.sppb-addon-articles.njo-artikel-startseite h3 >a
{
    font-size: 20px !important;
    margin: 1.5rem 0 1.25rem 0;
    font-weight: 500;
    color: black !important;
}
.sppb-addon.sppb-addon-articles.njo-artikel-startseite h3 >a:hover
{
    font-size: 20px !important;
    margin: 1.5rem 0 1.25rem 0;
    font-weight: 500;
    color: #0096ff !important;
}

.sppb-addon.sppb-addon-articles.njo-artikel-startseite .sppb-article-introtext
{
    margin-bottom: 1.25rem;
}

.sppb-addon.sppb-addon-articles.njo-artikel-startseite a.sppb-readmore {
    background-color: #0096ff75;
    color: black;
    border-radius: 59px;
    text-transform: capitalize;
    padding: 11px 26px;
    border: none;
    line-height: 1.43;
    white-space: normal;
}
.sppb-addon.sppb-addon-articles.njo-artikel-startseite a.sppb-readmore:hover {
    background-color: #0096ff;
}

/* Mega Menu Artikel */
.mega-menu-articles .sppb-addon-article .sppb-article-info-wrap .sppb-article-meta span {
    color: #0096ff;
    margin-top: 10px !important;
}

/* Mega Menu Menüliste */
.sp-megamenu-parent .sp-dropdown-mega .sp-mega-group>li>a {
    color: #000000 !important;
}
.sp-megamenu-parent .sp-dropdown-mega .sp-mega-group>li>a:hover {
    color: #0096ff !important;
}

/* Error 404 Seite */
.error-page body {
    background-color: #000000 !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../../../images/Background/404_Background.jpg") !important;
}
html.error-page .error-message{
     font-family: 'Ubuntu';
     color: #ffffff;
}
html.error-page .error-code{
     font-family: 'Ubuntu';
     color: #ffffff;
}

/* Erscheinungsbild auf meiner "Über mich" Seite */
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li.active > a, 
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li.active > a:hover, 
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li.active > a:focus {
    color: #0096ff !important;
    font-size: 200%;
}
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li > a:hover, 
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li > a:focus {
    color: #0096ff !important;
    font-size: 200%;
}
.sppb-addon.sppb-addon-tab.njo-ueber-mich-tabs .sppb-nav > li > a {
    color: #000000 !important;
    font-size: 200%;
}