/* =============================================
   GÜLER KRANKENTRANSPORT — Design V2 "Fleet Blue"
   Importiert style.css als Basis, überschreibt Farben & Layout
   Farbpalette abgeleitet vom neuen Logo (Transporter-Icon, Blautöne)
   ============================================= */

@import url('style.css');

/* ---- NEUE FARBPALETTE (aus Logo abgeleitet) ---- */
:root {
  --navy:       #2F5C91;
  --navy-dark:  #1B3A5C;
  --navy-light: #4A7DBB;
  --steel:      #8CA4BC;
  --red:        #D97706;
  --red-hover:  #B45309;
  --light:      #EFF4F9;
  --light-2:    #DCE7F1;
  --border:     #D3E0EC;
  --shadow-sm:  0 2px 8px rgba(47,92,145,0.08);
  --shadow:     0 4px 20px rgba(47,92,145,0.10);
  --shadow-lg:  0 10px 40px rgba(47,92,145,0.15);
}

/* =============================================
   TOP BAR
   ============================================= */
.top-bar {
  background: var(--navy-dark);
}
.top-bar .open-badge {
  background: #D97706;
}

/* =============================================
   HERO — Komplett neu: Hell statt dunkel
   ============================================= */
.hero {
  background: linear-gradient(150deg, #EFF4F9 0%, #ffffff 55%, #E4ECF5 100%);
  color: var(--dark);
  padding: 100px 0 90px;
  position: relative;
  overflow: visible;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(47,92,145,0.07) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(217,119,6,0.05) 0%, transparent 40%);
}

/* Decorative circles */
.hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 80px solid rgba(47,92,145,0.06);
  pointer-events: none;
}

.hero-badge {
  background: rgba(47,92,145,0.10);
  border: 1px solid rgba(47,92,145,0.20);
  color: var(--navy);
}
.hero-badge span {
  background: var(--navy);
}

.hero h1 {
  color: var(--navy-dark);
}
.hero h1 .highlight {
  color: var(--navy);
  position: relative;
}
.hero h1 .highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
  opacity: 0.5;
}

.hero-sub {
  color: #374151;
}

.hero-trust-item {
  color: #374151;
}
.hero-trust-item i {
  color: var(--navy);
}

.hero-main-card {
  background: rgba(47,92,145,0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(47,92,145,0.15);
  color: var(--dark);
}
.hero-main-card h3 { color: var(--navy-dark); }
.hero-main-card p { color: var(--gray); }

.hero-stat {
  background: rgba(47,92,145,0.08);
}
.hero-stat .num { color: var(--navy-dark); }
.hero-stat .label { color: var(--gray); }

.floating-badge {
  box-shadow: 0 8px 30px rgba(47,92,145,0.15);
  border: 1px solid var(--border);
}
.floating-badge i { color: var(--navy); }

/* Hero-Icon: Teal-Kreis auf hellem Hero */
.hero-main-card .van-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border: 2px solid rgba(47,92,145,0.25);
  color: white;
  box-shadow: 0 8px 24px rgba(47,92,145,0.30);
}
.hero-main-card .van-icon img {
  width: 56%;
  height: auto;
}

/* Hero-Card auf hellem Hintergrund: mehr Kontrast */
.hero-main-card {
  box-shadow: 0 12px 40px rgba(47,92,145,0.12);
  border: 1px solid rgba(47,92,145,0.15);
}
.hero-main-card h3 {
  font-size: 1.1rem;
}

/* Floating badges auf hellem Hero etwas dunkler */
.floating-badge {
  background: white;
  box-shadow: 0 6px 24px rgba(47,92,145,0.14);
}

/* =============================================
   QUICK INFO
   ============================================= */
.quick-info {
  border-top: 3px solid transparent;
}
.quick-info-grid {
  border-top: 3px solid var(--navy);
}
.quick-info-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.quick-info-item:hover {
  background: var(--light);
}

/* =============================================
   SERVICES — Karten mit Linkem Akzent
   ============================================= */
.services {
  background: #ffffff;
}

.service-card {
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}
.service-card::before {
  display: none; /* Kein Top-Border mehr */
}
.service-card:hover {
  border-left-color: var(--navy);
  transform: translateX(6px) translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.service-icon {
  background: var(--light);
  border-radius: 12px;
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.service-icon i { color: var(--navy); }

.tag-blue { background: var(--light-2); color: var(--navy-dark); }
.tag-green { background: #fef3c7; color: #92400e; }

/* =============================================
   KASSE SECTION
   ============================================= */
.kasse-section {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}

/* =============================================
   WHY US
   ============================================= */
.why-us {
  background: var(--light);
}
.why-item-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
}
.why-card-main {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}
.why-card-accent {
  background: var(--red);
  box-shadow: 0 20px 60px rgba(217,119,6,0.35);
}

/* =============================================
   HOW IT WORKS
   ============================================= */
.how-it-works {
  background: #ffffff;
}
.steps-grid::before {
  background: linear-gradient(90deg, var(--navy), var(--red));
}
.step-num {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  box-shadow: 0 4px 15px rgba(47,92,145,0.30);
}
.section-divider {
  background: linear-gradient(90deg, var(--navy), var(--red));
}

/* =============================================
   EINSATZGEBIET
   ============================================= */
.einsatzgebiet {
  background: var(--light);
}
.gebiet-extra {
  border-left-color: var(--navy);
  background: var(--light-2);
  color: var(--navy-dark);
}

/* =============================================
   ABOUT
   ============================================= */
.about {
  background: #ffffff;
}
.about-stat-icon.icon-navy {
  background: var(--light-2);
  color: var(--navy);
}
.about-stat-icon.icon-red {
  background: #fef3c7;
  color: var(--red);
}
.about-gf-avatar {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
}

/* =============================================
   FORM
   ============================================= */
.anfrage {
  background: var(--light);
}
.form-wrapper {
  background: #ffffff;
  border-color: var(--border);
}
.form-intro {
  border-left-color: var(--navy);
}
.form-intro i { color: var(--navy); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(47,92,145,0.12);
}
.form-section-title { color: var(--navy); }
.submit-btn {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  box-shadow: 0 4px 15px rgba(47,92,145,0.35);
}
.submit-btn:hover {
  box-shadow: 0 8px 25px rgba(47,92,145,0.45);
}

/* =============================================
   FAQ
   ============================================= */
.faq {
  background: var(--light);
}
.faq-item.active {
  border-color: var(--navy);
}
.faq-item.active .faq-question {
  background: var(--light-2);
}
.faq-question { color: var(--navy-dark); }
.faq-cta-card {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}
.faq-contact-item:hover {
  background: rgba(255,255,255,0.18);
}

/* =============================================
   CONTACT
   ============================================= */
.contact {
  background: #ffffff;
}
.contact-detail-icon {
  background: var(--light-2);
  color: var(--navy);
}

/* =============================================
   CTA STRIP
   ============================================= */
.cta-strip {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}
.cta-strip::before {
  background-image: radial-gradient(circle at 70% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
}

/* =============================================
   FOOTER
   ============================================= */
footer {
  background: var(--navy-dark);
}
.footer-social a:hover {
  background: var(--navy-light);
}
.footer-col ul li a i { color: var(--navy-light); }

/* =============================================
   FLOATING BUTTONS
   ============================================= */
.float-phone { background: var(--navy); }
.float-top { background: var(--navy-dark); }

/* =============================================
   INNERE SEITEN
   ============================================= */
.inner-hero {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}

/* =============================================
   SECTION BADGES (inline-style Overrides)
   ============================================= */
.badge {
  background: var(--light-2) !important;
  color: var(--navy-dark) !important;
}

/* =============================================
   NAVBAR — Subtile Teal-Akzentlinie
   ============================================= */
.navbar {
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}
.navbar.scrolled {
  border-bottom-color: var(--navy);
}
.nav-menu a::after {
  background: var(--navy);
}

/* =============================================
   ABOUT-GF SECTION CARD
   ============================================= */
.about-stat-card:hover {
  box-shadow: 0 4px 20px rgba(47,92,145,0.12);
}

/* =============================================
   BUTTONS — V2 Stil
   ============================================= */
.btn-primary {
  background: var(--navy);
  box-shadow: 0 4px 15px rgba(47,92,145,0.30);
}
.btn-primary:hover {
  background: var(--navy-dark);
  box-shadow: 0 8px 25px rgba(47,92,145,0.40);
}
.btn-secondary {
  background: white;
  color: var(--navy-dark);
  border-color: white;
}
.btn-secondary:hover {
  background: transparent;
  color: white;
}
.btn-outline {
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: white;
}