/* Blog-Container */
.blog-item {
    position: relative; /* Damit der Button sich relativ zu diesem Container positioniert */
    padding: 15px; /* Abstand innerhalb der Karte */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    background-color: #f8f9fa;
}

/* Bildstil */
.blog-image img {
    width: 100%; /* Dynamische Breite */
    max-width: 250px; /* Maximale Breite für Desktop */
    height: auto; /* Dynamische Höhe */
    border-radius: 8px;
    margin-bottom: 10px; /* Abstand zwischen Bild und Text */
}

/* Blog-Content-Stil */
.blog-content h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.blog-content p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 40px; /* Platz für den Button */
}

/* Button-Stil */
.blog-item .btn {
    position: absolute; /* Absolut im Container */
    bottom: 15px; /* 15px vom unteren Rand entfernt */
    right: 15px; /* 15px vom rechten Rand entfernt */
    font-size: 0.8rem;
    padding: 8px 15px;
    white-space: nowrap; /* Kein Zeilenumbruch */
    border-radius: 5px;
}

/* Mobile spezifische Anpassungen */
@media (max-width: 768px) {
    .blog-item {
        text-align: center; /* Inhalte zentrieren */
        padding: 20px; /* Innenabstand erhöhen */
    }

    .badge {
        position: absolute; /* Platzierung oben rechts */
        top: 10px;
        right: 15px;
        font-size: 0.8rem; /* Kleinere Schrift für Badge */
    }

    .blog-image img {
        max-width: 100%; /* Bild nimmt gesamte Breite ein */
        height: auto;
        margin-bottom: 15px; /* Abstand zum Text */
    }

    .blog-item h4 {
        font-size: 1.2rem; /* Überschrift bleibt konsistent */
        margin-bottom: 10px; /* Abstand zur Beschreibung */
    }

    .blog-item p {
        font-size: 0.9rem;
        margin-bottom: 60px; /* Platz für den Button */
    }

    .blog-item .btn {
        font-size: 0.75rem; /* Kleinere Schrift für Button */
        padding: 8px 15px; /* Kompakte Größe */
        bottom: 15px; /* Abstand vom unteren Rand */
        right: 15px; /* Abstand vom rechten Rand */
    }
}
.card {
    background-color: #ffffff; /* Weiße Karten */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sanfte Schatten */
}

#map {
    border: 1px solid #ddd; /* Umrandung für die Karte */
    border-radius: 8px; /* Abgerundete Ecken */
}

#calendar {
    background-color: #dae7f1; /* Leichter Farbhintergrund */
    color: #000; /* Standardfarbe für Text */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Leichter Schatten für den Kalender */
}

.fc-daygrid-day {
    border: 1px solid rgba(0, 0, 0, 0.1); /* Gitterlinien für die Tage */
    background-color: #fff; /* Weißer Hintergrund für die Tage */
}

.fc-daygrid-day:hover {
    background-color: #c2d6d6; /* Leichter Orange-Hintergrund bei Hover */
}

.fc-daygrid-event {
    background-color: #ffece6 !important; /* Orange für Event-Hintergrund */
    border: none !important; /* Kein Rahmen für Events */
    color: #fff !important; /* Weißer Text für Events */
    border-radius: 4px; /* Abgerundete Ecken für Events */
    padding: 2px 5px; /* Innenabstand für Events */
}

.fc-event {
    border: none !important; /* Kein Rahmen um Events */
    color: #ffffff !important; /* Weißer Text für Events */
}

.fc-tooltip {
    background-color: rgba(50, 50, 50, 0.9); /* Dunkler Tooltip-Hintergrund */
    color: #ffffff; /* Weißer Text */
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten */
    font-size: 0.9rem;
}

.fc-daygrid-event {
    justify-content: center; /* Text zentrieren */
}

@media (max-width: 768px) {
    .fc-daygrid-day {
        font-size: 0.85rem; /* Kleinere Schrift für Tagesansicht */
    }

    #events-container h5 {
        font-size: 1rem; /* Anpassung der Überschriften in Events */
    }

    #events-container p {
        font-size: 0.9rem; /* Klarere Lesbarkeit für Beschreibungen */
        margin-bottom: 10px; /* Einheitlicher Abstand */
    }
}

/* Tabelle für die mobile Ansicht */
@media (max-width: 768px) {
    .table {
        border-spacing: 0; /* Kein Leerraum zwischen Zellen */
        width: 100% !important;
    }

    .table td {
        display: block; /* Blöcke für vertikale Ansicht */
        width: 100% !important;
        max-height: 80% !important;
     }

    .card-body {
        width: 100% !important;
        max-height: 100% !important;

    }
}

.shadow-box {
    box-shadow: 0 4px 8px rgba(255, 69, 0, 0.4); /* Orange Schatten */
    margin-bottom: 20px; /* Abstand zwischen Tabellen */
    border-radius: 10px; /* Abgerundete Ecken */
    background-color: #fff; /* Weißer Hintergrund */
}
td {
    vertical-align: top; /* Inhalt nach oben ausrichten */
    padding: 12px; /* Abstand innerhalb der Zellen */
}

    .highlight-box {
        display: flex;
        align-items: center;
        background-color: #fff4e6; /* Sanftes Orange */
        border: 1px solid #ffd6a5;
        color: #663c00; /* Dezentes Braun */
        border-radius: 12px;
        padding: 15px 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
        position: relative; /* Für das Schließen-Icon */
    }

    .highlight-box i {
        font-size: 1.5rem;
        color: #ff6f00; /* Dezent warmes Orange für das Icon */
        margin-right: 15px;
    }

    .highlight-box .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.2rem;
        cursor: pointer;
        color: #b5651d;
        border: none;
        background: none;
    }

    .highlight-box .close-btn:hover {
        color: #802000; /* Dunklerer Ton beim Hover */
    }
/* Erfolgsmeldung modernes Design */
.alert-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ff571a; /* Akzentfarbe */
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Schatten */
    font-size: 1rem;
    animation-duration: 0.5s;
}

.alert-modern .alert-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.alert-modern i {
    font-size: 1.5rem;
    color: white; /* Icon-Farbe */
}

.alert-modern .btn-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.alert-modern .btn-close:hover {
    transform: rotate(90deg);
    color: #fff4e0; /* Leicht abweichende Hover-Farbe */
}

/* Animationen mit Animate.css-Klassen */
@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    60% {
        opacity: 1;
        transform: translateX(-10%);
    }
    80% {
        transform: translateX(5%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.animate__animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.animate__bounceInRight {
    animation-name: bounceInRight;
}

.animate__fadeOutRight {
    animation-name: fadeOutRight;
}
    html, body {
        height: 100%; /* Volle Höhe des Viewports */
        margin: 0; /* Kein Abstand */
        display: flex;
        flex-direction: column; /* Vertikale Struktur: Header, Inhalt, Footer */
    }

    /* Hauptinhalt soll den Platz füllen */
    .content {
        flex: 1; /* Flexibles Wachstum des Inhalts */
        display: flex;
        justify-content: center; /* Optional: Inhalt zentrieren */
        align-items: center; /* Optional: Vertikale Zentrierung */
    }

    /* Footer am unteren Ende */
    footer {
        background-color: #f8f9fa; /* Heller Hintergrund */
        text-align: center; /* Zentriert */
        padding: 1rem; /* Abstand innen */
        border-top: 1px solid #dee2e6; /* Trennlinie */
    }
.card {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.badge {
    font-size: 0.85rem;
    padding: 0.4em 0.8em;
}

.position-absolute {
    z-index: 10;
}

.btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #0056b3; /* Blau-Ton für Hover */
    color: white;
}

.card-footer {
    border-top: none;
}
.category-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.category-box div {
    flex: 1;
    padding: 0 15px;
}

.category-box h5 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.category-box p {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.category-box a {
    text-decoration: none;
}

.category-box a:hover {
    text-decoration: underline;
}
.img-badge {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
}

@media (max-width: 768px) {
    .img-badge {
        font-size: 12px;
        padding: 4px 8px;
        background-color: #cc3600 !important;
    }
}

-----------------------------
@media (min-width: 769px) {
    .desktop-calendar {
        width: 35%;
        vertical-align: top;
    }

    .desktop-events {
        width: 65%;
        vertical-align: top;
    }

    #events-container {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .table-mobile {
        width: 100% !important;
        border-spacing: 0;
    }

    .mobile-calendar-cell,
    .mobile-events-cell {
        display: block;
        width: 100% !important;
    }

    .mobile-calendar-card {
        padding: 15px;
        border-radius: 8px;
        background-color: #dae7f1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .mobile-calendar-title {
        font-size: 1.2rem !important;
        margin-bottom: 10px;
    }

    .mobile-events-title {
        font-size: 1.4rem !important;
        margin-bottom: 20px;
        margin-top: 50px;
    }

    .mobile-shadow-box {
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(255, 69, 0, 0.4);
        background-color: #fff;
        margin-bottom: 20px;
    }
    .mobile-event-image {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 20px;
    }
}
.search-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

#searchInput {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 25px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}

#searchInput:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}

#suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}

.suggestion-item {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f8f9fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}
#searchInput:focus {
  width: 100%;
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}
.search-container {
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  right: 15px;
  color: #888;
  font-size: 20px;
}

.top-label {
  position: absolute;
  top: 325px !important;
  right:360px !important;
  background-color: #ffc107 !important;
  color: #000 !important;
  padding: 3px 8px !important;
  font-size: 0.9rem !important;
  border-radius: 5px !important;
}

.event-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.event-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .card-body {
        position: relative;
        padding-bottom: 50px; /* Genug Platz für das Datum */
    }

    .publish-date {
        font-size: 0.8rem;
        color: #006633;
        position: absolute;
        bottom: 3px !important; /* Damit es über dem Button erscheint */
        left: 20px !important;
  }
}
@media (max-width: 768px) {
    .blog-banner {
        padding: 15px !important; /* Weniger Padding für kompaktere Darstellung */
    }

    .blog-title {
        font-size: 1.5rem !important; /* Kleinere Schrift für Mobile */
    }

    .top-label {
        position: absolute;
        top: 220px !important;
        right: 15px !important;
        background-color: #ffc107 !important;
        color: #000 !important;
        padding: 3px 8px !important;
        font-size: 0.9rem !important;
        border-radius: 5px !important;
    }
}
@media (max-width: 768px) {
    .blog-meta-container {
        display: flex;
        flex-direction: column; /* Stellt sicher, dass Inhalte untereinander sind */
        align-items: flex-start; /* Links ausrichten */
        gap: 5px; /* Abstand zwischen Datum und Autor */
        margin-top: 10px; /* Etwas Abstand vom Content */
    }

    .publish-date,
    .author-info {
        font-size: 1rem;
        color: #006633;
    }
}
@media (max-width: 768px) {
    /* PDF- und Video-Button halb so groß */
    .btn-pdf,
    .btn-video {
        font-size: 0.8rem !important;
        padding: 5px 8px !important;
        width: auto !important;
    }

    /* Zurück-Button ebenfalls halb so groß */
    .btn-back {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
        width: auto !important;
    }

    /* Kleinere Icons in Buttons */
    .btn i {
        font-size: 0.9rem !important;
    }
.event-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.event-image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 10px;
    }
}
@media (max-width: 768px) {
    /* Allgemeine Textoptimierung */
    .card-body {
        font-size: 1rem; /* Lesbare Größe für kleine Bildschirme */
        line-height: 1.6;
        padding: 10px;
    }

    .card-title {
        font-size: 1.4rem; /* Größer für bessere Sichtbarkeit */
        text-align: center;
        font-weight: bold;
    }

    /* Buttons optimieren */
    .btn {
        font-size: 1.1rem; /* Größer für Touch-Bedienung */
        padding: 12px;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        border-radius: 8px;
    }

    .btn-outline-secondary {
        font-size: 1rem;
        padding: 10px;
    }

    /* Beschreibung besser strukturieren */
    .image-count {
        font-size: 0.9rem !important;
        text-align: center !important;
        margin-top: 10px !important;
        font-weight: bold !important;
        color: white !important;
    }

    /* Abstand und Lesbarkeit verbessern */
    .text-center {
        text-align: center;
        padding: 10px;
    }
}
@media (max-width: 768px) {
    .category-text {
        font-size: 0.9rem !important; /* Kleinere Schrift für mobile Ansicht */
        text-align: left; /* Links ausrichten für bessere Lesbarkeit */
        margin-bottom: 5px; /* Weniger Abstand */
    }

    .category-link {
        font-size: 0.9rem !important; /* Kleinere Links */
        font-weight: bold; /* Bessere Sichtbarkeit */
    }

    .category-divider {
        font-size: 0.9rem; /* Kleinerer Trennstrich */
    }
}
@media (max-width: 768px) {
    .search-container {
        flex-direction: column; /* Stack elements vertically on small screens */
        gap: 5px; /* Reduce spacing for compact view */
        max-width: 320px; /* Reduce height for smaller screens */
    }

    #searchInput {
        font-size: 14px; /* Smaller font size for mobile */
        padding: 8px; /* Adjust padding */
    }

    .search-icon {
        font-size: 18px; /* Smaller icon size */
    }

    .suggestions-list {
        max-height: 150px; /* Reduce height for smaller screens */
        overflow-y: scroll; /* Enable scrolling for larger suggestion lists */
    }
}