/*second color?     background-color: rgb(20, 110, 153);*/

/* Design Tokens */
:root {
  --color-primary: #193264cc;
  --color-text-dark: #0B1521;
  --color-text-light: #4B5563;
}

/* Breadcrumb Navigation Styling */
.breadcrumb {
  background-color: #ffffff !important;
  padding: 0.75rem 0;
}

.breadcrumb-item {
  color: #6c757d;
}

.breadcrumb-item a {
  color: #6c757d;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #495057;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #495057;
  font-weight: 500;
}

/* FAQ Component Styling */
.faq-section {
  /* No container styling - clean and minimal */
}

.faq-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-question {
  color: #0B1521;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.faq-answer {
  color: #4B5563;
  margin-bottom: 0;
  line-height: 1.6;
}

body {
	font-family: Verdana, sans-serif;
}

html, body {
  height: 100%; /* Damit der Body die volle Höhe einnimmt */
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Wrapper erstreckt sich über die gesamte Höhe des Viewports */
}

.body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1; /* Füllt den verfügbaren Platz, damit der Footer unten bleibt */
}

.main {
	background-color: #f8f8f8;
}

footer {
  background-color: #203243;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  
  p {
  	color: #a6a6a6;
  }
  .nav-link {
  	color: #f9f9f9;
  	&:hover {
  		color: #c9c9c9;
  	}
  }
}

.container {
/*	background-color: #fff;*/
}



h1, h2, h3, h4, h5 {
	color: #104F55;
/*	#40514E*/
/*  #055160*/
}

.gtk-green {
	color: #80B87A;
}

.muted, .muted * {
	color: grey !important;
}

hr {
	margin: 0;
	color: #d8d8d8;
}

ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #80B87A;

	&.disabled {
  	color: gray;
  	pointer-events: none;
	}
}

a:hover {
	color: #47783F;
}

button.btn-link {
	color: #80B87A;
	display: inline;
	text-decoration: none;
	&:hover {
		color: #47783F;
	}
}

.bg-grey {
	background-color: #f8f8f8;
}

.bg-white {
	background-color: #fff !important;
}

.ms-6 {
	margin-left: 2rem!important;
}

@media (min-width: 992px) { 
	.border-right-bottom {
		border-right: 1px solid #d8d8d8;
	}
}

@media (max-width: 991px) { 
	.border-right-bottom {
		border-bottom: 1px solid #d8d8d8;
	}
}

.badge {
	border-radius: 8px;
	padding: 5px;
	font-size: 18px;
}

.badge.badge-active {
	background-color: #80B87A;
}

.badge.badge-inactive {
	background-color: #d9d9d9;
}

.badge.badge-light {
	background-color: #fff;
	color: #104f55;
	font-size: 0.8em;
}

.btn.btn-primary, .btn.btn-cta:hover {
	background-color: transparent;
	font-size: 20px;
	color: #80B87A !important;
	border-radius: 14px;
	border-color: #80B87A;
	padding: 10px;
}

.btn.btn-primary:hover, .btn.btn-cta {
	background-color: #80B87A;
	color: #fff !important;
	border-radius: 14px;
	border-color: #80B87A;
	padding: 10px;
	font-size: 20px;

}

.btn.btn-primary.small {
	padding: 6px;
	font-size: 1rem;
	border-radius: 8px;
}

.btn.btn-primary.filled {
	background-color: #80B87A;
	color: #fff !important;
}



.card.side-box {
	padding: 12px;
	background-color: #f9f9f9;
  border-radius: 14px;
  border-color: transparent;
  color: #145056;	
}

.card.side-box h5 {
	color: #145056;
}

.card.side-box a {
	color: #145056;
	text-decoration: none;
}

/* Layout */

.logo-desktop {
  display: inline;
}

.logo-mobile {
  display: none !important;
}

/* Für Bildschirme mit einer Breite von max. 991px (Mobile) */
@media (max-width: 991px) {
  .logo-desktop {
    display: none !important;
  }

  .logo-mobile {
    display: inline !important;
  }
}


.breadcrumb {
	background-color: #f8f8f8;
}

nav.breadcrumb {
	margin-top: 0px;
	margin-bottom: 0px;
	ol {
		margin: 4px 0 !important;
	}
}


/*navbar*/

.navbar {
	padding: 25px 0;
	border-bottom: 1px solid #f7f7f7;
	background-color: #fff !important;
	--bs-navbar-toggler-border-color: #fff;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

	a {
		color: #508249;

		&:hover {
			color: #80B87A;
		}
	}

	a.nav-link {
		border: 0 solid #fff;
		border-radius: 5px;
		padding: 5px;
		display: inline-block;
		&:hover {
			background-color: #508249;
			color: #fff;
			.badge.badge-primary {
				background-color: #fff;
				color: #3D563A;
			} 
		}
		&.active,
		&.nav-link.active {
			background-color: #508249 !important;
			color: #fff !important;
			.badge.badge-primary {
				background-color: #fff !important;
				color: #3D563A !important;
			}
		}
		.badge.badge-primary{
			font-size: 12px;
			background-color: #508249;
		}

	}

	li.profile .btn-secondary {
		background-color: #80B87A;
		color: #fff;
		border: none;
		&:hover {
			background-color: #508249;
		}
	} 

	ul.dropdown-menu { 
		li a:hover {
			background-color: #fff;
			color: #3D563A;
			font-weight: bold;
		}
		li a.sign-out {
			color: #820000;
			font-weight: bold;
			&:hover {
				color: #bd0909;
			}
		}
	}

	/* Regions Dropdown Styling */
	.regions-dropdown {
		min-width: 280px;
		padding: 0.5rem 0;
		border: none;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		margin-top: 0.5rem;
	}

	.regions-dropdown .dropdown-item {
		padding: 0.75rem 1rem;
		border: none;
		transition: all 0.2s ease;
		text-decoration: none;
		color: #3D563A;

		&:hover {
			background-color: #f8f9fa;
			color: #508249;
		}

		&:active {
			background-color: #e9ecef;
		}
	}

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

	.region-name {
		font-weight: 500;
		font-size: 0.95rem;
	}

	.region-count {
		font-size: 0.8rem;
		color: #6c757d;
		background-color: #e9ecef;
		padding: 0.2rem 0.5rem;
		border-radius: 12px;
		font-weight: 500;
	}

	/* Show all regions link styling */
	.show-all-regions {
		font-weight: 600;
		color: #508249 !important;
		border-top: 1px solid #e9ecef;
		margin-top: 0.5rem;
	}

	.show-all-regions:hover {
		background-color: #fff !important;
		color: #3D563A !important;
	}

	.show-all-regions i {
		margin-right: 0.5rem;
		font-size: 0.9rem;
	}

	/* Dropdown toggle styling */
	.nav-link.dropdown-toggle {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.nav-link.dropdown-toggle i {
		font-size: 0.9rem;
	}

	/* Dropdown toggle active and show states */
	.nav-link.dropdown-toggle.show,
	.nav-link.dropdown-toggle[aria-expanded="true"] {
		background-color: #508249;
		color: #fff;
	}

	.nav-link.dropdown-toggle.show:hover,
	.nav-link.dropdown-toggle[aria-expanded="true"]:hover {
		background-color: #508249;
		color: #fff;
	}

	/* Ensure normal state after dropdown closes */
	.nav-link.dropdown-toggle:not(.show):not([aria-expanded="true"]) {
		background-color: transparent;
		color: #508249;
	}

	.nav-link.dropdown-toggle:not(.show):not([aria-expanded="true"]):hover {
		background-color: #508249;
		color: #fff;
	}

	/* Consistent icon styling for all nav links */
	.navbar-nav .nav-link {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.navbar-nav .nav-link i {
		font-size: 0.9rem;
		width: 1rem;
		text-align: center;
	}

	/* Mobile menu icon alignment */
	@media (max-width: 991.98px) {
		.navbar-nav .nav-link {
			justify-content: flex-start;
			padding: 10px 4px;
		}

		.navbar-nav .nav-link i {
			margin-right: 0.5rem;
			font-size: 22px;
		}

			/* Mobile dropdown positioning */
	.navbar-nav .dropdown-menu {
		position: static !important;
		float: none;
		width: 100%;
		margin-top: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background-color: #f8f9fa;
	}

	.navbar-nav .regions-dropdown {
		min-width: 100%;
		margin-top: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.navbar-nav .regions-dropdown .dropdown-item {
		padding: 0.75rem 1.5rem;
	}

	.navbar-nav .regions-dropdown .dropdown-item:hover {
		transform: none;
		background-color: #e9ecef;
	}

	/* Force dropdown to open downward on mobile */
	.navbar-nav .dropdown {
		position: static !important;
	}

	.navbar-nav .dropdown-menu {
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		inset: auto !important;
	}

	/* Override Bootstrap's dropdown positioning */
	.dropdown-menu.show {
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		inset: auto !important;
	}
	}
	.navbar-toggler {
		border-color: #3D563A;

		&:focus {
			box-shadow: none;
		}

		.navbar-toggler-icon {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%233D563A' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
		}
	}

	

}

.navbar-brand h1 {
	padding-top: 8px;
	font-size: 20px;
}


li.list-group-item {
	border: none;
	padding: 3px 0;
}

.navbar a.menu {
	font-size: 18px;
	color: #80B87A;
	text-decoration: none;
}

.navbar a.menu:hover, .navbar a.menu:active {
	color: #47783F;
}

.bg-highlight {
	background-color: red;
}

button.btn.btn-outline-primary {
	border-color: #80B87A;
	color: #80B87A;
}

a.btn.btn-outline-primary {
	font-size: 14px !important;
	border-color: #80B87A;
	color: #80B87A;	
}

a.btn.btn-outline-primary:hover {
	background-color: #80B87A;
	color: #ffffff !important;
}

button.btn.btn-outline-primary:hover {
	background-color: #80B87A;
	color: #ffffff;
}

label.btn.btn-outline-primary {
	border-color: #80B87A;
	color: #80B87A;		
}

label.btn.btn-outline-primary:hover {
	border-color: #47783F;
	background-color: #47783F;
	color: #fff;
}

label.btn.btn-outline-primary:active, .btn-check:checked+.btn {
	border-color: #80B87A;
	background-color: #80B87A;
	color: #fff;
}

span.badge.bg-primary {
	background-color: #fff !important;
	border: 1px solid #104f55 !important;
	color: #104f55 !important;
	padding: 8px;
}

/* nav-tabs */

.nav.nav-tabs {
	.nav-item {

	}

	.nav-link {	
		color: #508249;
		border: none;
		
		&.active{
			border: none;
			color: #fff;
			background-color: #80B87A;
		}
		&:hover {
			border: none;
			border-bottom: 1px solid #80B87A;
			padding-bottom: 7px;
		}
	}
}

/* Golf Einsteiger Guide Styles */
.step-badge {
	background-color: #193264 !important;
	color: white !important;
}

.step-card {
	background-color: #f8f9fa !important;
	transition: all 0.2s ease;
}

.step-card:hover {
	background-color: #e9ecef !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.bg-info-subtle {
	background-color: #193264cc !important;
	color: #fff !important;
	font-weight: 200;
}

/* Process Card Component */
.process-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.process-card__icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.process-card__icon i {
  color: #FFFFFF;
  font-size: 32px;
}

.process-card__title {
  color: var(--color-text-dark);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.process-card__description {
  color: var(--color-text-light);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
  flex-grow: 1;
}