/* Globale Stile */
* {
    box-sizing: border-box; /* Inkludiere Padding und Border in der Gesamtbreite */
}

h1 {
    text-align: left;
    color: #333;
    margin-bottom: 30px;
    font-size: 2em; /* Feste Font-Size für H1 */
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Containern */
    justify-content: center; /* Zentriert die Container */
}

.container {
    flex: 1 1 calc(16.666% - 40px); /* Sechs Container nebeneinander */
    padding: 15px; /* Reduziertes Padding */
    padding-top: 5px;
    /* border: 1px solid #ccc; */
    border: 1px solid #00796b; /* Deutlicherer Rahmen */
    border-radius: 4px;
    background-color: #f7ebd8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    min-width: 150px; /* Mindestbreite reduziert */
    max-width: 250px; /* Maximale Breite verkleinert */
    box-sizing: border-box;
}

.container h2 {
    margin-top: 0;
    text-align: left;
    color: #00796b;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 1.3em; /* Angepasste Font-Size für H2 */
}
.input-group {
    display: flex;
    flex-direction: row; /* Stack Label und Input horizontal */
    align-items: center;
    margin-bottom: 5px;
    width: 100%; /* Eingabefelder nehmen die volle Breite des Containers ein */
    gap: 10px; /* Abstand zwischen Label und Input */
    min-width: 0; /* Ermöglicht Flex-Items, sich zu verkleinern */
    font-size: clamp(0.95em, 1.2vw, 0.95em);
}
.input-group label {
    flex: 1; /* Labels nehmen den verfügbaren Platz ein */
    font-weight: bold;
    color: #444;
    max-width: 100%;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
}

.input-field {
    border: 1px solid #00796b;
    border-radius: 3px;
    text-align: right;
    padding: 3px;
    color: #000;
    font-weight: 500;
    font-size: clamp(0.95em, 1.2vw, 0.95em); /* Dynamische Font-Size für Summenfelder */
    min-width: 30%;
    max-width: 40%;
    background-color: #dec;
}
/* Einheitliche Breite für Input- und Ausgabe-Felder */
.uniform-width {
    flex: 0 0 120px; /* Feste Breite */
    width: 100px; /* Feste Breite */
    max-width: 100px; /* Maximalbreite */
    min-width: 80px; /* Mindestbreite */
}


/* Media Queries für unterschiedliche Bildschirmgrößen */

/* Bis zu 1650px: Sechs Container nebeneinander */
@media (max-width: 1650px) {
    .container {
        padding-top: 5px;
        flex: 1 1 calc(16.666% - 40px); /* Sechs pro Reihe */
        max-width: 250px; /* Angepasst */
    }
}

/* Bis zu 1200px: Vier Container nebeneinander */
@media (max-width: 1200px) {
    .container {
        padding-top: 5px;
        flex: 1 1 calc(33.333% - 40px); /* Vier pro Reihe */
        max-width: 350px; /* Beibehalten */
    }
}

/* Bis zu 900px: Drei Container nebeneinander */
@media (max-width: 900px) {
    .container {
        padding-top: 5px;
        flex: 1 1 calc(33.333% - 40px); /* Drei pro Reihe */
        max-width: 250px; /* Beibehalten */
    }
}

/* Bis zu 600px: Zwei Container nebeneinander */
@media (max-width: 600px) {
    .container {
        padding-top: 5px;
        flex: 1 1 calc(50% - 40px); /* Zwei pro Reihe */
        max-width: 100%;
    }
}

/* Mobile Ansicht: Ein Container pro Zeile */
@media (max-width: 480px) {
    .container {
        padding-top: 5px;
        flex: 1 1 100%; /* Ein pro Reihe */
        max-width: 100%;
    }
    
    .input-group {
        flex-direction: raw; /* Stack Label und Input vertikal */
        align-items: flex-start;
        gap: 5px; /* Geringerer Abstand auf kleinen Bildschirmen */
    }
    
    .input-group label {
        flex: none;
        width: 50%;
        text-align: left;
        margin-bottom: 5px;
        font-size: 0.95em; /* Schriftgröße verkleinert */
    }
    
    .input-group .input-field,
    .input-group .readonly-field,
    .input-group .sum-field,
    .input-group .ausgaben-field,
    .input-group .einnahmen-field {
        width: 100%;
        max-width: 50%;
        font-size: 0.95em; /* Schriftgröße verkleinert */
    }
}
/* Ende alternative dynamische Anpassung */

.readonly-field {
    background-color: #faca78; /* Hellorange Hintergrund für Summenfelder */
    border-radius: 4px;
    border: 1px solid #faca78;;
    padding: 4px;
    text-align: right;
    color: #000;
    font-size: clamp(0.95em, 1.2vw, 0.95em); /* Dynamische Font-Size für Summenfelder */
    min-width: 20%;
    max-width: 40%;
}

/* Gemeinsame Klasse für Summenfelder */
.sum-field, .ausgaben-field, .einnahmen-field {
    border: 1px solid rgb(249, 175, 46);
    border-radius: 4px;
    font-size: clamp(0.95em, 1.2vw, 0.95em); /* Dynamische Font-Size für Summenfelder */
    box-sizing: border-box;
    color: #000;
    padding: 4px;
    text-align: right;
    min-width: 20%;
    max-width: 40%;
    background-color: rgb(249, 175, 46); /* Oranger Hintergrund */
}

.input-group input.uniform-width,
.input-group .readonly-field.uniform-width {
    padding: 8px;
    text-align: right;
    font-size: 1em; /* Feste Font-Size für Eingabefelder */
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #000;
    background-color: #fff; /* Standard Hintergrund für Input-Felder */
}

.button {
    width: 100%;
    padding: 12px;
    font-size: 1em; /* Feste Font-Size für Buttons */
    cursor: pointer;
    background-color: #296117;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #29af17;
}

/* Optional: Fokus-Stile für bessere Zugänglichkeit */
.input-group input:focus, .button:focus {
    outline: 2px solid #296117;
    outline-offset: 2px;
}

/* Bereichs Styling */
.haushalt-container,
.schule-container,
.mobilitaet-container,
.drogerie-container,
.arzt-apotheke-container,
.lebensmittel-container,
.bekleidung-container,
.restaurant-container,
.urlaub-container,
.freizeit-container,
.unterhaltung-container,
.einnahmen-container,
.ausgaben-container { /* Neuer Bereich Einnahmen */
    margin-top: 20px; /* Sichtbarer Abstand */
    padding-top: 20px;
    border-top: 1px solid #ccc;
}