/*
	[Table of contents]

	## Shortcodes
  		-- Soft Scroll html
		-- Photos Slider
			- Purchase
			- See More
		-- Photos Slider2
		-- Choose Use
			- Section Header
			- Choose Carousel
		-- Book Details
			- Booking Details Form
		-- What We Do
			- We Do More
			- What We Do Box
				- More Service
		-- Members
			- Member Carousel
				- Driver Info
					- Driver Skill
					- Driver Type
				-- Member Style2
		-- Testimonial
		-- Counter App
			- Counter
			- Statistics Box
			- Get Mobile
				- Get Mobile Content
				- Get Mobile Playstore
		-- Blog
			- Section Header
			- Blog Post List
			- Entry Cover
				- Post Meta
				- Entry Meta
					- Meta Inner
						- By line
						- Post Comment
					- Meta Inner
						- Post Date
						- Tags
			- Blog Content
				- Entry Title
				- Entry Content
		-- Vehicle Fleet		
		-- Blog Banner
		-- Faq Section
			-- Accordion
		
	## Responsive	
		-- min-width: 1551 to max-width: 1750
		-- min-width: 1201 to max-width: 1550
		-- min-width: 992 to max-width: 1200
		-- min-width: 768 to max-width: 991
		-- max-width: 767
		-- max-width: 991
		
*/

/* ## Shortcodes */

/*Soft Scroll html */
html {
  scroll-behavior: smooth;
}

/* -- Photos Slider */
.photos-slider .item::before {
  position: absolute;
  content: "";
  background-color: #000;
  opacity: 0.7;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.photos-slider .carousel-caption {
  bottom: 35%;
}
.photos-slider .carousel-caption h2 {
  font-size: 52px;
  font-weight: 700;
}
.photos-slider .carousel-caption p {
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 50px;
  padding: 0 145px;
  line-height: 25px;
}

/* - Purchase */
a.purchase {
  font-weight: 700;
  /*background-color: #de302f;*/
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
  color: #fff;
  padding: 10px 27px;
  border-radius: 15px;
  text-decoration: none;
  margin-right: 12px;
}

/* - See More */
a.see-more {
  font-weight: 700;
  background-color: transparent;
  color: #fff;
  padding: 8px 27px;
  border-radius: 15px;
  border: 2px solid #fff;
  text-decoration: none;
}
a.purchase:hover,
a.see-more:hover {
  transition: all 1s ease 0s;
  background: #000;
  border: none;
}

/* -- Choose Us */
.choose-us {
  background-color: #f8f8f8;
}

/* - Section Header */
.section-header {
  margin-bottom: 60px;
}
.section-header h3 {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 1px;
  margin-top: 0;
  text-align: center;
}
.choose-us-box {
  position: relative;
  margin-bottom: 60px;
  max-width: 320px;
}
.choose-img-box {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.choose-img-box img {
  margin: 0;
}
.choose-img-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  height: 65px;
  background-color: #f8f8f8;
  transform: skewY(-10deg);
}
.choose-us-content-box {
  position: absolute;
  left: 20px;
  bottom: -55px;
  background-color: #fff;
  padding: 30px 23px 30px 30px;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 2px 2px 0 #ededed;
  z-index: 1;
}
.choose-us-content-box,
.choose-us-content-box::before,
.choose-us-content-box h3,
.choose-us-content-box p,
.choose-us-content-box a {
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.choose-us-content-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -29px;
  height: 60px;
  background-color: #fff;
  transform: skewY(-10deg);
  z-index: -1;
}
.choose-us-content-box::after {
  content: "";
  position: absolute;
  left: 0px;
  right: -2px;
  top: -29px;
  height: 59px;
  background-color: #ededed;
  transform: skewY(-10deg);
  z-index: -2;
}
.choose-us-box:hover .choose-us-content-box::before {
  background-color: #de302f;
}
.choose-us-content-box h3 {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  margin: 0;
  padding-bottom: 10px;
}
.choose-us-content-box p {
  font-size: 13px;
  color: #999999;
  text-align: left;
  line-height: 25px;
  margin-bottom: 20px;
}
.choose-us-content-box a {
  text-decoration: none;
  color: #de302f;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  float: right;
  clear: both;
  padding-right: 5px;
}
.choose-us-box:hover .choose-us-content-box a,
.choose-us-box:hover .choose-us-content-box p {
  color: #fff;
}
.choose-us-box:hover .choose-us-content-box {
  background-color: #de302f;
  color: #fff;
}

/* -- Book Details */

/* - Booking Details Form */

/* -- What We Do */
.what-we-do {
  position: relative;
}
.what-we-do .image-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 34.01%;
}

/* - We Do More */
.we-do-more h3 {
  font-size: 26px;
  color: #777;
  margin: 0;
}
.we-do-more h2 {
  font-size: 34px;
  color: #222;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 18px;
}
.we-do-more p {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

/* - What We Do Box */
.what-we-do-box {
  display: inline-block;
  margin-top: 40px;
  position: relative;
  text-align: left;
  padding-left: 70px;
}
.what-we-do-box span {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 20px;
}
.what-we-do-box > img {
  position: absolute;
  left: 0;
  top: 36px;
}
.what-we-do-box > a {
  text-align: left;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  color: #de302f;
  letter-spacing: 1px;
  position: relative;
  text-transform: uppercase;
}
.what-we-do-box > a::after {
  position: absolute;
  content: "...";
  font-size: 15px;
  top: -5px;
  right: -17px;
}
.what-we-do-box a:hover {
  color: #000;
}
.what-we-do-box p {
  color: #777;
  font-size: 14px;
  line-height: 25px;
}
.what-we-do .col-md-6:last-child .what-we-do-box,
.what-we-do .col-md-4:last-child .what-we-do-box {
  padding-left: 0;
}
.what-we-do-box .more-service a {
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
  padding: 15px 35px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 5px;
  margin-top: 5px;
  display: inline-block;
  margin-left: 0;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 15px;
}
.what-we-do-box .more-service:hover a {
  background-color: #181818;
  color: #fff;
  transition: all 1s ease-in-out;
}

/*Ordered List Cards */
.ordered-list-cards {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.card {
  position: relative;
  height: 50px; /* Feste Höhe statt max-height */
  margin-bottom: 15px;
  background-color: white;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, height 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Gleiche Übergangsdauer mit besserer Timing-Funktion */
}
.card:hover,
.card.active {
  transform: scale(1.05);
  height: var(--content-height, auto); /* Dynamische Höhe basierend auf Inhalt */
}
.card-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px; /* Feste Höhe für Header */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  border-radius: 50px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Gleiche Übergangszeit wie Höhe */
}
.card-header h3 {
  margin: 0;
  font-size: 24px;
}
.card-content {
  padding: 60px 95px 20px; /* Erhöhtes oberes Padding, damit Inhalt unter dem Header beginnt */
  opacity: 0;
  transition: opacity 0.3s ease 0.3s; /* Verzögerung der Opazität, um zuerst die Höhe anzupassen */
}
.card.active:nth-child(odd) .card-content p {
  transform: translateX(10px);
}
.card.active:nth-child(even) .card-content p {
  transform: translateX(-10px);
}
.card.active .card-header {
  transform: translateX(-90%);
}
.card.active:nth-child(even) .card-header {
  transform: translateX(90%);
}
.card.active .card-content {
  opacity: 1;
}
.bg-1, .bg-2, .bg-3, .bg-4, .bg-5 {
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
}
.card-header .number {
  display: none;
  font-size: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.card.active:nth-child(odd) .card-header .number {
  display: block;
  right: 20px;
}
.card.active:nth-child(even) .card-header .number {
  display: block;
  left: 20px;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
  .card-header h3 {
    font-size: 18px; /* Kleinere Schriftgröße für Titel */
  }
  
  .card-header .number {
    font-size: 24px; /* Kleinere Nummer */
  }
  
  .card-content {
    padding: 50px 40px 20px 40px; /* Reduziertes Padding */
  }
  
  .card-content p {
    font-size: 14px; /* Kleinere Schriftgröße für Text */
  }
  
  /* Verbesserte Touch-Interaktion */
  .card {
    margin-bottom: 10px; /* Etwas weniger Abstand */
  }
  
  /* Anpassung der Gesamtbreite */
  .ordered-list-cards {
    max-width: 100%;
    padding: 0 15px;
  }
}

/* Noch kleinere Bildschirme */
@media (max-width: 480px) {
  .card-header h3 {
    font-size: 16px;
  }
  
  .card-content {
    padding: 40px 20px 15px 20px;
  }
  
  .card.active:nth-child(odd) .card-header .number {
    right: 15px;
  }
  
  .card.active:nth-child(even) .card-header .number {
    left: 15px;
  }
}
/*card end*/

/* -- Members */
.members {
  display: inline-block;
  width: 100%;
  background-color: #f8f8f8;
  text-align: center;
}

.member-carousel {
  width: 80%;
  display: inline-block;
}

.member-carousel .member-item {
  margin: 10px 0;
  position: relative;
  transition: all 0.2s ease-in-out;
  overflow-x: hidden;
}

.member-carousel .member-item > img {
  display: block;
  max-width: 100%;
}

.member-carousel .item:hover {
  position: relative;
  transform: scale(1.1);
  z-index: 30;
}

/* - Driver Info */
.driver-info {
  padding: 17px 30px 15px;
  background-color: #f0f0f0;
  text-align: center;
}

.driver-info,
.driver-info .driver {
  display: inline-block;
  width: 100%;
}

.driver-info .driver {
  text-align: left;
}

.driver-info .driver > h3 {
  color: #222;
  font-size: 15px;
  text-align: left;
  margin: 0;
  font-weight: 600;
  margin-bottom: 15px;
  display: inline-block;
  width: 100%;
}

.driver-info .driver h3 span {
  color: #777;
  font-size: 13px;
  float: right;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
}

.driver-info > p {
  text-align: left;
  font-size: 14px;
  text-transform: capitalize;
}

.driver-info > p span {
  float: right;
}

.driver-info i {
  color: #f7b731;
}

.member-carousel .member-item:hover {
  cursor: pointer;
}

/* Allgemeine Hover-Effekte für Member-Carousel außerhalb von Vehicle Fleet */
.members .member-carousel .member-item:hover {
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.52);
}

.members .member-carousel .member-item:hover .driver-info {
  background-color: #f7b731;
}

.members .member-carousel .member-item:hover .driver-info span,
.members .member-carousel .member-item:hover .driver-info > p {
  color: #e9e9e9;
}

.members .member-carousel .member-item:hover .driver-info > h3,
.members .member-carousel .member-item:hover .driver-info i {
  color: #fff;
}

.we-are-hire {
  width: 20%;
  background-color: #f0f0f0;
  margin: 10px 0;
}
.we-are-hire span {
  font-weight: 600;
  color: #222;
  font-size: 20px;
  display: inline-block;
  float: none;
  padding: 12px 0;
}
/* -- Member Style2 */
.member-item .driver-info ul,
.member-item .driver-info p {
  margin-bottom: 0;
}
.member-item .driver-info ul {
  float: right;
}
.member-item ul li {
  list-style: none;
  display: inline;
}
.member-carousel .member-item ul > li {
  float: left;
  text-align: left;
  margin-left: 10px;
  opacity: 0.5;
}
.member-carousel .member-item ul > li:hover {
  opacity: 1;
}

/* -- Testimonial */
.testimonial {
  text-align: center;
  background: url("../images/testimonial/testimonial_new1.jpg");
  display: inline-block;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}
.testimonial::before {
  position: absolute;
  content: "";
  background-color: #fff;
  opacity: 0.9;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
}
.testimonial > img {
  position: relative;
}
.testimonial > img:first-of-type {
  position: relative;
  top: -8px;
}
.testimonial > img:last-of-type {
  position: relative;
  bottom: -8px;
}
.testimonial .carousel-inner p {
  font-size: 18px;
  color: #777;
  line-height: 40px;
  letter-spacing: 1px;
  font-style: italic;
  display: inline-block;
  position: relative;
  margin-bottom: 35px;
}
.testimonial .carousel-inner i {
  font-size: 20px;
  color: #f7b731;
  display: inline-block;
  margin: 0 10px;
}
.testimonial .carousel-inner .item > span {
  font-size: 16px;
  position: relative;
  text-transform: capitalize;
  color: #222;
  font-weight: 600;
  display: inline-block;
  padding-left: 15px;
}
.testimonial .carousel-inner .item > span::before {
  position: absolute;
  content: "-";
  top: 0;
  left: 0;
  font-size: 16px;
}

/* -- Counter App */
.counter-app {
  background-color: #f8f8f8;
  text-align: center;
}

/* - Statistics Box */
.counter-app .col-md-6 {
  padding: 4.5px;
  position: relative;
}
.counter-app .col-md-6::before,
.counter-app .col-md-6::after {
  position: absolute;
  content: "";
  background-color: #bcbcbc;
}
.counter-app .col-md-6::after {
  right: 0;
  width: 1px;
  bottom: 0;
  top: 0;
}
.counter-app .col-md-6::before {
  left: 0px;
  right: 0px;
  bottom: -1px;
  height: 1px;
}
.counter-app .col-md-6:nth-child(1)::after {
  top: 10px;
  bottom: 0px;
}
.counter-app .col-md-6:nth-last-child(2)::after {
  top: 0px;
  bottom: 10px;
}
.counter-app .col-md-6:nth-child(2n + 1)::before {
  left: 10px;
}
.counter-app .col-md-6:nth-child(2n + 2)::before {
  right: 10px;
}
.counter-app .col-md-6:last-child::after,
.counter-app .col-md-6:nth-child(2n + 2)::after,
.counter-app .col-md-6:nth-last-child(1)::before,
.counter-app .col-md-6:nth-last-child(2)::before {
  display: none;
}
.statistics-box {
  background-color: #313131;
  text-align: center;
  display: inline-block;
  width: 100%;
  padding-top: 27px;
  padding-bottom: 18px;
}
.statistics-box i {
  max-height: 63px;
  min-height: 63px;
  line-height: 63px;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.statistics-box > span {
  font-size: 32px;
  color: #fff;
  font-weight: 600;
  display: inline-block;
  width: 100%;
}
.statistics-box h3 span {
  color: #fff;
  font-size: 14px;
}
.statistics-box > h3 {
  margin: 0;
}

/* - Get Mobile */
.get-mobile {
  text-align: left;
}
.get-mobile h3 {
  font-size: 26px;
  margin-top: 0;
  color: #777;
  margin-bottom: 15px;
}
.get-mobile h2 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #222;
  margin-top: 0;
  margin-bottom: 22px;
}
.get-mobile p {
  font-size: 13px;
  color: #777;
  line-height: 30px;
  padding-right: 25px;
}
/* - Get Mobile Content */
.get-mobile > img {
  margin-top: 24px;
  display: inline-block;
}
/* - Get Mobile Playstore */

/* -- Blog */
.blog {
  text-align: center;
}

/* - Entry Meta */

/* - By Line */
/* - Post Comment */

/* - Post Date */
/*.tags {
	margin-top: -5px;
}*/

.tags a {
  text-align: right;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding-right: 5px;
  letter-spacing: 1px;
}
.tags a::after {
  position: absolute;
  content: ",";
  bottom: 0;
}
.tags a:last-child::after {
  display: none;
}
.tags > i {
  transform: rotate(90deg);
  color: #fff;
  margin-left: 30px;
}

.tags > i {
  margin-right: 5px;
}

/* ## Home2 */

/* -- Photos Slider2 */

/* - Photos Slider2 Content */

/* - Book Taxi Form */

/* - About */
.about {
  display: inline-block;
  width: 100%;
  text-align: left;
}
.about > h3 {
  color: #d1d1d1;
  font-size: 30px;
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 12px;
}
.about > h2 {
  margin: 0;
  font-weight: 600;
  color: #222;
  font-size: 34px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.about > p {
  font-size: 14px;
  color: #777;
  line-height: 30px;
  margin-bottom: 5px;
}
.about a {
  text-decoration: none;
  color: #de302f;
  font-weight: 700;
  border: 1px solid #de302f;
  padding: 10px 34px;
  display: inline-block;
  margin-top: 15px;
}

/* - More Than You */

/* - Services */
.services {
  background: url("../images/services/service-bg.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  position: relative;
  border-top: 1px solid #a09e9c;
}
.services::before {
  position: absolute;
  content: "";
  background-color: #000;
  opacity: 0.9;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: inline-block;
}

/* - Service Box */

/* - Content */

/* - Counter Style2 */
.counter-style2 {
  background-image: url("../images/counter-app/counter-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: relative;
}
.counter-style2::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #f7b731;
  opacity: 0.9;
  display: inline-block;
}
.counter-style2 .counter .statistics-box {
  position: relative;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  padding-bottom: 20px;
  padding-top: 0;
  margin: 0;
}
.counter-style2 .counter .statistics-box::after,
.counter-style2 .counter .statistics-box::before {
  position: absolute;
  content: "";
  border-top: 1px solid #fff;
  width: 20px;
  top: 0;
}
.counter-style2 .counter .statistics-box::before {
  left: 0;
}
.counter-style2 .counter .statistics-box::after {
  right: 0;
}
.counter-style2 .counter .statistics-box h3 {
  margin-top: -15px;
}
.counter-style2 .counter .statistics-box h3 span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Open Sans", sans-serif;
  display: inline-block;
  margin-bottom: 15px;
  color: #f8f8f8;
}
.counter-style2 .counter .statistics-box > span {
  color: #f8f8f8;
}
.counter-style2 .counter .statistics-box i {
  margin-bottom: 20px;
}

/* - App */
.app {
  background: #f8f8f8;
  display: inline-block;
  width: 100%;
  position: relative;
}

.app .get-mobile {
  display: inline-block;
  width: 100%;
  padding-top: 30px;
}
.app .col-md-8 {
  text-align: right;
}

/* - Partner */
.partner {
  background-color: #f9f9f9;
  text-align: center;
}

.partner .col-md-12 img {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px 35px;
}

/* -- Vehicle Fleet */
.vehicle-tabs > .nav-tabs {
  border: none;
  text-align: center;
  display: inline-block;
  margin-bottom: 65px;
  width: 100%;
}
.vehicle-tabs > .nav-tabs > li {
  float: none;
  display: inline-block;
  margin: 0 15px;
}
.vehicle-tabs > .nav-tabs > li > a {
  color: #de302f;
  border-radius: 30px;
  padding: 18px 55px;
  border: 1px solid #de302f;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 11px;
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.vehicle-tabs > .nav-tabs > li a:focus,
.vehicle-tabs > .nav-tabs > li a:hover,
.vehicle-tabs > .nav-tabs > li.active > a,
.vehicle-tabs > .nav-tabs > li.active > a:focus,
.vehicle-tabs > .nav-tabs > li.active > a:hover {
  color: #fff;
  background-color: #de302f;
}

/* -- Vehicle-Slider */
/* -- Vehicle Fleet - Optimierte Version */
.vehicle-tabs > .nav-tabs {
  border: none;
  text-align: center;
  display: inline-block;
  margin-bottom: 65px;
  width: 100%;
}
.vehicle-tabs > .nav-tabs > li {
  float: none;
  display: inline-block;
  margin: 0 15px;
}
.vehicle-tabs > .nav-tabs > li > a {
  color: #de302f;
  border-radius: 30px;
  padding: 18px 55px;
  border: 1px solid #de302f;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 11px;
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.vehicle-tabs > .nav-tabs > li a:focus,
.vehicle-tabs > .nav-tabs > li a:hover,
.vehicle-tabs > .nav-tabs > li.active > a,
.vehicle-tabs > .nav-tabs > li.active > a:focus,
.vehicle-tabs > .nav-tabs > li.active > a:hover {
  color: #fff;
  background-color: #de302f;
}

/* -- Vehicle Slider */
.vehicle-detail > .nav-tabs li a {
  color: #777;
  text-transform: uppercase;
  padding: 22px 20px 18px;
  border-radius: 0;
}
.vehicle-detail > .nav-tabs li.active a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #de302f;
  top: -1px;
}
.vehicle-detail > .nav-tabs li a:hover,
.vehicle-detail > .nav-tabs li a:focus,
.vehicle-detail > .nav-tabs li.active a:hover,
.vehicle-detail > .nav-tabs li.active a:focus,
.vehicle-detail > .nav-tabs li.active a {
  font-weight: 600;
  color: #de302f;
}
.vehicle-detail > .nav-tabs li.active a:hover,
.vehicle-detail > .nav-tabs li.active a:focus,
.vehicle-detail > .nav-tabs li.active a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid #fff;
}
.vehicle-detail > .nav-tabs li a:hover,
.vehicle-detail > .nav-tabs li a:focus {
  background-color: transparent;
}
.vehicle-detail > .nav-tabs li:first-of-type.active a:hover,
.vehicle-detail > .nav-tabs li:first-of-type.active a:focus,
.vehicle-detail > .nav-tabs li:first-of-type.active a {
  border-left: none;
}
.vehicle-detail > .nav-tabs,
.vehicle-detail .tabe-content {
  border: 1px solid #e7e7e7;
}
.vehicle-detail .tabe-content {
  border-top: none;
  padding: 24px 30px;
}
.vehicle-detail .tabe-content h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 19px 0;
  border-bottom: 1px solid #e7e7e7;
  text-transform: uppercase;
}
.vehicle-detail .tabe-content h3 span {
  font-weight: normal;
  float: right;
  color: #777;
  text-transform: none;
}
.vehicle-detail .tabe-content h3 span a {
  font-weight: 600;
  color: #de302f;
}
.vehicle-detail .tabe-content h3:last-child {
  border-bottom: none;
}

/* Wichtige Eigenschaften des Member Carousel - wie im alten Code */
.member-carousel {
  width: 98.8%; /* Ursprünglich 80%, aber für Vehicle Fleet verwenden wir 98.8% */
  display: inline-block;
  margin-bottom: 20px;
}

/* Spezifische Anpassungen für Vehicle Fleet */
#vehicle-fleet .member-carousel {
  display: inline-block;
  width: 98.8%;
  margin: 0 auto;
}

#vehicle-fleet #member {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Verhindern der Lücken zwischen Bildern und Text */
#vehicle-fleet .member-item {
  position: relative;
  margin: 0 5px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

#vehicle-fleet .member-item:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#vehicle-fleet .member-item a {
  display: block;
  text-decoration: none;
}

#vehicle-fleet .member-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

#vehicle-fleet .member-item .driver-info {
  margin: 0;
  padding: 10px 0;
  background-color: #f8f8f8;
  border-top: 1px solid #eaeaea;
  display: block;
  width: 100%;
}

#vehicle-fleet .member-item .driver h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  text-align: center;
}

/* Aktives Element hervorheben */
#vehicle-fleet .member-item.active {
  border-color: #de302f;
  box-shadow: 0 5px 15px rgba(222, 48, 47, 0.2);
}

#vehicle-fleet .member-item.active .driver-info {
  background-color: #de302f;
}

#vehicle-fleet .member-item.active .driver h3 {
  color: #fff;
}

/* Owl Carousel für Vehicle Fleet - WICHTIG für den loop */
/* Owl Carousel Standardverhalten wiederherstellen */
.owl-carousel {
  display: block;
}

.owl-carousel .owl-stage-outer {
  overflow: hidden; /* WICHTIG: hidden, nicht visible für den Infinite Loop */
}

.owl-carousel .owl-stage {
  display: flex;
}

.owl-carousel .owl-item {
  float: left; /* Wichtig für das Karussell-Verhalten */
  display: block; /* Nicht flex verwenden */
}

/* Responsive Anpassungen */
@media (max-width: 767px) {
  #vehicle-fleet .member-item img {
    height: 150px;
  }
  
  #vehicle-fleet .member-item .driver h3 {
    font-size: 14px;
  }
}

/* 360-Grad-Viewer Modal */
#myModal.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

#myModal .modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#myModal .close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  opacity: 1;
}

#myModal .close:hover,
#myModal .close:focus {
  color: #fff;
  background-color: rgba(222, 48, 47, 0.8);
  text-decoration: none;
  opacity: 1;
}

#panorama-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f0f0f0;
}

/* Button für 360°-Ansicht */
[id^="myBtn-"] {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

[id^="myBtn-"]:hover {
  background-color: rgba(222, 48, 47, 0.8);
  color: #ffffff;
}
/* VehicleFleet End

/* - Blog Banner */
#page-banner, .page-banner {
  height: 60px; /* Feste Höhe statt min/max-height */
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../images/blog/bg-wide_blurry-min.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 0; /* Fester Abstand oben und unten */
  overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Containers sichtbar sind */
}

#page-banner::before, .page-banner::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.8;
  z-index: 1;
}

.page-heading {
  position: relative;
  color: #fff;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0; /* Kleinerer interner Abstand */
}

.page-heading h3 {
  font-size: 16px; /* Kleinere Schriftgröße */
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  margin: 0 0 15px 0; /* Kompaktere Margins */
  line-height: 1.2; /* Kompaktere Zeilenhöhe */
}

.page-heading h3::after {
  position: absolute;
  content: "";
  width: 46px;
  left: 50%;
  transform: translateX(-50%);
  top: 25px; /* Angepasst für die kleinere Schriftgröße */
  height: 2px;
  background: #fff;
}

.page-heading .breadcrumb {
  background-color: transparent;
  border-radius: 0;
  margin: 0; /* Entfernt überschüssige Margins */
  padding: 0;
  line-height: 1; /* Kompaktere Zeilenhöhe */
}

.page-heading .breadcrumb li > a {
  color: #999;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 11px; /* Kleinere Schriftgröße */
  padding: 0 10px; /* Reduzierter Abstand */
  font-weight: 600;
}

.page-heading .breadcrumb li.active > a {
  color: #fff;
}

.page-heading .breadcrumb > li + li::before {
  content: ">";
  color: #999;
  font-size: 9px; /* Kleinere Schriftgröße */
}

/* -- Blog Area */
.blog-area {
  text-align: center;
}

/* -- Widget Area */
/* - Widget Title */
.widget-title {
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 30px;
  background-image: url("../images/icon/widget-title-seprator.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  width: 100%;
}
.widget-title h3 {
  margin-top: 0;
  font-weight: 600;
  font-size: 18px;
  color: #030303;
  margin-bottom: 23px;
}

/* - Search Widget */
/* - Categories Widget */

/* - Recent Post */

/* - Widget Tags */

/* -Widget Flicker */

/* - Archive Content */

/* - Single Post List */

/* - Social Share */

/*Social-Icon*/
.social-icon {
  transition: filter 0.3s ease;
}

.social-icon:hover {
  filter: brightness(1.5); /* Erhöht die Helligkeit um 50% */
}

/* - About Author */

/* -- Comment Section */

/* - Leave Comment */

/* -- Faq Section */
.faq-section .section-header,
.blog-area .section-header {
  background-image: url("../images/icon/title-separator.png");
  background-position: left bottom;
}
.faq-section .section-header h3,
.blog-area .section-header h3 {
  text-align: left;
}
.faq-list {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 0;
}
.faq-list li {
  text-transform: uppercase;
  line-height: 50px;
}
.faq-list li a {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.faq-list li a.active,
.faq-list li a:hover,
.faq-content.active h3 {
  text-decoration: none;
  color: #de302f;
}
.faq-content {
  margin-bottom: 50px;
  display: inline-block;
  width: 100%;
}
.faq-content:last-of-type {
  margin-bottom: 0;
}
.faq-content h3 {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 20px;
  display: inline-block;
}
.faq-content a:hover {
  text-decoration: none;
  color: #2b78c2;
}
.faq-content p {
  color: #777;
  line-height: 26px;
  font-size: 14px;
}
.faq-content > a {
  float: right;
  text-transform: capitalize;
  display: none;
  margin-top: 30px;
}
.faq-content.active > a {
  display: inline-block;
}

/* -- Accordion */
.faq-section .panel-default > .panel-heading {
  background-color: transparent;
  color: #333;
  border: 1px solid #e7e7e7;
  padding: 0;
  border-radius: 20px;
}
.faq-section .panel-default > .panel-heading a {
  padding: 17px 65px 17px 65px;
  position: relative;
  display: inline-block;
  width: 100%;
}
.faq-section .panel-default > .panel-heading a i {
  position: absolute;
  left: 10px;
  top: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px; /* Diese Linie stellt sicher, dass der Inhalt vertikal zentriert ist */
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-section .panel-default > .panel-heading a:before {
  bottom: 0;
  content: "";
  position: absolute;
  right: 0;
  width: 50px;
  top: 0;
  border-left: 1px solid #e7e7e7;
  border-radius: 0 20px 20px 0;
  background-repeat: no-repeat;
  background-position: center center;
}
.faq-section .panel-default > .panel-heading a.collapsed:before {
  background-image: none;
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
  content: "+";
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.faq-section .panel-default > .panel-heading a:before {
  background-image: none;
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
  content: "×";
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.faq-section .panel-title > a.collapsed,
.faq-section .panel-title > a {
  font-size: 15px;
  text-transform: uppercase;
  color: #222;
  letter-spacing: 1px;
  font-weight: 600;
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.faq-section .panel-title > a,
.faq-section .panel-title > a:hover {
  text-decoration: none;
  color: #de302f;
}
.faq-section .panel-title img {
  width: 30px;
  height: auto;
  vertical-align: middle; /* Hilft bei der Ausrichtung mit dem Text */
}
.faq-section .panel-body {
  font-size: 14px;
  color: #777;
  line-height: 28px;
  padding: 24px 21px 14px;
}
.faq-section .panel-group .panel {
  border-radius: 4px;
  margin-bottom: 10px;
  border: none;
  box-shadow: none;
}

.faq-section .panel-group .panel-heading + .panel-collapse > .panel-body {
  border: none;
}


/*
 * Online Booking Formular - Vollständiges optimiertes CSS
 * =======================================================
 */

/* 
 * 1. GRUNDLEGENDE STRUKTUR UND LAYOUT
 * -----------------------------------
 */
.blog-area .section-header {
    margin-bottom: 0;
}

.section-header h3 {
    margin-bottom: 30px;
    border-bottom: none;
}

.online-booking-form {
    text-align: left;
    padding-right: 98px;
    margin-top: 30px;
}

.online-booking-form > h4 {
    padding: 0;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    display: inline-block;
    padding-left: 0; /* Angepasst um auf einer Linie mit den Feldern zu sein */
}

/* Form-Group Ausrichtung und Abstände */
.form-group {
    margin-bottom: 15px;
}

/* Stellt sicher, dass Zeilenumbrüche korrekt funktionieren */
.online-booking-form .row {
    clear: both;
    margin-left: -15px;
    margin-right: -15px;
}

.online-booking-form .row:before,
.online-booking-form .row:after {
    content: " ";
    display: table;
}

.online-booking-form .row:after {
    clear: both;
}

/*
 * 2. LABELS UND BESCHREIBUNGEN
 * ----------------------------
 */
.online-booking-form .form-group label {
    font-weight: normal;
    font-size: 14px;
    color: #777;
    margin-top: 0;
    margin-bottom: 8px;
    display: block;
}

.form-group label[for="servicio-aeropuerto"] {
    margin-bottom: -33px;
}

/* Reduziert den Abstand zwischen Label und Buttons */
.form-group label + .btn-group {
    margin-top: 0;
}

/*
 * 3. EINGABEFELDER (ALLGEMEIN)
 * ----------------------------
 */
.online-booking-form input,
.online-booking-form .input-group select,
.online-booking-form select,
.online-booking-form textarea {
    height: auto;
    padding: 12px 12px;
    line-height: 18px;
    color: #000000;
    box-shadow: none;
    border-radius: 3px;
    outline: none;
    border: 1px solid #d1d1d1;
}

.online-booking-form input[type="text"],
.online-booking-form input[type="email"],
.online-booking-form input[type="tel"],
.online-booking-form input[type="number"],
.online-booking-form input[type="date"],
.phone-number-input {
    height: 46px !important;
    padding: 12px 12px !important;
    box-sizing: border-box !important;
}

.online-booking-form input::placeholder,
.online-booking-form select::placeholder,
.online-booking-form textarea::placeholder {
    color: #999999;
}

.online-booking-form .form-control {
    box-shadow: none;
    outline: none;
    border-color: #d1d1d1;
    height: 34px;
}

.online-booking-form select,
.online-booking-form .input-group select {
    padding-top: 11px;
    padding-bottom: 11px;
}

.online-booking-form textarea {
    min-height: 100px;
    height: auto; /* Überschreibt .form-control */
    padding: 12px 12px !important;
}

.online-booking-form input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    vertical-align: middle;
}

/* Styles für deaktivierte Eingabefelder */
.online-booking-form input:disabled {
    background-color: #f2f2f2;
    cursor: not-allowed;
}

/* Konsistente Ausrichtung für alle Spalten */
.online-booking-form .col-md-6,
.online-booking-form .col-md-12 {
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * 4. SPEZIFISCHE EINGABEFELDER
 * ----------------------------
 */

/* 4.1 Datumsfelder */
.online-booking-form input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23d1d1d1" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.online-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.online-booking-form input[type="date"]::-webkit-inner-spin-button,
.online-booking-form input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Angepasste Höhe und Padding für alle Datumsfelder */
.date-input, #date_airport {
    height: 46px !important;
    padding-top: 3px !important;
}

/* 4.2 Zeit-Eingabefelder */
.online-booking-form .time-input {
    background-color: #fff;
    cursor: text;
    height: 46px !important;
}

/* Zeit-Felder Container */
.time-fields-container {
    margin: 0 -5px;
}

.time-fields-container .col-md-6,
.time-fields-container .col-sm-6,
.time-fields-container .col-xs-6 {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
}

/* 4.3 Dropdown Container für Zeitauswahl */
.online-booking-form .dropdown-container {
    position: relative;
}

.online-booking-form .dropdown {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #d1d1d1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    max-height: 225px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    top: 100%;
    left: 0;
    border-radius: 3px;
}

.online-booking-form .dropdown-option {
    padding: 12px;
    cursor: pointer;
    color: #000000;
    transition: background-color 0.2s ease;
}

.online-booking-form .dropdown-option:hover {
    background-color: #f8f9fa;
}

.online-booking-form .dropdown-option.disabled {
    color: #aaa;
    cursor: not-allowed;
}

/* Spezielles Dropdown für Flugzeit */
#flight_time {
    height: 46px !important;
    padding-top: 3px !important;
}

/* Cantidad Pasajeros für Tour und Airport exakt gleich */
#passengerAmount, #passengerAmount_airport {
    height: 46px !important;
    padding: 12px !important;
    width: 100%;
}

/*
 * 5. BUTTONS UND INTERAKTIVE ELEMENTE
 * -----------------------------------
 */

/* 5.1 Hauptbutton */
.online-booking-form .btn {
    padding: 15px 60px;
    background-color: #de302f;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    line-height: 15px;
    margin-top: 40px;
    margin-bottom: 30px;
    box-shadow: 0 2px 0 #b34746;
}

/* 5.2 Service-Auswahl Buttons */
.service-selector {
    margin-bottom: 40px;
    text-align: left;
    margin-top: 20px;
    padding-left: 0;
}

.service-buttons, .direction-buttons {
    display: inline-flex;
    width: auto;
    margin: 0;
}

.service-buttons .btn, .direction-buttons .btn {
    flex: 1;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 0;
    min-width: 160px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}

.service-buttons .btn:first-child, .direction-buttons .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.service-buttons .btn:last-child, .direction-buttons .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.service-buttons .btn-primary {
    background-color: #de302f;
    border-color: #de302f;
}

.service-buttons .btn-default {
    background-color: #f8f9fa;
    border-color: #d1d1d1;
    color: #333;
}

/* 5.3 IDA/REGRESO Buttons */
.direction-buttons {
    width: 100%;
    display: flex;
}

.direction-buttons .btn {
    flex: 1;
    padding: 6px 12px;
    font-weight: 600;
    border-radius: 0;
    height: 46px !important; /* Angepasst an Datumsfeld-Höhe */
    min-width: auto;
    background-color: #f8f9fa;
    border-color: #d1d1d1;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-group.direction-buttons {
    margin-top: 40px;
}

/* 5.4 Aktive/Hervorgehobene Buttons */
.btn-primary {
    background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%) !important;
    border-color: #de302f !important;
    color: white !important;
}

/* 5.5 Conductor día completo Checkbox */
.conductor-checkbox {
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.conductor-checkbox input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
}

.conductor-checkbox strong {
    flex: 1;
    min-width: 200px;
}

.conductor-checkbox small {
    width: 100%;
    margin-top: 5px;
    margin-left: 24px;
}

.online-booking-form input[type="checkbox"]#conductor_dia_completo {
    margin-right: 10px;
    margin-top: 8px;
}

/*
 * 6. VALIDIERUNG UND FEHLERMELDUNGEN
 * ----------------------------------
 */
.online-booking-form .time-input.is-invalid,
.form-control.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 12px;
    color: #dc3545;
}

.btn-group.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 4px;
}

/*
 * 7. MODERN SELECT KOMPONENTE (FLUGHAFEN-AUSWAHL)
 * ----------------------------------------------
 */
.modern-select-container {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.modern-select {
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    padding: 12px 15px;
    cursor: pointer;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-select-value {
    color: #555;
}

.modern-select-arrow {
    color: #999;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.modern-select-options {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #d1d1d1;
    border-top: none;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.modern-select-options.active {
    display: block;
}

.modern-select-option {
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modern-select-option:hover {
    background-color: #f0f0f0;
}

.modern-select-option:first-child {
    color: #999;
}

.input-with-dropdown {
    position: relative;
}

.airport-dropdown-container {
    margin-top: 10px;
}

.airport-select {
    width: 100%;
    margin-top: 5px;
}

/*
 * 8. COUNTRY CODE DROPDOWN UND INPUT-GROUP
 * ----------------------------------------
 */
.country-code-dropdown {
    width: 130px;
}

.country-code-dropdown button {
    text-align: left;
    width: 100%;
    height: 46px;
    padding: 12px;
    border-radius: 3px 0 0 3px;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #d1d1d1;
    display: flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
}

.country-flag {
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.country-code-text {
    display: inline-block;
    vertical-align: middle;
}

.country-code-list {
    max-height: 300px;
    overflow-y: auto;
    width: 250px;
    margin-top: 0;
}

.country-code-list li a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
}

.country-code-list li a img {
    margin-right: 10px;
}

.input-group-btn.country-code-dropdown .dropdown-menu {
    padding: 5px 0;
}

.dropdown-header {
    font-weight: bold;
    color: #333;
    padding: 8px 15px;
}

.input-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.input-group-btn.country-code-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-menu.show {
    display: block;
}

.caret {
    margin-left: 5px;
}

/*
 * 9. RESPONSIVE ANPASSUNGEN
 * -------------------------
 */
@media (max-width: 767px) {
    .service-buttons .btn {
        padding: 12px 10px;
        font-size: 13px;
    }
    
    .toggle-label {
        font-size: 13px;
        padding: 12px 5px;
    }
}

/* 
 * 10. NEUE TELEFON-EINGABEGRUPPE
 * ------------------------------
 */

/* Container für Phone mit Country Code */
.phone-input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
}

/* Country Code Field Styling */
.country-code-field {
  position: relative;
  width: 85px;
  flex-shrink: 0;
}

.country-code-display {
  height: 46px;
  border: 1px solid #d1d1d1;
  border-radius: 3px 0 0 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
}

.country-code-display:hover {
  border-color: #b1b1b1;
}

.country-flag {
  width: 24px;
  height: 18px;
  margin-right: 5px;
}

.country-code-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.dropdown-arrow {
  color: #999;
  font-size: 10px;
  margin-left: 2px;
}

/* Country Code Dropdown List */
.country-code-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #d1d1d1;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 240px;
  max-height: 200px;
  overflow-y: auto;
}

.country-code-dropdown-list.show {
  display: block;
}

.country-option {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}

.country-option:hover {
  background-color: #f5f5f5;
}

.country-option img {
  margin-right: 10px;
}

/* Phone Number Input */
.phone-number-input {
  flex: 1;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  height: 46px !important;
}

/* Gemeinsame Formatierung */
.phone-input-group input:focus,
.country-code-display:focus-within {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Validierungsstatus */
.country-code-field.is-invalid .country-code-display {
  border-color: #dc3545;
}

.phone-number-input.is-invalid {
  border-color: #dc3545;
}
/*online-booking end*/



/* -- Contact Us */
.map {
  position: relative;
}
.map-canvas {
  border: medium none;
  height: 600px;
  width: 100%;
}
.map .content h3 {
  font-size: 16px;
  margin-bottom: 28px;
  font-weight: 600;
}
.map .content div {
  margin-bottom: 30px;
}
.map .content div:last-child {
  margin-bottom: 0;
}
.map .content div {
  font-size: 13px;
}
.map .content div {
  padding-left: 48px;
  position: relative;
}
.map .content div,
.map .content div a {
  color: #777;
}
.map .content div a {
  display: block;
  line-height: 24px;
}
.map .content div > img {
  position: absolute;
  left: 10px;
  top: 10px;
}
.map .content div > p {
  margin-bottom: 0;
  line-height: 24px;
}

.contact-form .section-header {
  background-image: url("../images/icon/title-separator.png");
  background-position: left bottom;
  margin-bottom: 30px;
}
.contact-form .section-header h3 {
  text-align: left;
}
.contact-form p {
  color: #777;
  line-height: 28px;
  font-size: 14px;
}
.contact-form form .form-group {
  margin-bottom: 20px;
}
.contact-form form .form-control {
  height: auto;
  padding: 17px 24px;
  line-height: 15px;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: none;
  outline: none;
  border: 1px solid #d1d1d1;
}
.contact-form form textarea.form-control {
  height: 155px;
}
.contact-form form .col-md-12 {
  text-align: center;
}
.contact-form form .btn {
  padding: 15px 37px;
  line-height: 1px;
  background-color: #de302f;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 15px;
  box-shadow: 0 2px 0 #b34746;
  border: none;
  outline: none;
}
/* - Alert Msg */
.alert-msg {
  color: #ccc;
  display: inline-block;
  width: 100%;
  margin: 10px 18px;
  position: relative;
  text-align: left;
  z-index: 1;
}
.alert-msg-success {
  color: #50b948;
}
.alert-msg-failure {
  color: #ff0000;
}

/* -- Error Page */

/* ## Responsive */

/* -- min-width: 1551 to max-width: 1750 */
@media only screen and (min-width: 1501px) and (max-width: 1750px) {
  /* -- Photos Slider */
  .photos-slider .carousel-caption {
    bottom: 31%;
  }
  .photos-slider .carousel-caption p {
    padding: 0;
  }
  /* - Driver Info */
}

/* -- min-width: 1366 to max-width: 1550 */
@media only screen and (min-width: 1366px) and (max-width: 1550px) {
  /* -- Photoslider2 */
}
/* -- min-width: 1201 to max-width: 1365 */
@media only screen and (min-width: 1201px) and (max-width: 1365px) {
  /* -- Photoslider2 */
}
/* -- min-width: 1201 to max-width: 1550 */
@media only screen and (min-width: 1201px) and (max-width: 1550px) {
  /* -- Photos Slider */
  .photos-slider .carousel-caption {
    bottom: 25%;
    left: 15%;
    right: 15%;
  }
  .photos-slider .carousel-caption h2 {
    font-size: 40px;
  }
  .photos-slider .carousel-caption p {
    padding: 0;
  }

  /* - Driver Info */
  .driver-info {
    padding: 17px 15px 15px;
  }
  .member-carousel .member-item ul > li {
    margin-left: 5px;
  }
  .driver-info span {
    font-size: 12px;
  }
  .member-carousel .member-item ul > li {
    margin-left: 5px;
  }

  /* - We Are Hire */
  .we-are-hire span {
    padding: 23px 0;
    line-height: 19px;
  }
}

/* -- min-width: 992 to max-width: 1200 */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  /* -- Photos Slider */
  .photos-slider .carousel-caption {
    bottom: 23%;
    left: 8%;
    right: 8%;
  }
  .photos-slider .carousel-caption h2 {
    font-size: 36px;
  }
  .photos-slider .carousel-caption p {
    padding: 0;
    margin-bottom: 40px;
  }

  /* - Choose Us Content Box */
  .choose-us-content-box {
    left: 20px;
  }

  /* -- Members */
  .member-carousel {
    width: 75%;
  }
  .we-are-hire {
    width: 25%;
  }
  .driver-info {
    padding-left: 20px;
    padding-right: 20px;
  }
  .member-carousel .member-item ul > li {
    margin-left: 5px;
  }

  /* - Photo Slider2 */
  .about {
    margin-bottom: 25px;
  }

  /* -- Services */
  .services > .col-md-4 {
    margin-bottom: 30px;
  }
  .services .col-md-4 {
    margin-bottom: 30px;
    display: inline-block;
  }

  /* - Counter Style2 */
  .counter-style2 .counter .statistics-box h3 span {
    font-size: 13px;
  }
}

/* -- min-width: 768 to max-width: 991 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* -- Photos Slider */
  .photos-slider .carousel-caption {
    top: 13%;
    left: 2%;
    right: 2%;
  }
  .photos-slider .carousel-caption h2 {
    font-size: 30px;
  }
  .photos-slider .carousel-caption p {
    padding: 0;
    font-size: 14px;
    margin-bottom: 35px;
  }

  /* Booking Details Form */

  /* -- What We Do */
  .what-we-do .image-box {
    position: relative;
    top: -100px;
    width: 100%;
  }

  /* -- Members */
  .driver-info {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .driver-info .driver > h3 {
    font-size: 13px;
  }
  .member-carousel {
    width: 66.66%;
  }
  .we-are-hire {
    width: 33.33%;
  }
  .member-carousel .member-item ul > li {
    margin-left: 5px;
  }

  .counter-app .col-md-6::after,
  .counter-app .col-md-6::before {
    display: none;
  }
  .get-mobile {
    margin-bottom: 50px;
  }

  /* -Blog Post List */

  /* - Counter Style2 */
  .counter-style2 .counter .statistics-box {
    margin-bottom: 30px;
  }
  .counter-style2 .counter .statistics-box::after,
  .counter-style2 .counter .statistics-box::before {
    width: 20px;
  }

  /* - content */
  .services .col-md-4 {
    margin-bottom: 30px;
  }

  /* -- Vehicle Fleet */
  .vehicle-tabs > .nav-tabs > li > a {
    padding-left: 40px;
    padding-right: 40px;
  }
}
/* -- min-width: 319 to max-width: 767 */
@media only screen and (min-width: 319px) and (max-width: 767px) {
  /* -- Photoslider2 */

  /* -- Members */
  .member-carousel,
  .we-are-hire {
    width: 50%;
  }
}

/* -- max-width: 991 */
@media (max-width: 991px) {
  /* -- Vehicle Fleet */
  .vehicle-tabs > .nav-tabs > li > a {
    padding-left: 27px;
    padding-right: 27px;
  }

  /* -- Online Booking Form */
  .online-booking-form {
    text-align: left;
    padding-right: 0;
  }
}
/* -- max-width: 767 */
@media (max-width: 767px) {
  /* -- Photos Slider */
  .photos-slider .carousel-inner > .item > a > img,
  .photos-slider .carousel-inner > .item > img {
    min-height: 300px;
  }
  .photos-slider .carousel-caption {
    top: 0;
    left: 2%;
    right: 2%;
    bottom: 0;
  }
  .photos-slider .carousel-caption h2 {
    font-size: 14px;
    margin-bottom: 0;
  }
  .photos-slider .carousel-caption p {
    padding: 0;
    font-size: 14px;
    margin-bottom: 35px;
  }

  .choose-us-box {
    max-width: 100%;
    margin-bottom: 60px;
    position: relative;
  }

  .choose-img-box {
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .choose-img-box img {
    width: 100%;
    height: auto;
  }

  .choose-img-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: -20px; /* Angepasst, um mit dem Textkästchen übereinzustimmen */
    bottom: -30px;
    height: 60px;
    background-color: #f8f8f8;
    transform: skewY(-10deg);
  }

  .choose-us-content-box {
    position: absolute;
    left: 20px;
    right: -20px; /* Wie von Ihnen angepasst */
    bottom: -45px;
    background-color: #fff;
    padding: 20px;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    box-shadow: 2px 2px 0 #ededed;
    z-index: 2;
  }

  .choose-us-content-box::before {
    content: "";
    position: absolute;
    left: 0;
  right: 0;
  top: -29px;
  height: 60px;
    background-color: #fff;
    transform: skewY(-10deg);
    z-index: -1;
  }

  .choose-us-content-box::after {
    content: "";
    position: absolute;
    left: 0px;
  right: -2px;
  top: -29px;
  height: 59px;
    background-color: #ededed;
    transform: skewY(-10deg);
    z-index: -2;
  }


  .choose-us-content-box h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding-bottom: 10px;
  }

  .choose-us-content-box p {
    font-size: 12px;
    color: #999999;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .choose-us-content-box a {
    text-decoration: none;
    color: #de302f;
    font-size: 11px;
    font-weight: 700;
    float: right;
    clear: both;
  }

  /* -- Member */

  /* -- What We Do */
  .what-we-do .image-box {
    display: none;
  }
  .what-we-do .about {
    margin-bottom: 40px;
  }

  /* - What We Do */
  .we-do-more h2 {
    font-size: 32px;
  }
  .counter-app .col-md-4 {
    padding: 0;
  }
  .statistics-box {
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .statistics-box > span {
    font-size: 28px;
  }
  .counter {
    display: inline-block;
    margin-bottom: 25px;
  }
  
  /* - Get Mobile */
  .get-mobile {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 30px;
  }
  .get-mobile p {
    padding-right: 0;
  }

  /* - Counter Style2 */
  .counter-style2 .counter .statistics-box {
    display: block;
    margin: 0 auto 40px;
    max-width: 300px;
  }

  /* -- Contact Form */
  .contact-form .col-sm-6 {
    margin-top: 30px;
  }

  /* -- Services */

  /* - Blog Post List */
  .tags > i {
    margin-left: 0;
  }


  /* - Get Mobile */
  .get-mobile {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 30px;
  }
  .get-mobile p {
    padding-right: 0;
  }

  /* - Counter Style2 */
  .counter-style2 .counter .statistics-box {
    display: block;
    margin: 0 auto 40px;
    max-width: 300px;
  }

  /* -- Contact Form */
  .contact-form .col-sm-6 {
    margin-top: 30px;
  }

  /* -- Services */

  /* - Blog Post List */
  .tags > i {
    margin-left: 0;
  }
}

/* -- min-width: 319 to max-width: 479 */
@media only screen and (min-width: 319px) and (max-width: 639px) {
  /* -- Photoslider2 */

  .choose-us-box {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .choose-img-box::before {
    bottom: -15px;
    height: 30px;
    right: -10px;
  }

  .choose-us-content-box {
    left: 10px;
    right: -10px;
    bottom: -25px;
    padding: 10px;
  }

  .choose-us-content-box::before {
    top: -15px;
    height: 30px;
  }

  .choose-us-content-box::after {
    top: -15px;
    height: 29px;
  }

  .choose-us-content-box h3 {
    font-size: 12px;
    padding-bottom: 3px;
  }

  .choose-us-content-box p {
    font-size: 9px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .choose-us-content-box a {
    font-size: 8px;
  }

    /* -- What We Do */
    .what-we-do .image-box {
      display: none;
    }
    .what-we-do .about {
      margin-bottom: 20px;
    }
  
    /* - What We Do */
    .we-do-more h2 {
      font-size: 24px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  
    .we-do-more h3 {
      font-size: 20px;
    }
  
    .we-do-more p {
      font-size: 12px;
      line-height: 1.4;
    }
  
    .what-we-do .col-md-8 {
      padding: 0;
    }
  
    .what-we-do-box {
      width: 48%;
      display: inline-block;
      vertical-align: top;
      margin-top: 20px;
      padding-left: 0;
    }
  
    .what-we-do-box span {
      font-size: 14px;
      margin-bottom: 10px;
    }
  
    .what-we-do-box > img {
      position: static;
      display: block;
      margin-bottom: 10px;
      width: 40px;
    }
  
    .what-we-do-box p {
      font-size: 12px;
      line-height: 1.4;
    }
  
    .what-we-do-box > a {
      font-size: 10px;
    }
  
    .what-we-do-box .more-service a {
      padding: 10px 20px;
      font-size: 12px;
    }
  
    /* Anpassungen für die Container-Struktur */
    .what-we-do .col-md-7,
  .what-we-do .col-md-5 {
    width: 50%;
    float: left;
    padding: 0 2px; /* Reduzierter seitlicher Abstand */
  }

  .what-we-do-box {
    width: 100%; /* Volle Breite innerhalb der 50% Spalte */
    display: block;
    margin-top: 15px;
    padding-left: 0;
  }

  /* Zusätzliche Anpassungen für einen engeren Look */
  .what-we-do .col-md-8 {
    padding: 0 5px; /* Leichter Abstand zum Rand */
  }

  .we-do-more {
    padding: 0 5px; /* Konsistenter Abstand */
  }

  .what-we-do-box span {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .what-we-do-box p {
    font-size: 11px;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .what-we-do-box > a {
    font-size: 9px;
  }

  .what-we-do-box .more-service a {
    padding: 8px 15px;
    font-size: 11px;
  }

  /* -- Members */
  .members {
    padding: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #member {
    display: contents;
  }
  .member-carousel {
    width: 75%;
    display: inline-block;
  }
  .member-carousel .member-item {
    flex: 0 0 auto;
    width: 100%;
  }

  .member-carousel .member-item > img {
    display: block;
    max-width: 100%;
  }

  .we-are-hire {
    max-width: 23.4vw;
    background-color: #f0f0f0;
    margin: 10px 0;
  }

  /* - Blog Post List */
  .tags a {
    padding-right: 2px;
  }
  
  .tags {
    float: left !important;
    width: 100%;
    text-align: left;
  }
  
  .tags {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 0;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  /* -- Vehicle Fleet */
  .vehicle-tabs > .nav-tabs > li {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
  }
  .vehicle-tabs > .nav-tabs > li a {
    display: inline-block;
  }
  .vehicle-detail .tabe-content h3 {
    display: inline-block;
    width: 100%;
  }
  .vehicle-detail .tabe-content h3 span {
    width: 100%;
    float: left;
    margin-top: 19px;
  }
  .vehicle-detail > .nav-tabs li a {
    padding-left: 15px;
    padding-right: 15px;
  }
  .vehicle-detail > .nav-tabs li a {
    font-size: 11px;
  }
}

/* Login-Bereich für Mobilgeräte optimieren */
.login-container {
  min-height: 60vh; /* Mindestens 60% der Bildschirmhöhe */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px; /* Zusätzlicher Abstand nach unten */
  margin-bottom: 50px; /* Abstand zum Footer */
  position: relative;
  z-index: 2;
}

.login-container form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container .form-group {
  margin-bottom: 20px;
}

.login-container button[type="submit"] {
  width: 100%;
  padding: 12px;
  background: linear-gradient(to top right, #ff7e00 0%, #e14a0a 30%, #d7340c 50%, #d5320c 65%, #cd1c0d 80%, #cc180d 100%);
  border: none;
  color: white;
  font-weight: 600;
  margin-top: 10px;
}

/* Footer-Anpassungen für Login-Seite */
.login-page footer {
  position: relative;
  margin-top: auto;
  z-index: 1;
}

@media (max-height: 600px) {
  /* Bei sehr kleinen Bildschirmen oder wenn Tastatur erscheint */
  .login-container {
    margin-bottom: 80px; /* Noch mehr Abstand */
  }
}
/* Login-Bereich*/

/*---------------------------------------*/

/* Admindatatable.php */
/* ==========================================================================
   ADMINDATATABLE.PHP - UMFASSENDES STYLESHEET
   ========================================================================== */

/* ==========================================================================
   1. VERSTECKEN VON DATATABLE STANDARDELEMENTEN
   ========================================================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    display: none !important;
}

#dataTable_wrapper {
    display: none !important;
}

/* ==========================================================================
   2. CONTAINER UND GRUNDLEGENDE STRUKTURELEMENTE
   ========================================================================== */
.shuttle-container {
    max-width: 1400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.position-relative {
    position: relative;
}

/* ==========================================================================
   3. FILTERLEISTE UND SUCHFUNKTIONEN
   ========================================================================== */
/* Hauptcontainer für Filter und Suche */
.filter-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

/* Suchfeld-Container */
.search-box {
    flex-grow: 1;
    margin-right: 15px;
}

.search-box input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Container für Aktions-Buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Gruppen für verschiedene Arten von Filtern */
.date-filter-group, 
.status-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Allgemeiner Stil für alle Filter-Buttons */
.filter-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 2px;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ced4da;
}

.filter-btn:hover {
    filter: brightness(0.95);
}

.filter-btn.active {
    color: white;
    border-color: transparent;
}

/* Datumsfilter-Buttons */
.date-filter.active {
    background-color: #2c3e50; /* Dunkelblau */
}

/* Button für manuelle Erstellung von wiederkehrenden Fahrten */
.recurring-action {
    background-color: #3498db; /* Blau wie color-recurring */
    color: white;
    border-color: transparent;
}

.recurring-action:hover {
    background-color: #2980b9; /* Dunkleres Blau */
}

/* Status-Filter-Buttons mit den entsprechenden Farben */
.status-filter-new.active {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #212529;
}

.status-filter-accepted.active {
    background-color: #28a745; /* Grün */
}

.status-filter-sent.active {
    background-color: #8e44ad; /* Lila */
}

.status-filter-rejected.active {
    background-color: #dc3545; /* Rot */
}

.status-filter-gold.active {
    background-color: #FFD700; /* Gold */
    color: #212529; /* Dunklere Schrift für bessere Lesbarkeit */
}

.status-filter-recurring.active {
    background-color: #3498db; /* Blau */
}

/* ==========================================================================
   4. FARBLEGENDE UND STATUS-VISUALISIERUNG
   ========================================================================== */
/* Container für die Farblegende */
.color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Einzelner Eintrag in der Legende */
.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

/* Farbquadrat in der Legende */
.legend-color {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}

/* Spezifische Farben für die verschiedenen Status */
.color-new {
    background-color: transparent;
    border: 1px solid #ccc;
}

.color-accepted {
    background-color: #28a745; /* Grün */
}

.color-sent {
    background-color: #8e44ad; /* Lila */
}

.color-rejected {
    background-color: #dc3545; /* Rot */
}

.color-gold {
    background-color: #FFD700; /* Gold */
}

.color-recurring {
    background-color: #3498db; /* Blau */
}

/* ==========================================================================
   5. ZEILEN-STATUS UND FARBCODIERUNG
   ========================================================================== */
/* Basis-Status für Zeilen (links border) */
.status-neu {
    border-left: 6px solid transparent;
}

.status-bestätigt {
    border-left: 6px solid #28a745; /* Grün */
}

.status-in_bearbeitung {
    border-left: 6px solid #8e44ad; /* Lila */
}

.status-abgeschlossen {
    border-left: 6px solid #6c757d; /* Grau */
}

.status-abgelehnt {
    border-left: 6px solid #dc3545; /* Rot */
}

.status-gold {
    border-left: 6px solid #FFD700; /* Gold */
}

.status-recurring {
    border-left: 6px solid #3498db; /* Blau */
}

/* Status-Badges (runde Anzeigen) */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

.badge-neu {
    background-color: #e9ecef;
    color: #495057;
}

.badge-bestätigt {
    background-color: #d1e7dd;
    color: #0a3622;
}

.badge-in_bearbeitung {
    background-color: #e0cfec;
    color: #5b2c6f;
}

.badge-abgeschlossen {
    background-color: #e2e3e5;
    color: #41464b;
}

.badge-abgelehnt {
    background-color: #f8d7da;
    color: #842029;
}

/* Status-Texte (für Textdarstellung) */
.status-text {
    font-weight: 600;
}

.status-text.accepted {
    color: #28a745;
}

.status-text.rejected {
    color: #dc3545;
}

.status-text.sent {
    color: #8e44ad;
}

/* Highlight für bezahlte Fahrten */
.highlight {
    background-color: #fffde7; /* Helles Gelb */
}

/* ==========================================================================
   6. DATUMS-GRUPPEN UND TABELLENLAYOUT
   ========================================================================== */
/* Container für Datums-Gruppen */
.date-group {
    margin-bottom: 30px;
}

/* Header für Datumsgruppen */
.date-header {
    background-color: #2c3e50;
    color: white;
    padding: 10px 15px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0;
}

/* Haupttabelle für Fahrten */
.trips-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tabellenkopf */
.trips-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
}

/* Tabellenzellen */
.trips-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

/* Hover-Effekt für Tabellenzeilen */
.trips-table tr:hover {
    background-color: #f1f9ff;
}

/* ==========================================================================
   7. INFO-GRUPPEN UND TOOLTIPS
   ========================================================================== */
/* Informationsgruppen für strukturierte Daten */
.info-group {
    margin-bottom: 8px;
}

.info-group-title {
    font-weight: 600;
    display: inline-block;
    width: auto;
    margin-right: 2px;
    color: #555;
}

/* Info-Icons mit Tooltips */
.info-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #6c757d;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    cursor: help;
    position: relative;
}

.tooltip-custom {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    width: 200px;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.info-icon:hover .tooltip-custom {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   8. FORMULARELEMENTE UND EDITIERBARE FELDER
   ========================================================================== */
/* Container für Fahrer- und Fahrzeugauswahl */
.driver-vehicle-selection {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.driver-vehicle-selection select,
.driver-vehicle-selection input {
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 120px;
}

.chofer-price-container {
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .chofer-price-label {
        font-weight: bold;
        margin-right: 10px;
        min-width: 100px;
    }
    
    .chofer-price-name {
        flex: 1;
        min-width: 120px;
    }

/* Editierbare Felder im Edit-Modus */
.editable-field {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.2s, background-color 0.2s;
}

.editable-field:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
}

.field-changed {
    background-color: #fff8e1; /* Helles Orange-Gelb für geänderte Felder */
    border-color: #ffc107;
}
/* Stil für Datumsfeld-Container */
.date-input-container {
    margin-bottom: 8px;
}

.date-input-container input[type="date"] {
    width: 100%;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.date-input-container .info-group-title {
    font-weight: bold;
    margin-right: 5px;
}

/* Stil für geänderte Datumsfelder */
input[name="date"].field-changed {
    border-color: #ffc107;
    background-color: #fff3cd;
}

/* Luggage Link Styles */
.luggage-link {
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
    margin-top: 5px;
    display: inline-block;
}

.luggage-link.empty {
    color: #dc3545;
}

.luggage-link.has-items {
    color: #28a745;
}

.luggage-link:hover {
    opacity: 0.8;
}

/* Luggage Popup Styles */
.luggage-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.luggage-popup {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 500px;
    padding: 20px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.luggage-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

.luggage-popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
}

.luggage-popup-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6c757d;
}

.luggage-popup-close:hover {
    color: #dc3545;
}

.luggage-popup-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    margin-top: 15px;
}

.luggage-popup-footer .btn {
    padding: 8px 20px;
    margin-left: 10px;
}

.luggage-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.luggage-item:last-child {
    border-bottom: none;
}

.luggage-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    color: #2c3e50;
    font-size: 18px;
}

.luggage-details {
    flex-grow: 1;
}

.luggage-title {
    font-weight: 500;
    margin-bottom: 5px;
}

.luggage-quantity {
    color: #6c757d;
    font-size: 14px;
}

.luggage-edit-mode .luggage-quantity {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.luggage-edit-mode .luggage-quantity input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    text-align: center;
}

.luggage-edit-mode .luggage-custom-title {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* Icons für Gepäcktypen */
.luggage-icon.maleta-grande i:before {
    content: "\f77c"; /* fa-suitcase */
}

.luggage-icon.maleta-mediano i:before {
    content: "\f5b7"; /* fa-suitcase-rolling */
}

.luggage-icon.maleta-chica i:before {
    content: "\f7d6"; /* fa-luggage-cart */
}

.luggage-icon.carriola i:before {
    content: "\f1ae"; /* fa-child */
}

.luggage-icon.silla-ruedas i:before {
    content: "\f193"; /* fa-wheelchair */
}

.luggage-icon.bicicleta i:before {
    content: "\f206"; /* fa-bicycle */
}

.luggage-icon.tabla-surf i:before {
    content: "\f044"; /* fa-edit */
}

.luggage-icon.custom i:before {
    content: "\f0e7"; /* fa-bolt */
}

/* Responsive Styles für Tablet und Mobile */
@media (max-width: 768px) {
    .luggage-popup {
        width: 95%;
        padding: 15px;
    }
    
    .luggage-icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
        font-size: 16px;
    }
    
    .luggage-popup-header h3 {
        font-size: 16px;
    }
     .chofer-price-container {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .chofer-price-label {
            margin-bottom: 5px;
        }
}

@media (max-width: 480px) {
    .luggage-popup {
        width: 98%;
        padding: 10px;
    }
    
    .luggage-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        margin-right: 10px;
    }
    
    .luggage-item {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    
    .luggage-edit-mode .luggage-quantity input {
        width: 50px;
    }
}

/* Preisauswahl-Container */
.price-selection-container {
    display: flex;
    gap: 5px;
    width: 100%;
    margin-top: 5px;
}

.price-type-name {
    flex: 1; /* Nimmt 1/3 des verfügbaren Platzes ein */
}

.job-price-name {
    flex: 2; /* Nimmt 2/3 des verfügbaren Platzes ein */
    height: 34px; /* Standard-Höhe wie bei den Selects */
    padding: 6px 12px; /* Standard-Padding wie bei den Selects */
}

/* Platzhalter-Texte in Formularfeldern */
.job-price-name::placeholder {
    color: #999;
    opacity: 1; /* Firefox */
}

.price-type-name option:first-child,
.job-price-name option:first-child {
    color: #999;
}

/* Kompaktes Layout für Auswahlfelder im Lesemodus */
.compact-selection {
    margin-bottom: 4px;
}

.compact-selection span {
    font-weight: 600;
    margin-right: 5px;
    color: #555;
}

/* ==========================================================================
   9. AKTIONS-BUTTONS UND MODALE DIALOGE
   ========================================================================== */
/* Grundlegender Stil für Aktionsbuttons */
.btn-action {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    min-width: 80px;
    text-align: center;
    display: inline-block;
}

/* Check-Button (Prüfen/Bestätigen) */
.btn-check {
    background-color: #f39c12; /* Orange */
}

.btn-check:hover {
    background-color: #e67e22;
}

/* Send-Button (Senden) */
.btn-send {
    background-color: #3498db; /* Blau */
}

.btn-send:hover {
    background-color: #2980b9;
}

/* Delete-Button (Löschen) */
.btn-delete {
    background-color: #e74c3c; /* Rot */
    margin-left: 5px !important;
}

.btn-delete:hover {
    background-color: #c0392b;
}

/* Save-Button (Speichern) */
.btn-save {
    background-color: #2ecc71; /* Grün */
}

.btn-save:hover {
    background-color: #27ae60;
}

/* Modal-Styling */
.modal-content {
    border-radius: 8px;
    border: none;
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
}

.modal-body {
    padding: 20px;
}

.modal-body button {
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Modal-Buttons */
.btn-accept {
    background-color: #28a745; /* Grün */
    color: white;
}

.btn-accept:hover {
    background-color: #218838;
}

.btn-reject {
    background-color: #dc3545; /* Rot */
    color: white;
}

.btn-reject:hover {
    background-color: #c82333;
}

/* ==========================================================================
   10. MELDUNGEN UND FEEDBACK
   ========================================================================== */
/* Container für Meldungen */
#messageContainer {
    margin-bottom: 15px;
}

/* Allgemeine Meldungen */
.message {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #d4edda; /* Hellgrün für Erfolg */
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da; /* Hellrot für Fehler */
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Visuelle Feedback-Animationen */
.fade-transition {
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.success-highlight {
    background-color: rgba(0, 255, 0, 0.1) !important;
    transition: background-color 0.5s ease-out;
}

.error-highlight {
    background-color: rgba(255, 0, 0, 0.1) !important;
    transition: background-color 0.5s ease-out;
}

/* Ladeanimation und Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db; /* Blau */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }
/* ==========================================================================
   11. RESPONSIVE DESIGN
   ========================================================================== */
/* Medium-Geräte (Tablets) */
@media (max-width: 992px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .trips-table td, 
    .trips-table th {
        padding: 10px;
    }
    
    .driver-vehicle-selection {
        flex-direction: column;
    }
}

/* Kleine Geräte (Mobiltelefone) */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .shuttle-container {
        padding: 10px;
    }
    
    .date-header {
        font-size: 16px;
    }
    
    .trips-table {
        display: block;
        overflow-x: auto;
    }
    
    .info-group-title {
        width: auto;
        font-size: 13px;
        margin-right: 4px;
    }
    
    .price-selection-container {
        flex-direction: column;
        gap: 3px;
    }
    
    .price-type-name,
    .job-price-name {
        width: 100%;
    }
    .chofer-price-container {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .chofer-price-label {
            margin-bottom: 5px;
        }
}


/* ========== CHOFERDATATABLE CSS STYLES ========== */
/* Zusätzliche Styles speziell für die Chofer-Ansicht */
.chofer-header {
    text-align: center;
    margin: 30px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chofer-header h1 {
    font-weight: bold;
    font-size: 36px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.chofer-header .subtitle {
    font-size: 18px;
    color: #7f8c8d;
}

/* Estilo para las tarjetas de viaje */
.date-group {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

.date-header {
    background-color: #2c3e50;
    color: white;
    padding: 10px 15px;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    border-radius: 5px 5px 0 0;
}

.trips-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background-color: white;
}

.trips-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
}

.trips-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.trips-table tr:hover {
    background-color: #f1f9ff;
}

/* Información agrupada */
.info-group {
    margin-bottom: 8px;
}

.info-group-title {
    font-weight: 600;
    display: inline-block;
    width: auto;
    margin-right: 5px;
    color: #555;
    min-width: unset; /* Entfernt die minimale Breite */
}

/* Caja de búsqueda */
.search-box {
    margin-bottom: 20px;
}

#searchInput {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.2s;
}

#searchInput:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para destacar información importante */
.trips-table strong {
    color: #2c3e50;
    font-size: 1.1em;
}

/* Mejorar la visualización de los datos del viaje */
.trip-detail-card {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 5px;
    border-left: 3px solid #3498db;
}

/* Distintivo visual para viajes actuales */
.trip-today {
    background-color: #e8f4fd;
}

.today-group .date-header {
    background-color: #2980b9;
}

/* Contador de viajes con estilo */
.trips-counter {
    display: inline-block;
    background-color: #fff;
    color: #2c3e50;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9em;
    margin-left: 8px;
}

/* Tooltip para información adicional */
.info-tip {
    cursor: help;
    position: relative;
    color: #3498db;
    margin-left: 5px;
}

.info-tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 10;
}

/* Botón de recarga */
.reload-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9000;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.reload-button:hover {
    background-color: #2980b9;
}

.reload-button i {
    font-size: 20px;
}

/* Notificación de actualización */
.update-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #2ecc71;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Responsive Design */
@media (max-width: 992px) {
    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .date-header {
        font-size: 18px;
    }
    
    .trips-table td, 
    .trips-table th {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .trips-table {
        display: block;
        overflow-x: auto;
    }
    
    .trips-table th, 
    .trips-table td {
        padding: 8px 10px;
    }
    
    .chofer-header h1 {
        font-size: 28px;
    }
    
    .info-group-title {
        min-width: unset;
        font-size: 13px;
    }
}

/* Stile für Bezahlstatus und Checkbox */
    .payment-control {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    
    .payment-checkbox {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    
    .efectivo-checkbox {
        margin-right: 5px;
    }
    
    .payment-status {
        font-size: 12px;
        font-weight: bold;
        padding: 3px 8px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .update-success {
        background-color: #2ecc71;
        color: white;
    }
    
    .update-error {
        background-color: #e74c3c;
        color: white;
    }

/* ============ PERMANENTTRIPS.PHP STYLES ============ */
/* Zusätzliche Stile für permanenttrips.php */
.permanent-trips-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background-color: white;
    table-layout: auto; /* Auto für flexible Spaltenbreiten */
}

.permanent-trips-table th {
    background-color: #f8f9fa;
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    white-space: normal; /* Erlaubt Umbrüche wenn nötig */
    font-size: 0.9rem;
    line-height: 1.2;
    /* Kein max-height oder -webkit-line-clamp mehr */
}

.permanent-trips-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    word-wrap: break-word; /* Wörter umbrechen */
    font-size: 0.9rem;
    white-space: normal; /* Text kann umgebrochen werden */
}

.permanent-trips-table tr:hover {
    background-color: #f1f9ff;
}

/* Minimale Breiten für die Spalten - basierend auf zweizeiligen Titeln */
.permanent-trips-table th:nth-child(1), /* Fechas */
.permanent-trips-table td:nth-child(1) {
    min-width: 80px; /* Minimal genug für zweizeiligen Titel */
}

.permanent-trips-table th:nth-child(2), /* Días */
.permanent-trips-table td:nth-child(2) {
    min-width: 70px;
}

.permanent-trips-table th:nth-child(3), /* Horario */
.permanent-trips-table td:nth-child(3) {
    min-width: 70px;
}

.permanent-trips-table th:nth-child(4), /* Pasajero */
.permanent-trips-table td:nth-child(4) {
    min-width: 80px;
}

.permanent-trips-table th:nth-child(5), /* Ruta */
.permanent-trips-table td:nth-child(5) {
    min-width: 90px;
}

.permanent-trips-table th:nth-child(6), /* Factura */
.permanent-trips-table td:nth-child(6) {
    min-width: 50px;
}

.permanent-trips-table th:nth-child(7), /* Detalles */
.permanent-trips-table td:nth-child(7) {
    min-width: 90px;
}

.permanent-trips-table th:nth-child(8), /* Acciones */
.permanent-trips-table td:nth-child(8) {
    min-width: 70px;
}

/* Tage-Checkboxen im Edit-Modus - nur für permanenttrips */
.permanent-trips-table .days-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.permanent-trips-table .day-checkbox-label {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    font-size: 0.8em;
}

.permanent-trips-table .day-checkbox {
    margin-right: 2px;
}

/* Container für die Bearbeitungsfelder - nur für permanenttrips */
.permanent-trips-table .date-edit-container,
.permanent-trips-table .time-edit-container,
.permanent-trips-table .address-edit-container,
.permanent-trips-table .service-edit-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.permanent-trips-table .edit-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 1px;
}

/* Tabellen-Container mit optimiertem horizontalem Scrollen */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    scrollbar-width: thin;
}

/* Optimierte mobile Darstellung - NUR für permanenttrips */
.permanent-trips-table .editable-field {
    font-size: 0.9rem;
    padding: 4px 6px;
    height: auto;
}

.permanent-trips-table .form-control {
    font-size: 0.9rem;
    padding: 4px 6px;
    height: auto;
}

.permanent-trips-table .btn-action {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 70px;
}

/* Kompaktere Darstellung für die Tabelle */
.permanent-trips-table .compact-cell {
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Verbesserte Textumbruch-Behandlung */
.permanent-trips-table .break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Für Zellen mit mehreren Inhalten (wie Ruta und Detalles) */
.permanent-trips-table td > div:not(:last-child) {
    margin-bottom: 4px;
}

/* Anpassung für Mobilgeräte im Querformat */
@media (min-width: 480px) and (max-width: 900px) and (orientation: landscape) {
    .permanent-trips-table {
        min-width: 600px; /* Minimale Gesamtbreite */
    }
    
    .permanent-trips-table th, 
    .permanent-trips-table td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .permanent-trips-table {
        min-width: 580px; /* Minimale Gesamtbreite, um alle Spalten anzuzeigen */
    }
    
    .permanent-trips-table th,
    .permanent-trips-table td {
        padding: 8px 6px;
        font-size: 0.85rem;
    }
    
    .permanent-trips-table .edit-label, 
    .permanent-trips-table .day-checkbox-label {
        font-size: 0.75rem;
    }
}


/* CSS für detailsdatatable.php - diesen Code in shortcode.css einfügen */

/* Hauptbereich */
.main-content {
    padding: 30px 0;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
}

/* Tabellenbereiche */
.table-section {
    margin-bottom: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #444;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5f5f5;
}

/* Tabellenstil */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.data-table thead th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

.data-table tbody tr {
    border-bottom: 1px solid #f2f2f2;
    transition: background-color 0.3s ease;
}

.data-table tbody tr:hover {
    background-color: #f8f9fa;
}

.data-table tbody td {
    padding: 12px;
    vertical-align: middle;
}

/* Bearbeitbare Zellen */
.editable {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.editable:hover {
    background-color: #f0f8ff;
}

.editable.editing {
    padding: 0;
}

.editable.updated {
    animation: highlight 1.5s ease;
}

@keyframes highlight {
    0% { background-color: rgba(76, 175, 80, 0.3); }
    100% { background-color: transparent; }
}

.inline-edit {
    width: 100%;
    padding: 10px;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}

/* Buttons */
/* Modernes Design für den Delete-Button */
.delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%; /* Runder Button */
    background-color: #dc3545; /* Rot im Hover-Zustand */
    color: white;
    
    border: 1px solid #ced4da;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.delete-btn:hover {
    background-color: #f8f9fa; /* Heller Hintergrund im Normalzustand */
    color: #dc3545; /* Rote Schrift/Icon */
    transform: translateY(-2px); /* Leicht anheben */
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); /* Schatten mit rotem Farbton */
}

.delete-btn i {
    font-size: 16px;
}

/* Moderne Button-Gruppe für konsistentes Design */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Noch mehr Abstand zwischen den Gruppen */
}

.date-filter-group, .status-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.action-buttons button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-buttons button:hover {
    background-color: #2980b9;
}

.action-buttons button.active {
    background-color: #2c3e50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Anpassungen für die Aktionen-Spalte */
.actions-column {
    width: 80px;
    text-align: center;
}

/* Anpassungen für Upload-Button */
.upload-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.3s ease;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.upload-btn:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Reset-Password Button mit modernem Design */
.reset-password-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.reset-password-btn:hover {
    background-color: #0069d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}




/* Checkbox-Navigationsleiste */
.checkbox-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
    margin-bottom: 20px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

/* Plus-Button und Menü */
.boton-agregar {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

#plusButton {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    font-size: 30px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#plusButton:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

.plus-menu {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 200px;
}

.plus-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plus-menu li {
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #f2f2f2;
}

.plus-menu li:last-child {
    border-bottom: none;
}

.plus-menu li:hover {
    background-color: #f8f9fa;
}

/* Popups */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 25px;
    position: relative;
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-popup:hover {
    color: #333;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-size: 22px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

/* Formulare */
.add-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: #4CAF50;
    outline: none;
}

.form-group input[type="file"] {
    padding: 8px 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.form-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.form-actions button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

.form-actions button[type="submit"]:hover {
    background-color: #45a049;
}

.form-actions button[type="button"] {
    background-color: #f1f1f1;
    color: #333;
}

.form-actions button[type="button"]:hover {
    background-color: #e4e4e4;
}

/* Passwort Container und Anforderungen */
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    flex-grow: 1;
    padding-right: 40px;
}

.toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 5px;
}

.toggle-password:hover {
    color: #343a40;
}

#password-requirements,
#new-password-requirements {
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
}

.req-length, .req-uppercase, .req-lowercase, .req-number, .req-symbol {
    margin: 3px 0;
    position: relative;
    padding-left: 20px;
}

.req-length.valid, .req-uppercase.valid, .req-lowercase.valid, .req-number.valid, .req-symbol.valid {
    color: #28a745;
}

.req-length.invalid, .req-uppercase.invalid, .req-lowercase.invalid, .req-number.invalid, .req-symbol.invalid {
    color: #dc3545;
}

.req-length.valid::before, .req-uppercase.valid::before, .req-lowercase.valid::before, .req-number.valid::before, .req-symbol.valid::before {
    content: "✓";
    position: absolute;
    left: 0;
}

.req-length.invalid::before, .req-uppercase.invalid::before, .req-lowercase.invalid::before, .req-number.invalid::before, .req-symbol.invalid::before {
    content: "✗";
    position: absolute;
    left: 0;
}

/* Bildvorschau */
.image-cell {
    text-align: center;
}

.image-preview {
    max-width: 53px;
    max-height: 70px;
    margin: 0 auto 10px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
}

.image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.upload-preview {
    margin-top: 10px;
    display: none;
    max-width: 200px;
    border: 1px dashed #ccc;
    padding: 5px;
    border-radius: 4px;
}

.upload-preview img.preview-img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Responsive Design */
@media (max-width: 768px) {
    .page-title {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .data-table thead th,
    .data-table tbody td {
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .popup-content {
        padding: 15px;
        width: 95%;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
    }
    
    #plusButton {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .plus-menu {
        width: 180px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 22px;
    }
    
    .section-title {
        font-size: 18px;
    }
    
    .data-table thead th,
    .data-table tbody td {
        padding: 8px 6px;
        font-size: 13px;
    }
    
    .boton-agregar {
        bottom: 20px;
        right: 20px;
    }
    
    #plusButton {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }
    
    .plus-menu {
        width: 160px;
    }
    
    .plus-menu li {
        padding: 12px;
        font-size: 14px;
    }
}

/* Farblegende für Finanzstatus */
.color-legend {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
}


/*Auszug aus shortcode.css der alle style daten enthält-Hier auch alle neuen Sytle daten eintragen*/
/* ==========================================================================
   FINANCE DATATABLE - CSS-STYLES
   ========================================================================== */

/* Status-Filter-Buttons mit den entsprechenden Farben */
.status-filter-paid.active {
    background-color: #28a745; /* Grün */
}

.status-filter-unpaid.active {
    background-color: #dc3545; /* Rot */
}

.status-filter-invoice.active {
    background-color: #ffc107; /* Gelb */
    color: #212529; /* Dunklere Schrift für bessere Lesbarkeit */
}

/* Excel Export Button */
.excel-export-btn {
    background-color: #2E7D32;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.excel-export-btn:hover {
    background-color: #1B5E20;
}

.excel-export-btn i {
    margin-right: 5px;
}

/* View Toggle Buttons */
.view-toggle-container {
    display: flex;
    margin-top: 5px;
    margin-bottom: 10px;
}

.view-toggle-btn {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ced4da;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.view-toggle-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.view-toggle-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Spezifische Farben für die verschiedenen Status */
.color-paid {
    background-color: #28a745; /* Grün */
}

.color-unpaid {
    background-color: #dc3545; /* Rot */
}

.color-invoice {
    background-color: #ffc107; /* Gelb */
}

/* Status für Zeilen (links border) */
.status-paid {
    border-left: 6px solid #28a745; /* Grün */
}

.status-unpaid {
    border-left: 6px solid #dc3545; /* Rot */
}

.status-invoice {
    border-left: 6px solid #ffc107; /* Gelb */
}

/* Container für Zahlungs- und Finanzdetails */
.finance-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.finance-details select,
.finance-details input {
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 120px;
}

/* Zahlungsmethode Dropdown */
.payment-method-select {
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    min-width: 100px;
}

/* Invoice Checkbox Styling */
.invoice-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.invoice-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

.invoice-address {
    margin-top: 5px;
    width: 100%;
}

/* Preisanzeige */
.price-display {
    margin-top: 5px;
}

.price-display .price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.price-display .price-total {
    font-weight: bold;
    border-top: 1px solid #dee2e6;
    padding-top: 3px;
    margin-top: 3px;
}

/* Chofer-Info Bereich */
.chofer-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

/* Statusanzeige für Zahlung und Rechnung */
.payment-status, 
.invoice-status {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.payment-status strong {
    color: #28a745;
}

.payment-status strong:contains("No pagado") {
    color: #dc3545;
}

/* Dashboard Container (zunächst versteckt) */
#dashboardView {
    display: none;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    margin-top: 20px;
}

#dashboardView .placeholder {
    text-align: center;
    padding: 50px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Reload Button (rechts unten) */
.reload-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9000;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.reload-button:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}

/* Responsive-Anpassungen für Finanzdaten */
@media (max-width: 992px) {
    .finance-details {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .payment-method-select,
    .invoice-address {
        width: 100%;
    }
    
    .price-display .price-item {
        flex-direction: column;
    }
}

/*----------------------------------*/


/* Finance Dashboard Styles - Optimiertes Layout */

/* Stil für Ansichtsumschalter-Buttons */
.view-toggle-container {
    display: flex;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.view-toggle-btn {
    background-color: #f8f9fc;
    border: 1px solid #e3e6f0;
    color: #6e707e;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.view-toggle-btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.view-toggle-btn:hover {
    background-color: #eaecf4;
}

.view-toggle-btn.active {
    background-color: #4e73df;
    color: white;
    border-color: #4e73df;
}

/*.enviado-status {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    padding: 6px 12px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}*/
/* Enviado-Status */
.color-enviado {
    background-color: #9c56b8; /* Lila Farbton */
}

/* Status-Klasse für Zeilen */
tr.status-enviado {
    border-left: 4px solid #9c56b8; /* Lila linker Rand */
}

/* Lila Text für Enviado-Status */
.enviado-text {
    color: #9c56b8;
    font-weight: bold;
}

/* Dashboard Container */
#dashboardView {
    background-color: #f8f9fc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 30px;
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}

/* Dashboard Controls - Verbesserte Benutzerfreundlichkeit */
#dashboardView .dashboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

#dashboardView .time-period-selector {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#dashboardView .period-btn {
    background-color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #555;
}

#dashboardView .period-btn:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

#dashboardView .period-btn:hover {
    background-color: #f0f4ff;
}

#dashboardView .period-btn.active {
    background-color: #4e73df;
    color: white;
}

#dashboardView .date-range {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    background-color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#dashboardView #currentPeriodDisplay {
    margin-right: 15px;
}

#dashboardView .date-nav {
    display: flex;
    gap: 5px;
}

#dashboardView .date-nav button {
    background-color: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
}

#dashboardView .date-nav button:hover {
    background-color: #f0f4ff;
}

#dashboardView #resetPeriod {
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    background-color: #eef2ff;
}

/* Dashboard Grid - Hauptlayout */
#dashboardView .dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduzierter Abstand für mehr Kompaktheit */
    width: 100%;
}

/* Konfiguration für maximale Platznutzung */
#dashboardView .dashboard-row {
    display: flex;
    gap: 15px; /* Reduzierter Abstand für mehr Kompaktheit */
    flex-wrap: wrap;
    width: 100%;
}

/* Metrikkarten (Indikatoren) - Kompakteres Design */
#dashboardView .metric-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px; /* Reduziertes Padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 160px; /* Noch schmaler für bessere Anpassung */
}

#dashboardView .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#dashboardView .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    z-index: 1;
}

#dashboardView .metric-card.total-revenue::before {
    background-color: #4e73df;
}

#dashboardView .metric-card.total-profit::before {
    background-color: #1cc88a;
}

#dashboardView .metric-card.trip-count::before {
    background-color: #36b9cc;
}

#dashboardView .metric-card.avg-trip-value::before {
    background-color: #f6c23e;
}

#dashboardView .metric-card h3 {
    margin: 0 0 8px 0; /* Reduzierter Abstand */
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

#dashboardView .metric-value {
    font-size: 18px; /* Etwas kleinere Schriftgröße */
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
}

#dashboardView .metric-trend {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#dashboardView .metric-trend.trend-up {
    color: #1cc88a;
}

#dashboardView .metric-trend.trend-down {
    color: #e74a3b;
}

#dashboardView .metric-trend.trend-neutral {
    color: #6c757d;
}

#dashboardView .metric-trend i {
    font-size: 10px;
}

/* Diagramm-Panels - 3 in einer Reihe in PC-Ansicht */
#dashboardView .dashboard-panel {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 15px; /* Reduziertes Padding */
    position: relative;
    flex: 0 0 calc(33.33% - 10px); /* Feste Breite für genau 3 pro Reihe */
    max-width: calc(33.33% - 10px); /* Maximale Breite begrenzen */
    min-width: 240px; /* Minimale Breite für Lesbarkeit */
    margin-bottom: 15px; /* Abstand nach unten */
}

#dashboardView .chart-panel {
    min-height: 250px; /* Reduzierte Höhe */
}

#dashboardView .dashboard-panel h3 {
    margin: 0 0 10px 0; /* Reduzierter Abstand */
    font-size: 15px; /* Etwas kleinere Schriftgröße */
    font-weight: 600;
    color: #444;
}

#dashboardView .chart-container {
    position: relative;
    height: 220px; /* Reduzierte Höhe */
}

/* Für alle Diagrammreihen - 3er-Layout */
#dashboardView .dashboard-row.main-charts,
#dashboardView .dashboard-row.driver-analysis,
#dashboardView .dashboard-row.service-analysis,
#dashboardView .dashboard-row.financial-analysis,
#dashboardView .dashboard-row.time-analysis,
#dashboardView .dashboard-row.customer-analysis {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}

/* Tabellen-Panels */
#dashboardView .table-panel {
    flex: 0 0 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
}

#dashboardView .table-container {
    overflow-x: auto;
    max-height: 250px; /* Reduzierte Höhe */
    margin-top: 10px;
}

#dashboardView .table-container table {
    width: 100%;
    border-collapse: collapse;
}

#dashboardView .table-container th {
    background-color: #f8f9fc;
    padding: 8px; /* Reduziertes Padding */
    text-align: left;
    font-weight: 600;
    font-size: 12px; /* Kleinere Schriftgröße */
    color: #444;
    border-bottom: 2px solid #e3e6f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

#dashboardView .table-container td {
    padding: 8px; /* Reduziertes Padding */
    border-bottom: 1px solid #e3e6f0;
    font-size: 12px; /* Kleinere Schriftgröße */
    color: #555;
}

#dashboardView .table-container tr:hover td {
    background-color: #f8f9fc;
}

/* Heatmap-Stile */
#dashboardView .heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#dashboardView .heatmap-hour-header {
    display: flex;
    margin-bottom: 5px;
}

#dashboardView .heatmap-corner {
    width: 30px;
    flex-shrink: 0;
}

#dashboardView .heatmap-hour {
    flex: 1;
    text-align: center;
    font-size: 9px; /* Kleinere Schriftgröße */
    color: #888;
    padding: 2px 0;
}

#dashboardView .heatmap-row {
    display: flex;
    height: 22px; /* Etwas reduzierte Höhe */
    gap: 2px;
}

#dashboardView .heatmap-day {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* Kleinere Schriftgröße */
    font-weight: 600;
    color: #666;
}

#dashboardView .heatmap-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px; /* Kleinere Schriftgröße */
    font-weight: 600;
    color: #333;
    border-radius: 2px;
    transition: transform 0.15s ease;
    cursor: default;
}

#dashboardView .heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 5;
}

/* Lade-Indikatoren */
#dashboardView .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#dashboardView .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e3e6f0;
    border-top: 3px solid #4e73df;
    border-radius: 50%;
    animation: dashboard-spin 1s linear infinite;
}

@keyframes dashboard-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#dashboardView .loading-data, 
#dashboardView .no-data {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #888;
}

/* Stil für den Neuladen-Button */
.reload-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #4e73df;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reload-button:hover {
    background-color: #2e59d9;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.reload-button:active {
    transform: translateY(0);
}

/* Rotationsanimation für den Button */
@keyframes reload-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.reload-button.spinning {
    pointer-events: none; /* Verhindert Klicks während der Animation */
    animation: reload-spin 1s linear infinite;
}

    .live-datetime-container {
        background-color: #f8f9fc;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 500;
        color: #4e73df;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    #liveDateTimeDisplay {
        display: inline-block;
    }
    
    /* Anpassung für die Ansichtsumschalter, um Abstand von der Uhr zu haben */
    .view-toggle-container {
        margin-top: 10px;
    }

/* Bei größeren Auflösungen einen etwas größeren Abstand */
@media (min-width: 1400px) {
    #dashboardView .dashboard-panel {
        flex: 0 0 calc(33.33% - 20px);
        max-width: calc(33.33% - 20px);
    }
    
    #dashboardView .dashboard-row {
        gap: 20px;
    }
}

/* Bei kleineren Bildschirmen 2 pro Reihe */
@media (max-width: 1200px) {
    #dashboardView .dashboard-panel {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    
    #dashboardView .metric-card {
        min-width: calc(33.33% - 10px); /* 3 pro Reihe auf größeren Tablets */
        flex: 0 0 calc(33.33% - 10px);
    }
}

/* Responsive-Anpassungen - Tablets und große Handys */
@media (max-width: 992px) {
    #dashboardView .metric-card {
        min-width: calc(50% - 7.5px); /* 2 pro Reihe auf kleineren Tablets/großen Handys */
        flex: 0 0 calc(50% - 7.5px);
    }
}

/* Responsive-Anpassungen - Mobile */
@media (max-width: 767px) {
    #dashboardView .dashboard-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    #dashboardView .time-period-selector, 
    #dashboardView .date-range {
        width: 100%;
    }
    
    #dashboardView .date-range {
        justify-content: space-between;
    }
    
    /* Immer noch 2 Karten pro Zeile in Hochkant-Handyansicht */
    #dashboardView .metric-card {
        min-width: calc(50% - 7.5px);
        flex: 0 0 calc(50% - 7.5px);
    }
    
    /* 1 Panel pro Zeile bei sehr schmalen Bildschirmen */
    #dashboardView .dashboard-panel {
        min-width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Für sehr kleine Bildschirme */
@media (max-width: 400px) {
    #dashboardView .period-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    #dashboardView .metric-value {
        font-size: 16px;
    }
    
    #dashboardView .chart-container {
        height: 180px;
    }
}

/* Responsives Design für Ansichtsumschalter */
@media (max-width: 576px) {
    .view-toggle-container {
        width: 100%;
    }
    
    .view-toggle-btn {
        flex: 1;
        text-align: center;
    }
}

/* ==========================================================================
   INVOICE DATATABLE - CSS-STYLES
   ========================================================================== */

/* Wiederverwendung der bestehenden Finance-Styles */
#invoicesContainer {
    padding: 10px 0;
}

/* Monats-Gruppen */
.month-group {
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.month-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

/* Rechnungstabelle */
.invoices-table {
    width: 100%;
    border-collapse: collapse;
}

.invoices-table thead {
    background-color: #f8f9fc;
}

.invoices-table th {
    padding: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #dee2e6;
}

.invoices-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.invoices-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Status-Klassen */
.status-new {
    border-left: 4px solid #007bff;
}

.status-enviado {
    border-left: 4px solid #9c56b8;
}

/* Rechnungsnummer-Zelle */
.invoice-number-cell {
    font-size: 14px;
}

.invoice-number-cell strong {
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.invoice-details {
    font-size: 12px;
    color: #666;
}

.invoice-details span {
    margin-right: 10px;
}

/* Kundeninformationen */
.customer-info {
    font-size: 13px;
}

.rfc-info {
    font-size: 12px;
    color: #666;
    margin-top: 3px;
}

/* Preis-Zellen */
.price-cell {
    font-weight: 600;
    color: #28a745;
}

/* Modal-Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
}

.modal-dialog {
    position: relative;
    margin: 50px auto;
    width: 90%;
    max-width: 600px;
}

.modal-dialog.modal-lg {
    max-width: 800px;
}

.modal-dialog.modal-xl {
    max-width: 1140px;
}

.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Upload-Bereich */
.upload-section {
    margin-bottom: 30px;
}

.upload-section h5 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.file-drop-area {
    position: relative;
    cursor: pointer !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.file-drop-area input[type="file"] {
    position: absolute;
    left: -9999px;
}

.file-drop-area:hover {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.file-drop-area.drag-over {
    border-color: #28a745;
    background-color: #d4edda;
}

.file-drop-area p {
    margin: 5px 0;
    color: #666;
}

.file-drop-area i {
    color: #007bff;
}

/* Dateiliste */
.file-list {
    margin-top: 15px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 5px;
}

.file-item span {
    font-size: 13px;
    color: #333;
}

.btn-remove-file {
    background-color: transparent;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 2px 6px;
}

.btn-remove-file:hover {
    color: #a71d2a;
}

/* Upload-Button */
.upload-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.upload-btn:hover {
    background-color: #0056b3;
}

.upload-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Action Buttons */
.btn-action {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-preview {
    background-color: #17a2b8;
    color: white;
}

.btn-preview:hover:not(:disabled) {
    background-color: #138496;
}

.btn-preview:disabled {
    background-color: #d6d8db;
    color: #6c757d;
    cursor: not-allowed;
}

.btn-pago {
    background-color: #ffc107;
    color: #212529;
}

.btn-pago:hover {
    background-color: #e0a800;
}

.btn-pago-done {
    background-color: #28a745;
    color: white;
    cursor: default;
}

.btn-send {
    background-color: #007bff;
    color: white;
}

.btn-send:hover {
    background-color: #0056b3;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
}

.btn-delete:hover {
    background-color: #c82333;
}

/* Formulare */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Alert-Nachrichten */
.alert {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Close Button */
.close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
}

.close:hover {
    opacity: 0.75;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .modal-dialog {
        width: 95%;
        margin: 20px auto;
    }
    
    .invoices-table {
        font-size: 12px;
    }
    
    .invoices-table th,
    .invoices-table td {
        padding: 8px;
    }
    
    .btn-action {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .month-header {
        font-size: 16px;
        padding: 12px 15px;
    }
    
    /* Horizontales Scrollen für Tabellen auf mobilen Geräten */
    .month-group {
        overflow-x: auto;
    }
}

@media (max-width: 576px) {
    .file-drop-area {
        padding: 20px 10px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .upload-btn {
        width: 100%;
    }
}