/* Neu-Tannenbusch 

Türkis: #11a8aa

*/

b, strong {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 700;
}

.mainheader i {
  display: none;
}

h2.mainheader {
  display: flex;
  align-items: center;
}

h2.mainheader::before {
  content: "";
  display: inline-block;
  width: 50px; 
  height: 50px; 
  background-image: url('/fileadmin/assets/Logo_Tanne_Petrol.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px; 
  margin-bottom: 20px
}

#page-content h1 {
  display: none;
}

#page-content p,
#page-content li {
  font-size: 120%;
  font-weight: 300;
}

#page-content h1,
#page-content h2,
#page-content h3,
#page-content h4,
#page-content h5,
#page-content h6 {
 font-weight: 600;
}

#page-content h3,
#page-content h2,
#page-content h5 {
  margin-top: 50px;
}

.card-text {
  font-size: 110%;
  font-weight: 300;
}

.card-title span{
  font-weight: 300;

}

input::placeholder {
  color: #666!important; 
}

.jumbotron {
  background-color: transparent!important;
}

.navbar {
  padding: 36px 0;
  border-bottom: 5px solid #11a8aa;
}

.fa-solid {
  color: #11a8aa;
}

.navbar-brand img {
  margin-right: 40px;
}

/* Color of menu toggler */
.navbar-toggler div,
.navbar-toggler::before,
.navbar-toggler::after {
    background-color: #11a8aa;
}

/* Spacer on top of item in mobile menu */
@media (max-width: 767px) {
  #nav-item-9 {
    border-top: 1px solid #dee2e6;
    margin-top: 15px;
    padding-top: 15px;
  }
}

/* Style the desktop menu in the navbar */
@media (min-width: 768px) {
  /* Hide some menu items */
  #nav-item-9, 
  #nav-item-10,
  #nav-item-11 {
    display: none;
  }
  
  /* Style the menu links */
  .nav-item a {
    color: #000!important;
    font-size: 120%!important; 
  }

  .nav-item .nav-link {
    margin: 0 10px;
    padding: 1px!important;  
  }

  .nav-item a.active,
  .nav-item a.parent-active {
    border-bottom: 5px solid #11a8aa;
    font-weight: 
  }
}

/* Sternchen zwischen Menüpunkten */
/*
@media (min-width: 768px) {
  .nav-item {
    padding-right: 8px;
    padding-top:38px;
  }
  
  .nav-item::after {
    content: "*";
    display: inline-block;
    font-size: 24px;
    position: relative; 
    top: -33px;
    left: 11px;
    float: right;
   }

   .nav-link {
     height: 35px
   }
  
   #nav-item-5::after {
     content: "";
     padding-right: 0!important;
   }
}
*/
/* ----- */


/* Logo zwischen Menüpunkten */
/*
@media (min-width: 768px) {
  .nav-item {
    padding-right: 12px;
    padding-top:25px}
  
  .nav-item::after {
    content: "";
    display: inline-block;
    background-image: url('/fileadmin/assets/Logo_Tanne_Petrol.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px; 
    height: 18px; 
    position: relative; 
    top: -30px;
    left: 15px;
    float: right;
   }

   .nav-link {
     height: 35px
   }
  
   #nav-item-5::after {
     background-image: none;
     padding-right: 0!important;
   }
}
*/
/* ----- */


.card h3 {
  hyphens: auto;
}

.card-body .small  {
  text-align: left!important;
  margin-bottom: 10px!important;
}

.card-body .small > span  {
  :before{content: '\f073'};
}

.card-body .small > span :before  {
  font-family: 'Font Awesome 5 Free'; 
  color: #11a8aa;
}

.carousel-copyright {
  position: relative;
  top: -22px;
  font-size: 14px;
  color: #fff;
  text-align: right;
  height: 0!important;
  padding: 0 7.5px 0 0;
  display: inherit!important;
}

/* Hover on linked cards */ 
a.card {
  text-decoration: none;
}
/* Ensure the card element is positioned relatively for proper overlay control */
.card {
  position: relative;
  overflow: hidden; /* Prevent image from overflowing */
  background-color: #fff; /* Initial background color */
  transition: background-color 0.3s ease-in-out; /* Smooth transition for background color */
}
/* Animate the image smoothly */
.card img {
  transition: transform 0.3s ease-in-out; /* Smooth transition for scale effect */
}
/* Scale the image and change background color when hovering over the card */
.card:hover {
  background-color: #e5f9fd; /* Change background color on hover */
}
.card:hover img {
  transform: scale(1.1); /* Scale the image slightly */
}
/* Optional: Ensure the text doesn't trigger separate visual issues */
.card-body {
  z-index: 1; /* Ensure text remains on top */
}

.footer {
  padding-top: 50px!important;
}

.card:focus {
  outline: 3px solid #11a8aa;
  outline-offset: -1px; 
}