/* Style 8 - Complete */
/* Card order is fixed (see style-8-complete.php) and mapped to a 6-column
   "Bento" grid via :nth-child. Auto-placement fills the remaining cells,
   only the tall "Anzahl Projekte" card (5th) needs an explicit row span. */

.kennzahlen-block--style-8-complete .kennzahlen-block__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(160px, auto);
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(1),
.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(2) {
	grid-column: span 3;
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(3) {
	grid-column: span 2;
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(4) {
	grid-column: span 4;
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(5) {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 560px;
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(6) {
	grid-column: span 4;
}

.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(7),
.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(8),
.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(9),
.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(10),
.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(11) {
	grid-column: span 2;
}

@media (max-width: 780px) {
	.kennzahlen-block--style-8-complete .kennzahlen-block__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.kennzahlen-block--style-8-complete .kennzahlen-card:nth-child(n) {
		grid-column: span 1;
		grid-row: auto;
		min-height: auto;
	}
	
	.kennzahlen-card__value{
		font-size: 55px;
	}
	
	.kennzahlen-card__label{
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	.kennzahlen-block--style-8-complete .kennzahlen-block__grid {
		grid-template-columns: 1fr;
	}
}