/* =========================================================
   project.css – Oel-Hydrauliker GmbH
   Reihenfolge: Basis → Layout → Jumbotron/Header → Typografie
				→ Icon-Überschriften → Media Queries (mobile first)
   ========================================================= */

/* ---------- Basis ---------- */

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

.tel-link {
	color: black !important;
}

.tel-icon {
	margin-top: -.35rem;
	margin-right: 10px;
}

.internal-link::before {
	content: "\f14c";
}


/* ---------- Layout ---------- */

.main-content .container {
	background-color: #fff;
	padding: 50px;
}

.breadcrumb {
	background-color: #fff;
	border-radius: 0;
	height: 75px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 30px 15px;
	font-style: italic;
}

#page-1 .breadcrumb {
	display: none;
}

#page-1 #page-content {
	margin-top: 20px !important;
}


/* ---------- Jumbotron / Kopfbereich ---------- */

/* Logo-Spalte links */
#c2 figure.mx-auto {
	margin-right: 0 !important;
}

#c3 {
	margin-top: 20px;
	margin-right: 15px;
	margin-left: 20px;
}

#c4 {
	font-size: 20px;
	font-weight: bold;
	margin-top: auto;
	margin-right: 30px;
}

#c4 svg {
	height: 30px;
	margin-right: 11px;
	margin-bottom: 8px;
}

#c5 > div {
	height: 60px;
}

#s1-2 {
	display: none;
}

/* Kopfbild rechts: prozessiertes Bild ist schmaler als die Spalte
   (mx-auto erzeugt sonst je 4px weißen Rand) */
.jumbotron .gallery figure.image {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0 !important;
}

.jumbotron .gallery figure.image img {
	width: 100%;
	height: auto;
}


/* ---------- Typografie ---------- */

h1,
h2 {
	padding-bottom: 9px;
	margin: 0 0 40px 0;
	border-bottom: 1px solid #eee;
	text-transform: uppercase;
	font-size: 36px;
}


/* ---------- Überschriften mit Icon (Startseite) ---------- */

#c8 .mainheader,
#c9 .mainheader,
#c10 .mainheader,
#c11 .mainheader,
#c12 .mainheader {
	padding-left: 35px;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	background-position: left center;
	background-repeat: no-repeat;
}

#c8 .mainheader  { background-image: url('Icons/Icon_Hydraulikzylinder.svg'); }
#c9 .mainheader  { background-image: url('Icons/Icon_Palfinger-Service.svg'); }
#c10 .mainheader { background-image: url('Icons/Icon_Hydraulikaggregate.svg'); }
#c11 .mainheader { background-image: url('Icons/Icon_Instandhaltung.svg'); }
#c12 .mainheader { background-image: url('Icons/Icon_Reperaturservice.svg'); }

#tel-icon { 
	background-image: url('Icons/Icon_Telefon.svg');
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: -3px;
}

/* ---------- ≥ 992px (lg) ---------- */

@media (min-width: 992px) {

	body {
		background-color: #eee;
	}

	#page-content {
		padding: 50px;
		background-color: #fff;
		margin-bottom: 60px;
	}

	#s1-2 {
		display: block;
	}

	#c5 > div {
		height: 230px;
	}

	.main-navbarnav .nav-item {
		border-right: 1px solid var(--bs-nav-link-hover-color);
	}

	.main-navbarnav .nav-item:last-child {
		border-right: none;
	}

	.tx-powermail .row {
		margin-bottom: 13px;
	}

}


/* ---------- < 576px (xs) ---------- */

@media (max-width: 575.98px) {

	#page-wrapper .container:nth-child(2) {
		padding-left: 0;
		padding-right: 0;
	}
	
	#page-wrapper > .container:first-child {
		padding-left: 0;
		padding-right: 0;
	}
	
	h1, h2 {
	  padding-bottom: 9px;
	  margin: 0 0 40px 0;
	  border-bottom: 1px solid #eee;
	  text-transform: uppercase;
	  font-size: 24px;
	}
	
	.main-content.pt-5 {
		padding: 0 !important;
	}
	
	.main-content .container {
	  padding: 16px;
	}
	

}