/* Bilder responsive */
.img-fluid {
  max-width: 100%;
  height: auto;
}

img.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}



.carousel-caption h3 {
  background-color: rgba(0, 0, 0, 0.5); /* halbtransparenter schwarzer Kasten */
  display: inline-block; /* damit padding und border-radius funktionieren */
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
}



/* -------- Sticky Buttons rechts ------------------------*/
    .page-peel-container {
        position: fixed;
        right: 5px;
        top: 30%; /* Position von oben, anpassbar */
        z-index: 1000; /* sicherstellen, dass es immer sichtbar ist */
        display: flex;
        flex-direction: column;
        gap: 7px; /* Abstand zwischen den Bildern */
    }

    .page-peel-container img {
        width: 40px; /* Größe der Bilder (anpassen) */
        height: auto;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .page-peel-container img:hover {
        transform: scale(1.1); /* Animation beim Hover */
    }

    /* Responsivität */
    @media (max-width: 768px) {
        .page-peel-container img {
            width: 40px; /* kleinere Bilder auf Mobilgeräten */
        }
    }




hr {
  border-top: 3px dashed #be9651;
}

.frameemba {
  font-color: #ffffff !important;
        margin: 0;
    font-family: 'Montserrat', sans-serif;
    color:#1a1a1a;
    margin-bottom: 10px;
    font-size: 1.3rem;
    line-height: 2rem;

      border-radius: 15px; /* Abgerundete Ecken für den Kasten */
    padding: 20px; /* Innenabstand zum Rand */
  
  background-image: url("/fileadmin/Bilddatenbank/bg_blau_transparent.jpg") !important;
}

/* EmbaSpot */
.containerspot {
    background-color: #001f3f !important; /* Dunkelblauer Hintergrund */
    border-radius: 15px; /* Abgerundete Ecken für den Kasten */
    padding: 20px; /* Innenabstand zum Rand */
    position: relative;
}


.containerspot a,
.containerspot a:visited,
.containerspot a:active,
.containerspot a:focus {
    color: #fff; /* Gemeinsame Farbe für Hover, Visited, Active und Focus */
    text-decoration: none;
}

.containerspot a:hover {
    color: #fff; /* Gemeinsame Farbe für Hover, Visited, Active und Focus */
    text-decoration: underline;
}


.containerspot::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid white; /* Weiße, 1px dünne Linie */
    border-radius: 12px; /* Abgerundete Linie */
    pointer-events: none;
}

/* Container automatisch H zuweisen*/
.containerspot h1,
.containerspot h2,
.containerspot h3,
.containerspot h4,
.containerspot h5,
.containerspot h6,
.containerspot p {
    color: white !important; /* Weißer Text für alle Überschriften und Absätze */
}




.language ul {
    list-style:none;
}


/* Ensure that the slider container is positioned relatively */
.slider {
    position: relative;
}

.slick-slide {
    padding-right: 20px;
}


/* Slider Caption Text */
.carousel-caption {
  position: absolute;
  right: ((100% - $carousel-caption-width) / 2);
  bottom: 40px;
  left: ((100% - $carousel-caption-width) / 2);
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color;
  font-size: 1.6em;
}


/* Scrollup Anker */
.scrollup{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    opacity: .3;
    position: fixed;
    bottom: 20px;
    right: 25px;
    color: #fff;
    cursor: pointer;
    background-color: #000;
    z-index: 1000;
    transition: opacity .5s, background-color .5s;
    -moz-transition: opacity .5s, background-color .5s;
    -webkit-transition: opacity .5s, background-color .5s;
}

.scrollup:hover {
    background: #be9651;
    opacity: 1;
}



/****** Bilder responsive ****************/
.image-embed-item, embed, object, video {
width:100%;
max-width: 100%;
height: auto;
}



.scrollup i {
    font-size: 13px;
    position: absolute;
    opacity: 1;
    color: #fff;
    left: 50%;
    top: 50%;
    margin-top: -7px;
    margin-left: -6px;
    text-decoration: none;

}


/* Slider Konfig */
.swiper-container {
    width: 100%;
    height: 400px; /* Höhe des Sliders */
    position: relative; /* Für die Positionierung der Navigation */
}

.swiper-wrapper {
    display: flex; /* Flexbox für die horizontale Anordnung der Bilder */
}

.swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Zentriert das Bild vertikal */
    justify-content: center; /* Zentriert das Bild horizontal */
}

.slider-image {
    width: 100%;
    height: auto;
}

.swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.5); /* Farbe der Pagination-Punkte */
}




/* Gallerie bis 992px auf volle Breite */
@media (max-width: 992px) {
    .ce-gallery {
        width: 100%;
    }
}
 
/* Anpassungen von kleinen bis groeßeren Geraeten */
@media (min-width: 640px) and (max-width: 1200px) {
    .ce-gallery .ce-column {
        margin: 0;
        /* Abstand zwischen Bildern */
        padding: 0 5px;
        box-sizing: border-box;
    }
 
 
    /* Kein Abstand beim ersten und letzten Bild */
    .ce-gallery .ce-column:first-child {
        padding-left: 0;
    }
    .ce-gallery .ce-column:last-child {
        margin-right: 0;
    }
 
    /* Fluid Image Tags */
    .ce-gallery img,
    .ce-gallery picture {
        width: 100%;
        height: auto;
    }
 
    /* Spaltenbreiten je nach eingestellten Columns */
    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: 50%;
    }
 
    .ce-gallery[data-ce-columns="3"] .ce-column {
        width: 33%;
    }
 
    .ce-gallery[data-ce-columns="4"] .ce-column {
        width: 25%;
    }
 
    .ce-gallery[data-ce-columns="5"] .ce-column {
        width: 20%;
    }
}
 
/* Anpassungen fuer kleine Geraete */
@media (max-width: 640px) {
 
    /* Ein Bild pro Zeile */
    .ce-gallery .ce-column {
        margin: 0 0 10px;
        width: 100%;
        box-sizing: border-box;
    }
 
    /* Fluid Image Tags */
    .ce-gallery img,
    .ce-gallery picture {
        width: 100%;
        height: auto;
    }
}






@media (min-width: 992px) { /* Ab Desktop-Breakpoint */
    .navbar-collapse {
        display: flex !important; /* Sichtbar */
        justify-content: flex-end; /* Menüpunkte rechts ausrichten */
        align-items: center;
        background: none; /* Keine Hintergrundfarbe */
        z-index: 1000; /* Sicherstellen, dass es sichtbar ist */
    }

    .navbar-toggler {
        display: none; /* Hamburger-Icon ausblenden */
    }
}