/* Modul „Nummerierte Punkte" (Warum, Ablauf, Comer See).
   Prototypen: 01 „Ablauf" (6), 02 „Warum" (4) und „Ablauf" (5), 03 „Comer See" (mit Bild). */

.modul--nummeriert { padding-block: var(--sektion-y); }

/* Mit Linie beginnt die Sektion an der Linie; der Abstand darüber gehört der Sektion davor. */
.modul--nummeriert.modul--linie-oben { padding-top: 0; }

.modul-nummeriert__rahmen.fk-linie-oben { padding-top: var(--kopf-abstand); }

.modul-nummeriert__einleitung {
	max-width: var(--mass-text);
	margin-top: var(--abstand-titel);
	color: var(--text-75);
}

.modul-nummeriert__einleitung > :first-child { margin-top: 0; }
.modul-nummeriert__einleitung > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------- *
 * Raster
 * ---------------------------------------------------------------------- */

.modul-nummeriert__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--grid-gap-ablauf);
	margin: var(--raster-abstand) 0 0;
	padding: 0;
	list-style: none;
}

/* Sechs Schritte: zwei Reihen à drei statt vier plus zwei. */
.modul--anzahl-6 .modul-nummeriert__liste {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Fünf Schritte: enger und kleiner gesetzt (Prototyp 02). Der Prototyp bricht
   bei 1440 px um vier Pixel in 4 + 1 um — gemeint ist eine Reihe. Ab 1100 px
   stehen deshalb fest fünf Spalten, darunter greift das Raster des Designs. */
.modul--anzahl-5 .modul-nummeriert__liste {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--grid-gap);
}

@media (min-width: 1100px) {
	.modul--anzahl-5 .modul-nummeriert__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------- *
 * Punkt
 * ---------------------------------------------------------------------- */

.modul-nummeriert__punkt {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--linie-35);
}

.modul-nummeriert__nummer {
	display: block;
	font-size: var(--fs-nummer);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-label-klein);
	line-height: var(--lh-text);
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.modul-nummeriert__titel {
	margin: 10px 0 0;
	font-size: var(--fs-h3);
	font-weight: var(--fw-h3);
}

.modul-nummeriert__text {
	margin-top: 10px;
	font-size: var(--fs-karte);
	line-height: var(--lh-text);
	color: var(--text-72);
}

.modul-nummeriert__text p { margin: 0; }
.modul-nummeriert__text p + p { margin-top: 0.6em; }

.modul--anzahl-5 .modul-nummeriert__titel { font-size: var(--fs-h3-klein, 17px); }

.modul--anzahl-5 .modul-nummeriert__text {
	margin-top: 8px;
	font-size: var(--fs-karte-klein, 14.5px);
}

/* Fünf schmale Spalten mit zwei, drei Zeilen: ausgewogen, sonst bleibt ein
   Wort allein in der letzten Zeile („Abstimmung."). */
.modul--anzahl-5 .modul-nummeriert__text p { text-wrap: balance; }

/* ---------------------------------------------------------------------- *
 * Mit Bild (Prototyp 03): Punkte 2×2 links, Hochformat rechts
 * ---------------------------------------------------------------------- */

.modul-nummeriert__spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--spalten-gap);
	align-items: start;
}

.modul--mit-bild .modul-nummeriert__liste {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--grid-gap);
	margin-top: var(--raster-abstand-klein, clamp(30px, 4vw, 48px));
}

.modul-nummeriert__bild { margin: 0; }

.modul-nummeriert__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}