/* Style für Snackpalast - Costum Style */

/* ---- Inter Variable Font Definition ---- */
@font-face {
    font-family: 'InterVariable';
    /* Der Name, den wir im CSS verwenden werden */
    font-style: normal;
    /* Normaler Stil (nicht kursiv standardmäßig) */
    /* Der Gewichtsbereich, den diese Variable Font-Datei abdeckt */
    /* Inter deckt typischerweise 100 bis 900 ab */
    font-weight: 100 900;
    font-display: swap;
    /* Wichtig für Performance: Zeigt Fallback-Font, bis Inter geladen ist */
    /* Der Pfad zur Font-Datei, relativ zur CSS-Datei */
    src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* Optional: Falls du auch eine Slant-Achse nutzen willst (Inter hat 'slnt') */
/* @font-face {
    font-family: 'InterVariable';
    font-style: oblique -10deg 0deg; /* Definiert den Slant-Bereich */
/*  font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2');
  } */
/* ---- Ende Inter Variable Font Definition ---- */


/* Globale Variablen */
:root {
    --turquoise: #40E0D0;
    /* Ein heller Türkiston */
    --dark-turquoise: rgb(0, 121, 107);
    /* Ein dunklerer Türkiston für Akzente/Footer */
    --white: #ffffff;
    --light-gray: #f8f9fa;
    /* Bootstrap light */
    --text-dark: #212928;
    /* Bootstrap default dark text */
    --text-muted: #6c757d;
    /* Bootstrap muted text */
    --primary-color: rgb(32, 201, 151);
    /* Türkis - Bootstrap 'teal' kann auch verwendet werden */
    --light-color: #ffffff;
    --dark-color: #34403e;
    /* Bootstrap 'dark' */
}

body {
    /* font-family: sans-serif; */
    /* Alte Regel entfernen oder auskommentieren */
    font-family: "InterVariable", sans-serif;
    /* NEUE REGEL: Inter als primäre Schriftart */
    color: var(--text-dark);
    overflow-x: hidden;
    /* Optional: Verhindert künstliches Fetten/Kursivieren durch den Browser */
    font-synthesis: none;
    background-image: url("../pictures/background/webbgturnover.jpg");
    /*background-attachment: fixed;*/
}

/* Hauptcontainer für maximale Breite */
.main-container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    /* Etwas Innenabstand */
    padding-right: 15px;
}

.site-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 10px;
    overflow-x: hidden;
    /* Verhindert horizontalen Scrollbalken durch AOS */
    background-color: var(--light-color);
    /* Hintergrund für den Wrapper */
}

/* Navbar Anpassungen */
.navbar {
    border-bottom: 1px solid var(--turquoise);
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.site-title {
    color: var(--primary-color) !important;
    font-size: 28px;
}

.nav-link {
    color: var(--dark-turquoise) !important;
    /* Wichtig, um Bootstrap zu überschreiben */
    font-weight: 500;
    transition: color 0.3s ease;
    margin: 0 5px;
    /* Kleiner Abstand zwischen Links */
}

.nav-link:hover,
.nav-link.active {
    color: var(--turquoise) !important;
}

.nav-icon {
    font-size: 1.2rem;
    /* Größe der Icons */
    vertical-align: middle;
}

/* Navbar Anpassungen - AKTUALISIERT */
.navbar .nav-link {
    color: var(--dark-turquoise);
    /* Standardfarbe */
    font-weight: normal;
    font-size: 18px;
    margin: 0 8px;
    /* Etwas mehr Abstand für den Effekt */
    padding-bottom: 6px;
    /* Platz unter dem Text für den Balken schaffen */
    position: relative;
    /* Wichtig für die absolute Positionierung des ::after */
    text-decoration: none;
    /* Sicherstellen, dass keine Standard-Unterstreichung da ist */
    transition: color 0.3s ease;
    /* Behalte Farbtransition, falls gewünscht */
    background-color: transparent !important;
    /* Verhindert mögliche Bootstrap-Hintergründe bei Hover/Focus */
}

/* Der Unterstrich (als Pseudo-Element) */
.navbar .nav-link::after {
    content: '';
    /* Notwendig für Pseudo-Elemente */
    position: absolute;
    bottom: 0;
    /* Direkt unter dem padding-bottom positionieren */
    left: 0;
    /* Startet am linken Rand des Links */
    width: 100%;
    /* Nimmt die volle Breite des Links ein */
    height: 2px;
    /* Dicke des Balkens */
    background-color: var(--turquoise);
    /* Farbe des Balkens */

    transform: scaleX(0);
    /* Startet mit 0% Breite (horizontal skaliert) */
    transform-origin: left;
    /* Animation startet von links */
    /* Alternativ: transform-origin: center; (für Wachstum aus der Mitte) */
    /* Alternativ: transform-origin: right; (für Wachstum von rechts) */

    transition: transform 0.3s ease-in-out;
    /* Die Animation für das Wachsen */
}

/* Wenn über den Link gehovert wird ODER der Link den Fokus hat */
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
    transform: scaleX(1);
    /* Skaliert auf 100% Breite */
}

/* Optional: Farbänderung beim Hover/Focus beibehalten oder anpassen */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--turquoise);
    /* Leichteres Türkis beim Hover/Focus */
    /* Entferne diese Regel, wenn keine Farbänderung gewünscht ist */
}


/* Styling für den AKTIVEN Link */
.navbar .nav-link.active {
    /* Die Hauptfarbe des aktiven Links (kann gleich bleiben oder hervorgehoben werden) */
    color: var(--dark-turquoise);
    /* font-weight: bold; */
    /* Optional: Aktiven Link fett machen */
}

/* Der Unterstrich für den AKTIVEN Link (immer sichtbar) */
.navbar .nav-link.active::after {
    transform: scaleX(1);
    /* Balken ist immer auf 100% Breite */
    /* Optional: Aktiven Balken anders gestalten */
    /* background-color: var(--dark-turquoise); */
    /* height: 3px; */
}

/* Icons sollen den Effekt nicht bekommen (optional, falls sie eigene :after haben könnten) */
.navbar .nav-link .nav-icon::after {
    display: none;
    /* Verhindert, dass Icons einen Unterstrich bekommen */
}

/* ---Ende Navigation--- */

/* Hero Section mit Parallax */
.hero-section {
    height: 500px;
    background-image: url("../pictures/background/cateringbg.jpg");
    /* !!! DEIN HINTERGRUNDBILD HIER !!! */
    /* background-attachment: fixed; <-- DIESE ZEILE ENTFERNEN oder AUSKOMMENTIEREN */
    background-position: center center;
    /* Initial zentriert */
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* Für die Überlagerung */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-color);
    border-radius: 22px;
    overflow: hidden;
    /* Wichtig, damit das verschobene Bild nicht sichtbar wird */
}

.hero-section::before {
    /* Leichte Verdunklung für bessere Lesbarkeit */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);

}

.hero-section img {
    width: 30%;
}

.leadplus {
    font-size: 1.75rem;
}

.hero-content {
    position: relative;
    /* Über der Verdunklung */
    z-index: 1;
    text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.7);
    padding: 22px;
    border-radius: 22px;
    background-color: rgba(32, 201, 151, 0.75);
}

.hero-content h1 {
    font-size: clamp(1.75rem, calc(3 * 1.125vw), calc(3 * 1.1rem));
    font-weight: 700;
    letter-spacing: -.005em;
    margin-top: 0;
    margin-bottom: 1rem;
}

.mdshadow2 {
    /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.1s cubic-bezier(.25, .8, .25, 1);
}

.mdshadow2:hover {
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.19), 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* --Ende Hearosection-- */

/* Info Section */
.info-section img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.info-section ul {
    list-style: none;
    padding-left: 18px;
}

.info-section ul li::before {
    
    content:url("../pictures/aufzaehlung1.jpg")/ "Crown";
    color: var(--dark-turquoise);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.2em;
    
    /* Positionierung */
}

.info-section li::marker {
    content: ("&nbsp");
}

/* Cards */
.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card .card-title {
    color: var(--primary-color);
}

.info-section h2,
.fazit h2, .unsereleistungen h2 {
    font-size: clamp(1.75rem, 3vw, 3rem);
    /* font-size: clamp(1.75rem, calc(3 * 1.125vw), calc(3 * 1.1rem)); */
    font-weight: 700;
    letter-spacing: -.005em;
    margin-top: 0;
    margin-bottom: .16em;
    line-height: 1.25;
    color: var(--dark-turquoise) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.refkblock h2 {
    font-size: clamp(1.25rem, 2.75vw, 2.75rem);
    /* font-size: clamp(1.75rem, calc(3 * 1.125vw), calc(3 * 1.1rem)); */
    font-weight: 700;
    letter-spacing: -.005em;
    margin-top: 0;
    margin-bottom: .16em;
    line-height: 1.25;
    color: var(--light-color) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    text-align: center;
    background-color: var(--dark-turquoise);
    border: var(--turquoise) solid 1px;
    border-radius: 0.25em;
    padding-top:0.75em;
    padding-bottom: 0.75em;
}

.refkcard {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.referenzkunden ul li::before {
    
    content:url("../pictures/aufzaehlung1.jpg")/ "Crown";
    color: var(--dark-turquoise);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.2em;

}    
.unsereleistungen h3 { 
    color: var(--dark-turquoise) !important;
}
.unsereleistungen h4 { 
    color: var(--dark-turquoise) !important;
}

.trenner {
    display: block;
    text-align: center;
  }

  .imgborder {
    border: 2px solid var(--dark-turquoise);
  border-radius: var(--bs-card-border-radius);
  }


/* Footer */
.footer {
    background-color: var(--dark-color);
    color: rgba(255, 255, 255, 0.7);
    /* Etwas gedämpftes Weiß */
    padding-top: 3rem;
    padding-bottom: 1rem;
}

#leistungen a{
    text-decoration: none;
}


#leistungen a:hover {
    color: var(--light-color);
    text-decoration: underline;
}

.footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--light-color);
    text-decoration: underline;
}

.footer .footer-heading {
    color: var(--light-color);
    margin-bottom: 1rem;
    font-weight: bold;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

.footer .social-icons a {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.footer .social-icons a:last-child {
    margin-right: 0;
}

.info-section .buttonstyle, .tbutton .buttonstyle {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--light-color);
    --bs-btn-active-color: var(--light-color);
}

/* CTA Card Styling */
#cta-card-section {
    /* Optional: Fügt einen leichten Hintergrund hinzu, um sie abzuheben */
    /* background-color: var(--light-gray); */
    /* Entfernt, wenn kein extra Hintergrund gewünscht */
    overflow: hidden;
    /* Wichtig, damit die Karte nicht vor der Animation sichtbar ist */
}

.cta-card-body {
    background-color: var(--white);
    /* Weißer Hintergrund für die Karte */
    border: 2px solid var(--turquoise);
    /* Türkiser Rand */
    border-radius: var(--bs-card-border-radius);
    /* Abrundung passend zu Bootstrap */
    padding: 2rem;
    /* Mehr Innenabstand */
}


.cta-card-body2 {
    text-align: center;;
    border: 2px solid var(--turquoise);
    border-radius: var(--bs-card-border-radius);
    padding:0.2rem;
    margin-bottom: 2rem;
}

.cta-card-title {
    color: var(--dark-turquoise);
    /* Titel in dunklem Türkis */
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Buttons in der CTA-Karte anpassen */
.btn-cta {
    background-color: var(--turquoise);
    border-color: var(--turquoise);
    color: var(--text-dark);
    /* Dunkler Text auf hellem Türkis */
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--dark-turquoise);
    border-color: var(--dark-turquoise);
    color: var(--white);
    /* Weißer Text auf dunklem Türkis */
    transform: translateY(-2px);
    /* Leichter Hover-Effekt */
    box-shadow: 0 4px 8px rgba(0, 121, 107, 0.3);
}

.btn-outline-cta {
    border-color: var(--dark-turquoise);
    color: var(--dark-turquoise);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-cta:hover {
    background-color: var(--dark-turquoise);
    color: var(--white);
    transform: translateY(-2px);
    /* Leichter Hover-Effekt */
    box-shadow: 0 4px 8px rgba(0, 121, 107, 0.2);
}

/* -- Benutzerdefinierte Animation: Von Rechts einfliegen und rotieren -- */

/* 1. Keyframes definieren */
@keyframes flyAndRotateFromRight {
    0% {
        /* Startet außerhalb rechts, unsichtbar und leicht rotiert */
        transform: translateX(110%) rotateY(-60deg);
        /* Weiter draußen starten, Rotation beginnen */
        opacity: 0;
        transform-origin: left center;
        /* Rotation um die linke Kante */
    }

    60% {
        /* Fast drin, aber noch nicht ganz rotiert */
        transform: translateX(5%) rotateY(10deg);
        opacity: 1;
        /* Schon sichtbar machen */
    }

    100% {
        /* Endposition: Keine Verschiebung, keine Rotation, voll sichtbar */
        transform: translateX(0) rotateY(0);
        opacity: 1;
    }
}

/* 2. Initialzustand für das Element (bevor die Animation startet) */
.card[data-aos="fly-rotate-right"] {
    opacity: 0;
    /* Startet unsichtbar */
    /* Verhindert, dass es vor der Animation sichtbar ist */
    transition: opacity 0.5s ease;
    /* Sanfteres Einblenden falls nötig */
}


/* 3. Animation anwenden, wenn AOS die Klasse 'aos-animate' hinzufügt */
.card[data-aos="fly-rotate-right"].aos-animate {
    animation: flyAndRotateFromRight 1s ease-out forwards;
    /* Wende die Keyframe-Animation an */
    /* 'forwards' behält den Endzustand (100%) bei */
    /* Dauer und Easing sollten zum data-aos-duration/easing passen oder hier angepasst werden */
    opacity: 1 !important;
    /* Sicherstellen, dass es sichtbar wird/bleibt */
}

/* WICHTIG: Sicherstellen, dass der Container den Überlauf verbirgt */
#cta-card-section {
    overflow-x: hidden;
    /* Verhindert horizontales Scrollen durch das Element außerhalb des Bildschirms */
}
/* Modal Anpassungen */
.modal-header {
    border-bottom: 1px solid var(--turquoise);
}

.modal-title {
    color: var(--dark-turquoise);
}

.modal-body img {
    max-height: 80vh; /* Verhindert, dass das Bild zu hoch wird */
    width: auto; /* Behält Proportionen bei */
    max-width: 100%; /* Stellt sicher, dass es nicht breiter als der Modal wird */
    border-radius: 5px;
}
/* Galerie Anpassungen */
.gallery-item a {
    display: block;
    overflow: hidden; /* Wichtig für den Zoom-Effekt */
    border-radius: 0.25rem; /* Abrundung wie bei img-fluid */
    position: relative; /* Für mögliche Overlays */
}

.gallery-item img {
    transition: transform 0.4s ease, box-shadow 0.3s ease;
    width: 100%; /* Stellt sicher, dass das Bild den Container füllt */
    height: auto;
    display: block;
}

.gallery-item img:hover {
    transform: scale(1.08); /* Zoom-Effekt beim Hover */
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0, 121, 107, 0.3); /* Schatten mit dunklem Türkis */
} 
/* -- Modal Navigation Buttons -- */
.modal-body {
    padding: 0; /* Entferne Standard-Padding, wenn Buttons überlagern */
}

.btn-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Über dem Bild */
    background-color: rgba(0, 0, 0, 0.4); /* Halbtransparenter Hintergrund */
    color: white;
    border: none;
    border-radius: 50%; /* Rund */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background-color 0.2s ease;
}

.btn-modal-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.btn-modal-nav.prev {
    left: 15px; /* Abstand vom linken Rand */
}

.btn-modal-nav.next {
    right: 15px; /* Abstand vom rechten Rand */
}

/* Stelle sicher, dass das Bild selbst keinen Klick blockiert (falls nötig) */
#modalImage {
    display: block; /* Verhindert manchmal unerwünschten Leerraum */
    max-height: 85vh; /* Höhe leicht reduziert für Buttons */
    width: auto;
    margin: auto; /* Zentriert, falls Breite geringer als Modal */
}

/* -- Cookie Banner Styling -- */




.cookie-banner .main-container {
    /* Stellt sicher, dass der Inhalt die max-width respektiert */
    width: 100%;
}

/* ---- Cookie Banner Styling ---- */
.cookie-banner1 {
    /*position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;*/
    opacity: 0;
    visibility: hidden;
    background-color: rgba(33, 37, 41, 0.95); /* Dunkler Hintergrund, leicht transparent */
    color: white;
    /* padding: 15px 20px; */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 1060; /* Über den meisten Elementen, aber unter Modals etc. */
    /* display: none; Wird per JS angezeigt */
    transform: translateY(100%); /* Startet unterhalb des sichtbaren Bereichs */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0s linear 0.5s;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
}

.cookie-banner {
    z-index: 1060; /* Über den meisten Inhalten, aber unter/gleich Modals */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%); /* Startet unterhalb des sichtbaren Bereichs */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0s linear 0.5s;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem; /* Etwas kleinerer Text */
        background-color: rgba(33, 37, 41, 0.95); /* Dunkler Hintergrund, leicht transparent */
    color: white;

}

/* Zustand, wenn der Banner sichtbar ist (wird per JS hinzugefügt) */
.cookie-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0s linear 0s;
}

.cookie-banner-content {
    max-width: 1024px; /* Passt zur Hauptbreite */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Umbruch bei wenig Platz */
}

.cookie-banner-content p {
    margin-bottom: 0;
    margin-right: 15px;
    flex-grow: 1; /* Text nimmt verfügbaren Platz ein */
}

.cookie-banner-link {
    color: var(--turquoise);
    text-decoration: underline;
    cursor: pointer;
}

.cookie-banner-link:hover {
    color: var(--white);
}

.cookie-banner-actions button {
    margin-left: 10px;
}

.btn-cookie-accept {
    background-color: var(--turquoise);
    color: var(--text-dark);
    border: 1px solid var(--turquoise);
}
.btn-cookie-accept:hover {
    background-color: var(--dark-turquoise);
    color: var(--white);
    border-color: var(--dark-turquoise);
}

.btn-cookie-decline {
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}
.btn-cookie-decline:hover {
    background-color: var(--white);
    color: var(--text-dark);
}


/* ---- Privacy Policy Overlay Styling ---- */
.privacy-policy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
    z-index: 1060; /* Über dem Cookie-Banner und anderen Elementen */
    display: none; /* Wird per JS angezeigt */
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto; /* Scrollbar, falls Inhalt zu lang */
}

.privacy-policy-content {
    background-color: white;
    padding: 25px 30px;
    border-radius: 8px;
    max-width: 800px; /* Maximale Breite des Fensters */
    width: 90%; /* Responsiv */
    max-height: 90vh; /* Maximale Höhe, um Scrollen zu ermöglichen */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    position: relative; /* Für den Schließen-Button */
    display: flex;
    flex-direction: column;
}

.privacy-policy-content h2 {
    color: var(--dark-turquoise);
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.privacy-policy-text-container {
    overflow-y: auto; /* Scrollbar für den Textinhalt */
    flex-grow: 1; /* Nimmt verfügbaren Platz in der Höhe ein */
    padding-right: 15px; /* Platz für die Scrollbar */
}
.privacy-policy-text-container p {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-dark);
}
.privacy-policy-text-container strong {
    color: var(--dark-turquoise);
}


.btn-close-privacy {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem; /* Größerer Schließen-Button */
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.btn-close-privacy:hover {
    color: var(--dark-turquoise);
}

/* Responsivität für den Cookie-Banner */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .cookie-banner-content p {
        margin-bottom: 10px;
        margin-right: 0;
    }
    .cookie-banner-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* -- Image Carousel Styling -- */
#image-carousel-section {
    /* bg-light ist im HTML als Beispiel */
}

.carousel-item {
    /* Feste Höhe für die Slides, damit das Layout nicht springt */
    /* Passe dies an die gewünschte Höhe deiner Bilder an */
    min-height: 350px; /* Beispielhöhe, anpassen! */
    max-height: 450px; /* Beispielhöhe, anpassen! */
    background-color: #e9ecef; /* Platzhalterfarbe, falls Bilder nicht die volle Höhe haben */
}

.carousel-img {
    object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt, ohne das Seitenverhältnis zu verzerren */
    width: 100%;
    height: 100%; /* Nimmt die Höhe des .carousel-item ein */
    min-height: inherit; /* Erbt die Mindesthöhe */
    max-height: inherit; /* Erbt die Maximale Höhe */
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Lesbarkeit */
    border-radius: 0.25rem;
    padding: 1rem;
    bottom: 1.5rem; /* Etwas mehr Abstand von unten */
}
.carousel-caption h5 {
    color: var(--white);
    font-weight: bold;
}
.carousel-caption p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Styling der Indikatoren (Punkte) */
.carousel-indicators [data-bs-target] {
    background-color: var(--dark-turquoise); /* Dunkleres Türkis für inaktive Punkte */
    opacity: 0.7;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px; /* Abstand zwischen den Punkten */
    border-top: none; /* Bootstrap Standard-Border entfernen */
    border-bottom: none;
}

.carousel-indicators .active {
    background-color: var(--turquoise); /* Helles Türkis für den aktiven Punkt */
    opacity: 1;
}

/* Styling der Pfeile (Controls) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.4); /* Halbtransparenter Hintergrund */
    border-radius: 50%;
    padding: 1.2rem; /* Vergrößert den klickbaren Bereich und das Icon */
    background-size: 50% 50%; /* Macht das eigentliche Pfeil-SVG kleiner im Hintergrund */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(0, 0, 0, 0.7);
}