/*
Dies ist die Haupt-CSS-Datei der Kochbullen Webseite.
Hier werden die Stile für die gesamte Seite definiert, einschließlich Header, Footer, Navigation und
verschiedener Sektionen. Die Datei enthält auch Animationen und responsive Design-Elemente.

Wir nutzen Bootstrap für das Aussehen unserer Webseite und erweitern es mit eigenen Stilen.
*\

/*
The MIT License (MIT)

Copyright (c) 2011-2018 Twitter, Inc.
Copyright (c) 2011-2018 The Bootstrap Authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s, color 0.5s, transform 0.3s;
    background-color: #f8f9fa;
    color: #343a40;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

header {
    padding: 1.5em 0;
    text-align: center;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dropdown-item:active {
    background-color: #f8bc01;
    color: rgba(51,51,51,255);
    border-radius: 2px;
}

.navbar {
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.navbar-nav .nav-item {
    margin-right: 1rem;
}

.navbar-nav .nav-link {
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #ff6f61;
}

/* Animation for dropdown menu */
.dropdown-menu {
    animation: unfold 0.5s ease-in-out;
}

@keyframes unfold {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Responsive Styles for Navbar */
@media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }

    .navbar-toggler {
        margin-left: auto;
    }
}

.main {
    margin-top: 3em;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 1.5em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #ff6f61;
    transform: scale(1.1);
}

.dropdown-menu {
    animation: smoothDropdown 0.5s ease-in-out;
}

@keyframes smoothDropdown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    padding: 2em;
    text-align: center;
    position: relative;
    animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

button {
    padding: 0.5em 1em;
    margin-top: 1em;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: #ff6f61;
    color: white;
    font-size: 1em;
    transition: background-color 0.3s, transform 0.3s;
}

button:hover {
    background-color: #e85b4e;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.light-mode {
    background-color: #f5f5f5;
    color: #333;
}

.dark-mode {
    background-color: #333;
    color: #f5f5f5;
}

.profile-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.profile-image {
    flex-shrink: 0;
}

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

.gif {
    border-radius: 5px;
    width: 20%;
}

.flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.center {
    align-items: center;
    justify-content: center;
}

.navbar-brand {
    font-weight: bolder;
}

.text {
    font-weight: bolder;
    font-size: larger;
}

.kochbullen_color {
    color: #f8bc01;
}

/* Responsive Styles */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    .navbar-nav .nav-item {
        margin: 1rem 0;
    }

    .flexbox {
        flex-direction: column;
    }

    .gif {
        width: 80%;
    }
}

.typewriter {
    overflow: hidden;
    border-right: .15em solid rgb(0, 0, 0);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 
      typing 3.7s steps(40, end),
      blink-caret .75s step-end infinite;
}
  
/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
  
/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(0, 0, 0); }
}
  
.vorschau {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out;
}

.vorschau:hover {
    transform: scale(1.05);
}

.vorschau:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.scaled-table {
    width: min-content;  /* Set a much smaller width for the table */
    height: 30%; /* Set a smaller height for the table */
    display: block; /* Ensure the table is a block element */
    overflow: auto; /* Enable scrolling if contents exceed the set height */  
    border-radius: 10px; /* Add rounded corners to the table */
    border: 1px solid #ddd; /* Add a border to the table */
    padding: 0 auto; /* Center the table */
    margin: 0.4%;
    margin-bottom: 1%;
}
.scaled-table table {
    width: auto; /* Ensure table takes full width of its container */
    height: 100%; /* Ensure table takes full height of its container */
    table-layout: fixed; /* Ensure columns have fixed width */
}
.scaled-table th, .scaled-table td {
    width: 30px; /* Set a much smaller width for table cells */
    height: 20px; /* Set a much smaller height for table cells */
    font-size: 16px; /* Increase font size */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowed text */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    border-radius: 5px;
}
  
.seperator {
    margin: 10px;
    padding: 0.05%;
    padding-top: 1%;
    border-top: 3px solid #ddd; /* Add a border to separate content */
    width: 100%; /* Set the width to 100% */
}

.txt {
    font-weight: semi-bold;
}

.event-link:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

.event-link:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.event_title {
    font-weight: bolder;
}

.event-card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out;
}

.event-card:hover {
    transform: scale(1.05);
}

.event-card:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.nav-item-custom {
    margin-top: 0%;
    margin-bottom: 0%;
}

.main-button {
    border-style: solid;
    border-radius: 0px;
    border-color: #f8bc01;
    background-color: rgba(46, 49, 51, 0.5);
    border-width: 1%;
    font-weight: bolder;
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 5%;
}

.main-button:hover {
    background-color: rgba(43, 45, 46, 0.5);
    transform: translateY(-5px);
}

.main-button:active {
    transform: scale(1.07);
    transition: transform 0.2s ease;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0%;
    padding: 0%;
}

.base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0%;
    padding: 0%;
    margin-bottom: 3rem;
    height: auto;

    /* Default for mobile */
    width: 95%;

    /* For larger screens (desktop) */
    @media (min-width: 768px) {
        width: 40%;
    }

}

.base-button {
    /*
    border-style: solid;
    border-radius: 0px;
    border-color: #f8bc01;
    border-width: 1%;
    */
    /* background-color: rgba(46, 49, 51, 0.5); */
    background-color: rgba(0, 0, 0, 0);
    color: rgba(51,51,51,255);
    font-weight: bolder;
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 5%;
    position: static;
    padding: 0%;
    margin: 0%;
}

.base-button:hover {
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(-5px);
}

.base-button:active {
    transform: scale(1.07);
    transition: transform 0.2s ease;
    box-shadow: none;
}

.gruppenbild {
    width: 70%;
    height: auto;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out;
}

.seite {
    height: auto;
    width: 75%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    border-radius: 15px;
}

.carousel-control-prev-icon {
    background-image: url('../images/icons/prev.svg');
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.carousel-control-next-icon {
    background-image: url('../images/icons/next.svg');
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.carousel-control-prev:active {
    background-color: rgba(0, 0, 0, 0);
    transform: scale(1.1);
    box-shadow: none;
}

.carousel-control-next:active {
    background-color: rgba(0, 0, 0, 0);
    transform: scale(1.1);
    box-shadow: none;
}

.carousel-control-prev:hover {
    background-color: rgba(0, 0, 0, 0);
    transform: scale(1.1);
}

.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0);
    transform: scale(1.1);
}

.carousel {
    width: 60%;
    height: auto;
    margin-top: 0.5%;
}

.carousel:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.carousel:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.d-block {
    border-radius: 12px;
}


.carousel-indicators button.active {
    background-color: #f8bc01;
    opacity: 1;
}

.carousel-indicators button:hover {
    transform: scale(1.2);
}

.carousel-caption {
    color: #f8bc01;
    font-weight: semi-bold;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-bottom: 3rem;
    padding-bottom: 0%;
    margin-bottom: 2rem;
}

.carousel-caption h6 {
    font-size: 1.3rem;
    font-weight: bolder;
}

/* Styles for ingredient cards on kitchen page */
.ingredient-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ingredient-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.ingredient-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    flex-shrink: 0;
}

.ingredient-img-side {
    height: 120px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px 0 0 12px;
    max-height: 120px;
    min-height: 120px;
    display: block;
}

.ingredient-card .card-title {
    color: #333;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
}

.ingredient-card .card-text {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    flex-grow: 1;
}

.dish-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dish-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.dish-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    flex-shrink: 0;
}

.dish-img-side {
    height: 120px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px 0 0 12px;
    max-height: 120px;
    min-height: 120px;
    display: block;
}

.dish-card .card-title {
    color: #333;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
}

.dish-card .card-text {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    flex-grow: 1;
}

/* Enhanced responsiveness for ingredient and dish cards */
@media (max-width: 768px) {
    .ingredient-img, .dish-img {
        height: 150px;
    }

    .ingredient-card .card-title,
    .dish-card .card-title {
        font-size: 1.1rem;
    }

    .ingredient-card .card-text,
    .dish-card .card-text {
        font-size: 0.85rem;
    }

    .ingredient-img-side,
    .dish-img-side {
        width: 100%;
        height: 100px;
        max-height: 100px;
        min-height: 100px;
        border-radius: 12px 12px 0 0;
    }

    .row.g-0 {
        flex-direction: column;
    }

    .card-body {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .ingredient-img, .dish-img {
        height: 120px;
    }

    .ingredient-card .card-title,
    .dish-card .card-title {
        font-size: 1rem;
    }

    .ingredient-card .card-text,
    .dish-card .card-text {
        font-size: 0.8rem;
    }

    .ingredient-img-side,
    .dish-img-side {
        border-radius: 12px 12px 0 0;
        height: 80px;
        max-height: 80px;
        min-height: 80px;
    }

    .row.g-0 {
        flex-direction: column;
    }

    .col-md-6 > .card,
    .col-md-4 > .card,
    .col-md-8 > .card {
        flex-direction: column;
    }

    .row.g-0 .img-fluid {
        width: 100%;
        border-radius: 12px 12px 0 0;
        height: 80px;
        max-height: 80px;
        min-height: 80px;
    }
}

/* Catering page specific styles */
.catering-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.catering-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.catering-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    flex-shrink: 0;
}

.service-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,.125);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

/* Catering page specific styles */
.catering-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.catering-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.catering-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    flex-shrink: 0;
}

.service-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,.125);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.contact-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    background-color: #f8f9fa;
}

/* Kochschule page specific styles */
.course-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.course-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    flex-shrink: 0;
}

.ingredient-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ingredient-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.ingredient-img-side {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 12px 0 0 12px;
    min-height: 150px;
    display: block;
    flex: 1;
    overflow: hidden;
}

.feature-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(43, 43, 43, 0.3);
}

.testimonial-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(43, 43, 43, 0.2);
}

/* Additional icons and elements for kochschule */
.check-icon {
    font-size: 1.5rem;
    color: #28a745;
    font-weight: bold;
}

.check-icon-svg {
    color: #28a745;
    fill: none;
}

.feature-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 2px solid #e9ecef;
}

.feature-icon-circle span {
    font-size: 1.5rem;
    color: #f8bc01;
}

.feature-icon-svg {
    width: 30px;
    height: 30px;
    max-width: 100%;
    max-height: 100%;
}

.course-details small {
    display: block;
    margin-bottom: 0.25rem;
    color: #666;
}

.course-details small span.time-icon,
.course-details small span.level-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background-color: #f8f9fa;
    font-size: 0.8rem;
    margin-right: 8px;
    color: #666;
    font-weight: bold;
}

.course-details small i {
    margin-right: 0.5rem;
    font-style: normal;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background-color: #f8f9fa;
    font-size: 0.8rem;
    margin-right: 8px;
    color: #666;
}

.feature-icon-text {
    font-size: 2rem;
}

.quote-text {
    font-size: 2rem;
    color: #ccc;
    font-weight: bold;
}

.testimonial-author {
    margin-top: 1rem;
}

.btn-primary {
    background-color: #f8bc01;
    border-color: #f8bc01;
    padding: 10px 20px;
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #333;
}

.feature-icon-text {
    font-size: 2rem;
}

.quote-icon-svg {
    color: #f8bc01;
    opacity: 0.3;
}

.testimonial-author {
    margin-top: 1rem;
}

.btn-primary {
    background-color: #f8bc01;
    border-color: #f8bc01;
    padding: 10px 20px;
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #333;
}

.card-body {
    padding: 1rem;
}

.navbar-toggler:hover {
    background-color: #f8bc01;
}

.navbar-toggler:active {
    border: none;
    outline: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler {
    border: none;
    outline: none;
    margin: 0%;
}

.nav-mobile:active {
    background-color: #f8bc01;
}

h1, h2, h3 {
    font-family: 'NunitoSans', sans-serif;
    font-style: normal;
}

.heading {
    font-family: 'NunitoSans', sans-serif;
    font-style: normal;
    line-height: 1.2em; 
    font-size: calc(1.2rem + 1.5vw);
    font-weight: 400;
}

.kontakt-link {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kontakt-link:hover {
    color: #f8bc01; 
    text-decoration: none;
}

.kontakt-type {
    font-weight: bold;
}

.kontakt-type a {
    font-weight: normal;
}

.lieferanten-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out;
    width: 90%;
    max-width: 800px;
    height: fit-content;
    margin: 20px auto;
    padding: 15px;
    background-color: white;
}

.lieferanten-box:hover {
    transform: scale(1.02);
}

.lieferant-img {
    max-width: 150px;
    height: auto;
    max-height: 80px;
    margin-right: 15px;
    object-fit: contain;
    flex-shrink: 0;
}

.lieferant-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
}

.lieferant-text h3 {
    margin: 0 0 8px 0;
    color: #333;
}

.lieferant-text p {
    margin: 0;
    word-wrap: break-word;
    line-height: 1.5;
}

/* Responsive adjustments for supplier boxes */
@media (max-width: 768px) {
    .lieferanten-box {
        flex-direction: column;
        text-align: center;
        width: 95%;
        padding: 20px;
        align-items: center;
    }

    .lieferant-img {
        margin-right: 0;
        margin-bottom: 15px;
        max-width: 200px;
        max-height: 100px;
    }

    .lieferant-text {
        text-align: center;
        width: 100%;
    }

    .lieferant-text h3, .lieferant-text p {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .lieferanten-box {
        width: 98%;
        margin: 15px auto;
        padding: 15px;
    }

    .lieferant-img {
        max-width: 150px;
        max-height: 70px;
    }
}

.location-mark:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

.location-mark:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.admin-anmeldung-button {
    background-color: #f8bc01;
    color: rgba(51,51,51,255);
    border: none;
    padding: 0.5em 1em;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 30%;
    height: auto;
}

.admin-anmeldung-button:hover {
    background-color: #f8bc01;
    border: none;
}

.admin-anmeldung-button:active {
    background-color: #f8bc01;
    border: none;
}

.admin-login-form-button {
    background-color: #f8bc01;
    color: rgba(51,51,51,255);
    border: none;
    padding: 0.5em 1em;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 30%;
    height: auto;
}

.admin-login-form-button:hover {
    background-color: #f8bc01;
    border: none;
}

.admin-login-form-button:active {
    background-color: #f8bc01;
    border: none;
}

.admin-login-form-inputs {
    border-radius: 14px;
}

.admin-login-form-inputs:focus {
    border-color: #f8bc01;
    box-shadow: 0 0 5px rgba(248, 188, 1, 0.5);
}

.dashboard-option { 
    width: fit-content;
    height: auto;
    padding: 1.5em;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(43, 43, 43, 0.2);
    transition: transform 0.3s ease-in-out;
}

.dashboard-option:hover {
    transform: scale(1.05);
}

.dashboard-option:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.dashboard-option-title {
    font-size: 2em;
    font-weight: 900;
    margin-bottom: 0.5em;
}

.dashboard-option-button {
    background-color: #f8bc01;
    border: none;
    padding: 0.5em 1em;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dashboard-option-button:hover {
    background-color: #f8bc01;
}

.dashboard-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
    margin-top: 2em;
}

.event-creation-form-button {
    background-color: #f8bc01;
    color: rgba(51,51,51,255);
    border: none;
    padding: 0.5em 1em;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 30%;
    height: auto;
}

.event-creation-form-button:hover {
    background-color: #f8bc01;
    border: none;
}

.event-creation-form-button:active {
    background-color: #f8bc01;
    border: none;
}

.event-creation-form-inputs {
    border-radius: 14px;
}

.event-creation-form-inputs:focus {
    border-color: #f8bc01;
    box-shadow: 0 0 5px rgba(248, 188, 1, 0.5);
}

/* Nametag styles for employee portraits */
.employee-container {
    position: relative;
    display: inline-block;
}

.nametag {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    z-index: 10;
}

.carousel-item img {
    border-radius: 8px;
}

/* Employee text visibility */
.employee-text {
    display: none;
}

.employee-text.active {
    display: block;
}