:root {
	--primary-color: #2563eb;
	--primary-dark: #1d4ed8;
	--primary-light: #60a5fa;
	--secondary-color: #64748b;
	--background-light: #f8fafc;
	--text-primary: #1e293b;
	--text-secondary: #475569;
	--success-color: #22c55e;
}

/* Footer Styling */
footer {
	padding: 2rem 0;
	margin-top: 3rem;
	background-color: white;
	border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-links {
	display: flex;
	justify-content: flex-end;
	gap: 2rem;
}

.footer-link {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
	position: relative;
}

.footer-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.footer-link:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.footer-link:hover::after {
	width: 100%;
}

body {
	background-color: var(--background-light) !important;
	color: var(--text-primary);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

	background: linear-gradient(315deg, #f1f5f9 0%, #93c5fd 50%, #60a5fa 100%);
}

/* Navbar Styling */
.navbar {
	padding: 1rem 0;
	background-color: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px);
}

.navbar-brand {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary-color) !important;
	letter-spacing: 0.5px;
}

.nav-link {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-secondary) !important;
	margin-left: 2rem;
	transition: all 0.3s ease;
	position: relative;
	padding: 0.5rem 0;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.nav-link:hover {
	color: var(--primary-color) !important;
}

.nav-link:hover::after {
	width: 100%;
}

/* Search Container Styling */
.search-container {
	max-width: 800px;
	margin: 50px auto;
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.05);
	background: white;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.search-container:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Form Elements */
.form-control {
	border: 2px solid #e2e8f0;
	padding: 1rem 1.25rem;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	background-color: #f8fafc;
}

.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
	background-color: white;
}

.form-group label {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
}

.form-text {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin-top: 0.75rem;
}

/* Selected Companies Section */
.selected-companies {
	margin-top: 30px;
	padding: 25px;
	border-radius: 15px;
	background: var(--background-light);
	border: 1px solid rgba(0,0,0,0.05);
}

.company-badge {
	margin: 8px;
	padding: 12px 20px;
	border-radius: 30px;
	background: white;
	display: inline-block;
	animation: fadeIn 0.5s;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	transition: all 0.3s ease;
}

.company-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}


.progress {
	height: 24px;
	margin: 30px 0;
	border-radius: 6px;
	background-color: #e2e8f0;
	overflow: hidden;
}

.progress-bar {
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--primary-color);
	background-image: linear-gradient(
	45deg,
	var(--primary-light) 25%,
	transparent 25%,
	transparent 50%,
	var(--primary-light) 50%,
	var(--primary-light) 75%,
	transparent 75%,
	transparent
	);
	background-size: 1rem 1rem;
	font-size: 1rem;        /* Schriftgröße */
	font-weight: 500;       /* etwas fetter */
	line-height: 24px;      /* vertikale Zentrierung */
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Autocomplete Styling */
.ui-autocomplete {
	max-height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 15px;
	border: none;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	padding: 8px;
	margin-top: 5px;
	background: white;
}

.ui-menu-item {
	padding: 12px 20px;
	border-radius: 8px;
	margin: 2px 0;
	border: none;
	transition: all 0.2s ease;
}

.ui-menu-item:hover {
	background-color: var(--background-light);
}

.ui-state-active,
.ui-widget-content .ui-state-active {
	background-color: var(--primary-color) !important;
	border: none;
	margin: 2px 0;
}

.industry-tag {
	font-size: 0.85em;
	color: var(--secondary-color);
	margin-left: 10px;
	padding: 2px 8px;
	background-color: var(--background-light);
	border-radius: 4px;
	font-weight: 500;
}

.ui-state-active .industry-tag {
	background-color: rgba(255,255,255,0.2);
	color: white;
}
/* Button Styling */
.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	padding: 12px 30px;
	font-weight: 600;
	letter-spacing: 0.3px;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

#resultButton {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { transform: scale(1); box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3); }
	50% { transform: scale(1.05); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); }
	100% { transform: scale(1); box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3); }
}

/* Modal Styling */
.modal-content {
	border: none;
	border-radius: 15px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.modal-header {
	border-bottom: 1px solid rgba(0,0,0,0.05);
	padding: 1.5rem;
}

.modal-body {
	padding: 1.5rem;
	color: var(--text-secondary);
}

.modal-body strong {
	color: var(--text-primary);
	font-size: 1.1rem;
}

.modal-title {
	color: var(--text-primary);
	font-size: 1.5rem;
}

.modal .close {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.modal .close:hover {
	opacity: 1;
}






/* Section Headings */
h2 {
	color: var(--text-primary);
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.text-muted {
	color: var(--text-secondary) !important;
}

.btn-link:focus {
	outline: none;
	box-shadow: none;
	color: var(--primary-color);  /* zeigt den Focus-State durch Farbänderung an */
}


/* FAQ Accordion Styling */
.accordion {
	max-width: 800px;
	margin: 0 auto;
}

.card {
	border: none;
	margin-bottom: 1rem;
	background: transparent;
}

.card-header {
	background: white;
	border: none;
	padding: 0;
}

.btn-link {
	color: var(--text-primary);
	font-weight: 600;
	text-decoration: none;
	padding: 1.25rem;
	width: 100%;
	text-align: left;
	position: relative;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	transition: all 0.3s ease;
}

.btn-link:hover {
	color: var(--primary-color);
	text-decoration: none;
	transform: translateX(5px);
}

.btn-link::after {
	content: '+';
	position: absolute;
	right: 1.25rem;
	transition: transform 0.3s ease;
}

.btn-link:not(.collapsed)::after {
	transform: rotate(45deg);
}

.card-body {
	padding: 1.25rem;
	background: white;
	margin-top: 0.5rem;
	border-radius: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	line-height: 1.6;
	color: var(--text-secondary);
}