/* =========================================
   1. BASIS & HEADER (Sticky)
   ========================================= */
body { 
	font-family: 'Open Sans', sans-serif; 
	color: #333; 
	background-color: #f9f9f9; 
	padding-top: 70px; /* Platz für den fixierten Header */
}

h1, h2, h3, h4, h5 { 
	font-family: 'Montserrat', sans-serif; 
	font-weight: 700; 
}

.top-header {
	background: #fff; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
	height: 70px; 
	display: flex; 
	align-items: center;
}

.header-container { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	width: 100%; 
}

.logo-brand { 
	font-family: 'Montserrat', sans-serif; 
	font-weight: 700; 
	font-size: 24px; 
	color: #132437; 
	text-decoration: none; 
	display: flex; 
	align-items: center; 
}
.logo-brand span { color: #e76828; }
.logo-brand:hover { text-decoration: none; color: #132437; }

.header-contact { 
	display: flex; 
	align-items: center; 
	font-size: 14px; 
}
.header-contact-item { 
	margin-left: 25px; 
	color: #132437; 
	text-decoration: none; 
	display: flex; 
	align-items: center; 
}
.header-contact-item i { 
	color: #e76828; 
	margin-right: 8px; 
	font-size: 16px; 
}
.header-contact-item:hover { 
	color: #e76828; 
	text-decoration: none; 
}

@media (max-width: 768px) { 
	.header-contact { display: none; } 
	.header-container { justify-content: center; } 
}

/* =========================================
   2. HERO SECTION (Bild)
   ========================================= */
.hero-section {
	/* Pfad ggf. anpassen, falls das Bild nicht geladen wird */
	background-image: url('../img/scenery/paket_einpacken.jpg'); 
	background-size: cover; 
	background-position: center; 
	height: 480px; 
	position: relative; 
	z-index: 1; 
	display: block; 
	margin-bottom: 0;
}

.hero-overlay { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(19, 36, 55, 0.4); 
}

/* =========================================
   3. ACTION BOXEN (Überlappend)
   ========================================= */
.action-box-container { 
	position: relative; 
	z-index: 50; 
	margin-top: -100px; /* Zieht Boxen ins Bild */
	margin-bottom: 60px; 
}

.action-box {
	background: #fff; 
	padding: 30px 20px; 
	border-radius: 4px; 
	box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
	text-align: center; 
	height: 100%; 
	border-bottom: 4px solid #e76828; 
	transition: transform 0.3s;
	display: flex; 
	flex-direction: column; 
	justify-content: center;
}
.action-box:hover { transform: translateY(-5px); }

.action-icon { 
	font-size: 2.5rem; 
	color: #e76828; 
	margin-bottom: 15px; 
}

.action-title { 
	font-weight: 700; 
	color: #132437; 
	display: block; 
	margin-bottom: 10px; 
	font-size: 1.1rem; 
	text-decoration: none; 
}
.action-title:hover { color: #e76828; text-decoration: none; }

.action-input { 
	width: 100%; 
	padding: 10px; 
	border: 1px solid #ccc; 
	border-radius: 3px; 
	margin-bottom: 10px; 
	height: 45px; 
}

.btn-action-go { 
	background-color: #e76828; 
	color: white; 
	border: none; 
	padding: 0 20px; 
	border-radius: 3px; 
	cursor: pointer; 
	height: 45px; 
	font-size: 1.2rem; 
	transition: background 0.3s;
}
.btn-action-go:hover { background-color: #c9561e; }

/* =========================================
   4. SLOGAN & BUTTONS
   ========================================= */
.slogan-headline { 
	font-family: 'Montserrat', sans-serif; 
	font-weight: 800; 
	font-size: 2.5rem; 
	color: #132437; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	margin-bottom: 10px; 
}
.slogan-subline { 
	font-family: 'Open Sans', sans-serif; 
	font-size: 1.2rem; 
	color: #e76828; 
	font-weight: 600; 
}

#cc-fixed-wrapper { 
	position: fixed !important; 
	bottom: 20px !important; 
	right: 20px !important; 
	z-index: 2147483647 !important; 
	display: flex !important; 
	flex-direction: column !important; 
	gap: 15px !important; 
}

.cc-round-btn { 
	display: flex !important; 
	justify-content: center; 
	align-items: center; 
	width: 60px; 
	height: 60px; 
	border-radius: 50%; 
	color: white !important; 
	box-shadow: 2px 2px 10px rgba(0,0,0,0.4); 
	font-size: 30px; 
	transition: transform 0.3s ease; 
	text-decoration: none !important; 
}
.cc-round-btn:hover { transform: scale(1.1); }
.cc-btn-blue { background-color: #007bff !important; } 
.cc-btn-green { background-color: #25D366 !important; } 
.cc-btn-mail { background-color: #e76828 !important; }

/* Mobile Optimierung */
@media (max-width: 768px) {
	.hero-section { height: 300px; }
	.action-box-container { margin-top: -50px; margin-bottom: 40px; }
	.action-box { margin-bottom: 20px; }
	.slogan-headline { font-size: 1.8rem; }
}

/* ========== BREADCRUMB ========== */
.breadcrumb-nav {
	background: var(--white);
	border-bottom: 1px solid #e2e8f0;
	padding: 16px 0;
}

.breadcrumb-list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.breadcrumb-list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb-list li:not(:last-child)::after {
	content: '\f054';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 10px;
	color: var(--gray);
	margin-left: 8px;
}

.breadcrumb-list a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--gray-dark);
	font-weight: 500;
	transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
	color: var(--primary-orange);
}

.breadcrumb-list a i {
	font-size: 12px;
}

.breadcrumb-list .current {
	color: var(--primary-orange);
	font-weight: 600;
}