/*
* Kunde: Hochadel Karosseriebau
* Domain: www.jh-karosserie-lack.de
* Autor: Alexander Hammer 
*
* Datum: 17:17 Donnerstag, 29. Januar 2026
* Inhalt: CSS Datei für Hochadel - Neue Seite (Joomla 6.x)
*
*	Grün:		#359B3B
*	Grün hell:	#41BE49
*	Grau HEX:	#686e78
*	Grau RGB: 	rgba(77,85,96,0.85)
*/


/* ---=== Allgemein START ===--- */
.sppb-text-center .sppb-title-heading::after {
	background: url(/images/title-pattern.png) center center no-repeat;
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	left: 0px;
	padding-top: 50px !important;
	margin: auto;
}

/* Überschrift rechte Spalte und über Galerie */
h3.sppb-addon-title, h3.sppb-media-heading {
	color: #359B3B;
	font-size: 1.6rem;
	font-weight: 500;
	margin: 7px 0px 5px !important;
}

span.sppb-blocknumber-number{
	background: linear-gradient(135deg, #359B3B, #686e78);
}

/* Formatierung Top-Bar */
#sp-top-bar {
	background: #40464F !important;
	font-family: 'Shadows Into Light',cursive;
}

/* Header Navigation */
.sp-megamenu-parent > li > a {
	color: #fff;
}

/* Header Navigation */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	transition: all 500ms ease 0s;
	outline: none;
}

/* Header Navigation */
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
	font-size: 14px;
	color: #359B3B;
	text-transform: uppercase;
	font-weight: 600;
	transition: all 500ms ease 0s;
	outline: none;
}

/* Header Navigation */
.sp-megamenu-parent > li:hover > a {
	color: #359B3B;
}

/* Header Navigation */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
	color: #359B3B;
}

/* Header Navigation */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
	color: #359B3B;
}

/* Header Navigation */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Header Hintergrundfarbe */
#sp-header {
	background: rgba(77,85,96,0.95);
}

/* Header Kontaktaufnahme - Farbige Hintergrundbox */
#sp-top-bar .sp-contact-header {
	background-color: #359B3B;
	padding: 10px;
	margin: -8px;
}

/* Header Hintergrundbild - Farbiges Overlay */
.sppb-addon-sp-slider .sp-item .sp-background::after {
	background: rgba(77,85,96,0.65);
}

/* Drop-Down Menü - Hintergrundfarbe */
li.sp-menu-item:hover {
	background-color: rgba(77,85,96,0.35);
}

/* Drop-Down Menü - Padding */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
	padding: 14px 0px 12px 12px;
}

/* Drop-Down Menü - verhindere Padding, wegen Deklaration oberhalb.  */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	padding: 0px;
}

/* Button Anpassungen + Hover*/
.btn-primary, .sppb-btn-primary {
	border-color: #359B3B;
	background-color: #359B3B;
}
.btn-primary:hover, .sppb-btn-primary:hover {
	background: #41BE49;
	border-color: rgba(77,85,96,0.85);
}

/* Button Hintergrund */
.sppb-sp-slider-button .sp-slider-btn-text {
	background: #359B3B;
	border-radius: 4px;
}

/* Kundenstimme - Schrift für Art der Leistung */
.styled-font {
	font-family: 'Shadows Into Light',cursive;
	color: #359B3B;
	font-size: 14px;
}

/* Leistungen - Galerie am Seitenende */
.sppb-gallery li {
	padding: 7px !important;
}

/* Seite Kontakt - Icons-Formatierung */
.info-style-one ul li .icon-box {
	background: #359B3B;
	color: #fff;
	font-size: 24px;
	font-weight: normal;
	height: 50px;
	left: 0;
	line-height: 50px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 50px;
}

/* ---=== Allgemein ENDE ===--- */

/* Home - Anspruch Aufzählung */

/**/
.promise_home .sppb-icon-inner{
	
	color: #ffffff:
	
	/*
	background-color:#fff;
    border:1px solid red;    
    height:100px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:100px;
	*/
}

/* Symbol an der Breadcrumb entfernen */
.icon-location::before {
	display: none;
}

/* Stelle die breadcrumb ohne Hintergrund dar */
.breadcrumb {
	background-color: transparent ;
}

/* Anker Standard-Farbe*/
a {
	color: #359B3B;
}

/* Eigener Trenner in der Breadcrumb*/
.breadcrumb-item + .breadcrumb-item::before {
	content: url('/images/arrow.png');
}

/* Farbe Hover Breadcrumb*/
nav:not(.navhelper-1) .breadcrumb a:hover {
	color: #8e6520;
}



/* ---=== Fußbereich START ===--- */

/* Fußbereich - Hintergrundfarbe */
#sp-footer, #sp-bottom {
	background: #4d5560;
	color: #fff;
}

/* Abstände Footer */
#sp-bottom {
	padding: 0;
}

/* Fußbereich - Formatierung Überschriften */
h2.sppb-addon-title {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 30px !important;
	text-transform: capitalize;
}

/* Fußbereich - Formatierung Icons */
.fas, [class^="icon-"], [class*=" icon-"], .fa-solid {
	color: #359B3B;
}

/* Fußbereich - Quicklinks anpassen */
#sp-bottom .sp-module ul > li > a {
	color: #ffffff;
}

/* Fußbereich - Quicklinks anpassen */
#sp-bottom .sp-module ul > li > a:hover {
	color: #359B3B;
	/*border-bottom-style: dotted;*/
}

/* Fußbereich - Auzählungszeichen Quicklinks */

/*
 .quicklinks li::before {
	background: #3f4828 none repeat scroll 0 0;
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 8px;
	width: 6px;
}
*/
/*
#sp-bottom .sp-module ul > li::before {
	background: #3f4828 none repeat scroll 0 0;
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 8px;
	width: 6px;
}
*/
/*
#sp-bottom .sp-module ul > li::before {
	background: #3f4828 none repeat scroll 0 0;
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 8px;
	width: 6px;
}
*/


/* ---=== Fußbereich ENDE ===--- */



/* ---=== Mobile Ansicht - START ===--- */

@media only screen and (max-width: 768px) {
	
	/* Verberge die Top-Position oberhalb Logo und Navi  */
    #sp-top-bar { 
        display: none; 
    }

    /* Slideshow Startseite - Verstecke die Punkte */
	.sp-dots { 
        display: none; 
    }

	/* Off Canvas Menü - Hintergrund für Header mit Logo */
	div.justify-content-between{
		background-color: rgba(77,85,96,0.85);
	}

	/* Slideshow Startseite - Schriftgröße Überschrift */
	div.jb-slideshow h2
	{
		font-size: 1.4rem;
	}

	/* Slideshow Startseite - Schriftgröße Button */
	.sppb-sp-slider-button .sp-slider-btn-text {
		font-size: 0.66rem;
	}

}

/* Menü - Farbe Standard */
.offcanvas-menu .offcanvas-inner ul.menu > li a, 
.offcanvas-menu .offcanvas-inner ul.menu > li span
{
	color: #686e78;
}

/* Menü - Farbe Aktiv od. Hover */
.offcanvas-menu .offcanvas-inner ul.menu > li a:active, 
.offcanvas-menu .offcanvas-inner ul.menu > li span:active,
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, 
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus, 
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover, 
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus,
.offcanvas-menu .offcanvas-inner ul.menu li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active ul li.active > a
{
	color: #359B3B;
}

/* ---=== Mobile Ansicht - ENDE ===--- */