/* CSS for the dark background */
a {
    color: orange;
}
body {

    color: #000; /* Text color on dark background */
    
}
/* Default styling for larger screens */
/* Default styling for larger screens */
.modell-kachel {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    text-align: center;
}

/* Media query for screens smaller than 767px (typical mobile devices) */
@media (max-width: 767px) {
    .col-md-2 {
        width: 50%; /* Make each column take up 50% width */
        float: left; /* Float the columns left to place them side by side */
        box-sizing: border-box; /* Include padding and border in the width calculation */
    }

    .modell-kachel {
        margin: 5px; /* Reduce margin for smaller screens */
        width: 130px !important;
    }

    .baujahr-kachel {
        width: 130px !important;
        margin: 5px; /* Reduce margin for smaller screens */
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        margin-top: 10px !important;
    }
}


.row.justify-content-end {
    justify-content: flex-end;
}

#loading-container {
    display: none;
}

.loading-container {
    position: fixed;
    left: 50%;
    margin-top: 100px !important;
    transform: translate(-50%, -50%);
}

.loader {
    display: block;
    z-index: 99;
    margin-top: 40vh;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border: 3px solid black;
    border-radius: 50%;
  
    animation: spin 7s ease-in-out;
    animation-iteration-count: infinite;
    transition-duration: 0.1s;
  }
  
  .loader:hover {
    scale: 0.95;
    /*Loader on hover effect*/
  }
  
  .loader:active {
    scale: 1.2;
    /*Loader on click effect*/
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
      border-bottom: solid 3px orange;
      border-top: solid 3px orange;
    }
    50% {
      transform: rotate(1800deg);
      border: 3px solid black;
      border-left: solid 3px orange;
      border-right: solid 3px orange;
    }
    100% {
      /*Reversed spinning*/
      transform: rotate(0deg);
      border-bottom: solid 3px orange;
      border-top: solid 3px orange;
    }
  }
  


  
#zurueck-button {
    display: block;
    margin-left:5px;
    text-align: center;
}

/* CSS for the images and text */
.hersteller-logo {
    max-width: 120px;
    max-height: 120px;
    display: block;
    margin: 20px auto; 
  
    transition: transform 0.2s, box-shadow 0.2s; /* Add transformation and shadow effects */
}

.hersteller-logo:hover {
    transform: scale(1.1); /* Enlarge the image by 10% on mouseover */
    filter: brightness(1.2); 
}

.text-center {
    text-align: center; /* Center the text horizontally */
}

.breadcrumb-container {
    display: flex;
    justify-content: center; /* Center the breadcrumbs horizontally */
    background-color: transparent; /* Transparent background for the breadcrumbs */
    padding: 10px; /* Padding for the breadcrumbs */
}

.breadcrumb {
    background-color: transparent; /* Transparent background for the breadcrumbs */
}

.breadcrumb-item.active {
    color: orange !important; /* Change active link color to orange */
}

.breadcrumb-item a.inactive {
    color: black; /* Change link color for inactive items to grey */
    pointer-events: none; /* Not clickable */
}

.breadcrumb-item + .breadcrumb-item::before {
    content: " > "; /* ">" as delimiter between breadcrumbs */
    color: orange; /* Delimiter color in orange */
    font-size: 12px;
    margin-top: 3px;
}

.breadcrumb-item.active {
    background-color: transparent !important; /* Make the background transparent */
}
.centered-logo {
    max-width: 140px; /* Adjust the size as needed */
    max-height: 140px; /* Adjust the size as needed */
    display: block;
    margin: 0 auto;
    transition: transform 0.5s ease;
    margin-bottom: 30px !important;
}

.modell-kachel {
width: 160px;
height: 70px;
background-color: white;
border: 2px solid black;
display: flex;
align-items: center;
color: black;
justify-content: center;
transition: transform 0.2s; /* Add a smooth transition effect */
margin: 5px; /* Add 5px margin */
}

.modell-kachel:hover {
font-weight: bold;
background: orange;
transform: translateY(-5px); /* Lift the element by 5px on hover */
}

.baujahr-kachel {
width: 180px;
height: 100px;
background-color: white;
border: 2px solid black;
display: flex;
align-items: center;
color: black;
justify-content: center;
transition: transform 0.2s; /* Add a smooth transition effect */
margin: 5px; /* Add 5px margin */
}

.baujahr-kachel:hover {
font-weight: bold;
background: orange;
transform: translateY(-5px); /* Lift the element by 5px on hover */
}