/*Gebühren Formatierung*/
.invoice-details {
    display: flex;
    margin-bottom: 30px;
    text-align: left;
}

/*Gebühren - Tabelle Breite*/
.invoice-box {
    flex: 0 0 395px; /* Kein Wachstum, keine Schrumpfung, feste Breite */
}

/*Gebühren - Text-Ausrichtung*/
.invoice-info {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

/*Gebühren - Tabelle Formatierung*/
.table-header,
.table-row {
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 3fr 3fr 2fr 2fr; /* mehr Breite für Textspalten */
    width: 100%;
    padding: 18px 24px;
    gap: 10px;
}

/*Gebühren - Tabelle Kopfzeile*/
.table-header {
    background-color: #2c3e50;
    color: white;
    font-weight: bold;
    border-radius: 6px 6px 0 0;
    margin-bottom: 10px;
}

/*Gebühren - Tabelle Zeilen*/
.table-row {
    background-color: #f9f9f9;
    margin-bottom: 8px;
    border-radius: 4px;
}

/*Gebühren - Rechnungsdetails - Tabelle schöner ausrichten */
.accordion .table-header,
.accordion .table-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    padding: 8px 16px;
    text-align: left;
    max-width: 900px;
}

/*Gebühren - Einheitliche Spaltenbreiten mit flex-grow */
.accordion .table-header span,
.accordion .table-row span {
    flex: 1;
    min-width: 120px;
}

/*Gebühren - Gesamtbetrag linksbündig */
.total-amount {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
}

/*Gebühren Verlauf - Abstand Rechnungsnr und Ausstellungsdatum*/
.summary-row {
    display: flex;
    gap: 170px;
    padding: 1.5em 1em;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    border-bottom: 1px solid #ccc;
}