/* Allgemeine Link-Styles */
a {
    font-family: 'Helvetica', sans-serif;
    font-weight: 300;
    color: black;
    text-decoration: none;
    transition: transform 0.3s ease; /* Übergang für Vergrößerung */
}

/* Hover-Effekt für alle Links */
a:hover {
    color: darkred !important;
    text-decoration: none !important;
    transform: scale(1.1); /* Vergrößert den Text leicht beim Hover */
}

/* Größere Schriftgröße für bestimmte Links */
.large-text {
    font-size: 1.5rem; /* Oder eine größere Schriftgröße */
}

.light-text {
    font-family: 'Helvetica', sans-serif;
    font-weight: 300; /* 300 entspricht Helvetica Light */
}

.small-spacing {
    margin: 0; /* Setzt den oberen und unteren Abstand auf 0 */
    padding: 0; /* Setzt den Innenabstand auf 0 */
}

/* Spezifische Regel für Links mit der Klasse "text-body" */
a.text-body:hover {
    color: darkred !important; /* Hover-Farbe nur für diese Links */
    text-decoration: none !important;
}

body {
    font-family: 'Helvetica', sans-serif;
    margin: 0; /* Entfernt den Standardabstand des Body */
    padding: 0; /* Entfernt das Standard-Padding des Body */
    background-color: white;
}

h1 {
    margin-bottom: 0; /* Setzt den unteren Abstand des H1 auf 0 */
}

.carousel {
    margin-top: 0;
}

.carousel-inner {
    margin: 0; /* Setzt den Abstand für das Carousel-Innere auf 0 */
}

.carousel-item img {
    max-height: 500px; /* Optional: Maximalhöhe für Bilder im Carousel */
    object-fit: cover; /* Stellt sicher, dass die Bilder das Seitenverhältnis beibehalten */
    width: 100%;
    height: 500px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Breite der Pfeile */
    top: 50%; /* Vertikale Mitte */
    transform: translateY(-50%); /* Zentrieren */
}

.carousel-control-prev {
    left: -20px; /* Verschiebe die linke Pfeil nach außen */
}

.carousel-control-next {
    right: -20px; /* Verschiebe den rechten Pfeil nach außen */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: transparent; /* Hintergrund transparent */
    filter: brightness(0) invert(0); /* Mache die Pfeile schwarz */
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0.7) invert(0); /* Mache die Pfeile etwas dunkler bei Hover */
}

.table-header {
    font-size: 1.5rem;
}

.custom-image-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Maximale Breite der Bilder */
    height: 400px; /* Einheitliche Höhe für alle Bilder */
    margin: 0 auto; /* Zentriert die Bilder innerhalb der Spalte */
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild vollständig das Containerfeld ausfüllt */
    filter: blur(5px); /* Standardmäßige Unschärfe */
    transition: filter 0.3s ease, opacity 0.3s ease; /* Übergang für Bild und Text */
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center;
    opacity: 1; /* Text anfangs sichtbar */
    transition: opacity 0.3s ease; /* Weicher Übergang für Text */
}

.custom-image-container:hover .gallery-img {
    filter: blur(0); /* Unschärfe entfernen beim Hover */
}

.custom-image-container:hover .text-overlay {
    opacity: 0; /* Text ausblenden beim Hover */
}

.text-overlay {
    font-family: 'Helvetica', sans-serif;
    font-weight: 300;
}

/* Für gleichmäßigen Abstand zwischen den Spalten (waagerecht) */
.row {
    margin-left: 0;
    margin-right: 0;
}

.col-md-6 {
    padding-left: 15px; /* Abstand zwischen den Spalten */
    padding-right: 15px;
    display: flex;
    justify-content: center; /* Zentriere die Bilder in der Spalte */
}