.finanzen_container {
    padding: 20px;
    font-size: var(--schrift);
  }
  .chart-container {
    width: 60%;
    margin: auto;
    font-size: var(--schrift);
    color: white;
  }
  .financial-overview {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .financial-detail {
    text-align: center;
  }
  .tab-bar {
    position: fixed; /* Fixiert die Menüleiste am unteren Bildschirmrand */
    bottom: 0; /* Positioniert die Menüleiste am unteren Rand des Viewports */
    width: 90%; /* Stellt sicher, dass die Leiste die volle Breite einnimmt */
    display: flex;
    justify-content: space-evenly;
    background-color: #00ff40a6;
    padding: 10px 0;
    z-index: 1000; /* Stellt sicher, dass die Menüleiste über anderen Inhalten liegt */
  }
  .finanzen_tab {
    cursor: pointer;
    padding: 10px 0px;
    font-size: var(--schrift);
  }
  .finanzen_tab:hover {
    background-color: #555;
  }
  .home-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #4CAF50;
    border: none;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
  }
  .finanz-budget-detail {
    border: 1px solid #7f7f88;
    border-radius: 25px;
    display: flex;
    padding: 5px;
    background-color: #444; /* Dunkler Hintergrund */
    color: #fff; /* Helle Schrift */
  }
  
  .icon-container {
    display: flex;
    align-items: center; /* Zentriert das Icon vertikal */
    justify-content: center; /* Zentriert das Icon horizontal */
    flex: 0 0 auto; /* Behält die Größe des Icons bei */
    margin-right: 10px; /* Abstand zwischen Icon und Text */
    background-size: cover;
    width: 45px;
    height: 45px;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: outline;
    font-size: 36px;
    
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  }
  
  .buchung-info {
    display: flex;
    width: 100%;
    flex-direction: column; /* Stapelt die Inhalte vertikal */
    margin: 0;
  }
  .datum{
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding:0px;
  }
  .buchung-info > h3 {
    margin: 0; /* Entfernt den oberen und unteren Abstand */
    padding:0px;
  }
  
  .buchung-info > .detail-container {
    margin-top: 0; /* Entfernt den oberen Abstand */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

.buchung-info > .detail-container {
  margin-top: 0; /* Oder den gewünschten Abstand */
  display: flex;
  justify-content: space-between; /* Positioniert Verwendungszweck links und Betrag/Währung rechts */
  align-items: center;
}

.verwendungszweck{
  /* ... andere Stile ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  width: 70%;
  margin: 0;
}
.detail-container{
  display: flex;
  padding: 5px;
  width: calc(100% - 60px);
  margin: 0;
}

.betrag-info {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  margin: 0;
}

.betrag {
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  margin-right: 5px; /* Abstand zwischen Betrag und Währung */
  text-align: right;
  margin: 0;
}

.waehrung {
  font-size: 12px;
}
.finanz-budget-anzeige {
  margin-top: 5px; /* Passen Sie diesen Wert nach Bedarf an */
  margin: 0;
}