/* 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: var(--theme-surface, #f4f6f8);
    color: var(--theme-text, #152033);
    border-radius: 10px;
    padding: 10px;
    box-shadow: none;
    border: 1px solid var(--theme-card-border, rgba(21, 32, 51, 0.1));
}

.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;
}
/* Sticky Footer: Flex-Layout auf #site-content (header-nav-mobile.css). */
footer.footer-desktop.site-footer {
    text-align: center;
}
.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: var(--theme-surface, #f4f6f8);
        box-shadow: none;
        border: 1px solid var(--theme-card-border, rgba(21, 32, 51, 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;
  width: min(100%, 720px);
  max-width: 720px;
  margin: 1.5rem auto 2rem;
  padding: 0 0.5rem;
}

.search-container__row {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
  width: 100%;
}

.search-container__row #searchInput {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.1rem;
  font-size: 1.05rem;
  border-radius: 12px;
  border: 2px solid #ced4da;
}

.search-container__row #searchSubmit {
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
}

#searchInput {
  width: 100%;
  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 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1060;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#suggestions.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.suggestion-item:hover,
.suggestion-item:focus,
.suggestion-item:focus-visible {
  background-color: #e8f5ec;
}

.suggestion-item:hover .suggestion-item__label,
.suggestion-item:focus .suggestion-item__label,
.suggestion-item:focus-visible .suggestion-item__label {
  color: #0f1a28;
}

.suggestion-item:hover .suggestion-item__type,
.suggestion-item:focus .suggestion-item__type,
.suggestion-item:focus-visible .suggestion-item__type {
  color: #1a7a45;
}

.suggestion-item__label {
  font-size: 0.9375rem;
  color: #152033;
}

.suggestion-item__type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #249a57;
  flex-shrink: 0;
}

.suggestion-item--empty {
  color: #6c757d;
  cursor: default;
}

.suggestion-item:last-child {
  border-bottom: none;
}
.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 in Karten/Inhalten (nicht FABs wie #open-helper) */
    .card .btn,
    .blog-item .btn,
    .category-box .btn,
    .search-result-card .btn,
    .alert .btn {
        font-size: 1.1rem;
        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 {
        width: 100%;
        max-width: none;
        padding: 0 0.75rem;
    }

    .search-container__row {
        flex-direction: column;
    }

    .search-container__row #searchInput,
    .search-container__row #searchSubmit {
        width: 100%;
        min-height: 2.85rem;
    }

    .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 */
    }
}