/* ============================
   Dashboard Grid für obere Charts
   ============================ */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.chart-wrapper {
    overflow-x: auto;
    height: 400px; /* Höhe der oberen Charts */
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ============================
   Bereichs-Dashboard (Info + Charts)
   ============================ */
.bereich-dashboard {
    margin-bottom: 3rem;
}

.bereich-dashboard h2 {
    margin-bottom: 1rem;
}

.bereich-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start; /* Wichtig für konsistente Höhe */
}

/* Bereich-Info Box */
.bereich-info {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.bereich-info h3 {
    margin-top: 1rem;
}

/* Bereich-Charts als Grid für konsistente Höhe */
.bereich-charts {
    display: grid;
    grid-template-columns: 1fr; /* Eine Spalte für untere Charts */
    gap: 2rem;
}

.bereich-charts .chart-wrapper {
    width: 100%;
    min-height: 300px; /* Mindestens 300px Höhe */
}

.bereich-charts .chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ============================
   Responsive Anpassungen
   ============================ */
@media (max-width: 1024px) {
    .chart-wrapper {
        height: 350px;
    }
    .bereich-charts .chart-wrapper {
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .chart-wrapper {
        height: 300px;
    }
    .bereich-charts .chart-wrapper {
        min-height: 250px;
    }
    .bereich-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Sonstiges
   ============================ */
.single-post h1.entry-title {
    display: none;
}