/* Hintergrundfarbe der Seite */
body {
    background-color: #DFEEF5;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Allgemeine Tabellen-Einstellungen */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Rahmen und Zellen-Abstände */
table td, table th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

/* Erste Spalte (Bezeichnung) */
table td:first-child {
    text-align: left;
    width: 20%;
}

/* Zeilen-Hintergrund abwechselnd */
table tr:nth-child(even) {
    background-color: #F4F4F4;
}

/* Titelzeile */
table th.title {
    background-color: #6799B4;
    color: white;
    font-size: 1.4em;
    text-align: center;
    padding: 16px;
}

/* Untertitelzeile */
table th.subtitle {
    background-color: #B8DBEE;
    color: white;
    text-align: center;
    padding: 10px;
}

/* Monats-Header */
table tr.month-header th {
    background-color: #F4F4F4;
    color: #333;
    font-weight: bold;
}

/* Kategorie-Header (optional) */
table tr.category-header {
    background-color: #B8DBEE;
    font-weight: bold;
}

/* Container für Karussell */
.carousel-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

/* Innerer Container */
.carousel-inner {
    overflow: hidden;
}

/* Tabellen-Style */
.data-table {
    display: block;
    width: 100%;
}

/* Fade-In-Effekt */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

/* Neue Navigations-Buttons (kleiner, rund und in tiefblau) */
.btn-prev, .btn-next {
    background-color: #3F729B;
    color: #fff;
    border: 2px solid #2A4D69;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

.btn-prev:hover, .btn-next:hover {
    background-color: #355a7d;
}


/* Fade-In-Effekt: Startet mit Opacity 0, dann bei Aktivierung über die Klasse "visible" auf 1 */
.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  
  .fade-in.visible {
    opacity: 1;
  }
  

/* Falls du noch alte Styles (z.B. für carousel-control-*) entfernen möchtest, kannst du sie auskommentieren oder löschen */