/* ═══ Komponente Ausstattung: Karten und Icon-Liste ══════════
   Global geladen. Karten aus blocks/ausstattung (und im Baustein
   Text, wenn eine Liste allein steht), Icon-Liste aus
   kr_icon_liste() in Text- und Text-Bild-Abschnitten.

   Drei Gruppen als Karten in der vollen Breite des Satzspiegels,
   wie die Text-Bild-Abschnitte. In 760 Pixeln blieben bei drei
   Spalten 180 fuer den Text. Die Flaeche ist die der Fragekarten aus
   fragen.css: Papierweiss, Haarlinie, eckig. Jedes Icon in --dk; der
   Akzent gehoert den Aktionen. Die Gruppe "Im Haus" traegt als Ganzes
   den Blauton der offenen Fragekarte. Seit 15. Oktober.
   ═════════════════════════════════════════════════════════════ */

.ausst,
.ausst__liste {
	--ausst-icon: 1.25rem;          /* 20px, Lucide auf 24 Einheiten */
}

.ausst__rahmen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s2);
}

/* Karten einer Reihe sind gleich hoch (stretch), der Inhalt steht
   oben. */
.ausst__karte {
	background: var(--we);
	border: 1px solid var(--ln);
	padding: var(--s4);
}
.ausst__karte--betont {
	background: color-mix(in srgb, var(--dk) 6%, var(--we));
	border-color: color-mix(in srgb, var(--dk) 22%, transparent);
}

/* Kartenueberschrift, keine Seitenueberschrift. */
.ausst__titel {
	margin: 0 0 var(--s3);
	font-size: var(--t-lead);
	font-weight: var(--gw-normal);
	letter-spacing: -.01em;
	line-height: 1.25;
}

/* Keine Linie unter den Punkten: die Fuge trennt. */
.ausst__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s2);
}

.ausst__punkt {
	display: grid;
	grid-template-columns: var(--ausst-icon) minmax(0, 1fr);
	gap: 0 var(--s2);
	align-items: start;
	font-size: var(--t-basis);
	line-height: 1.45;
	color: var(--tx);
}

.ausst__icon {
	width: var(--ausst-icon);
	height: var(--ausst-icon);
	margin-top: calc((1lh - var(--ausst-icon)) / 2);
	stroke-width: 1.5;
	color: var(--dk);
}

.ausst__text {
	display: block;
	text-wrap: balance;
}
/* Die Punkte stehen in den Seitendaten klein, wie im Bestand. In der
   Karte beginnt jede Zeile gross. */
.ausst__text::first-letter { text-transform: uppercase; }

.ausst__ganz { white-space: nowrap; }

/* Die Geraete der Kueche laufen als Fliesstext ueber die ganze
   Kartenbreite, nicht als schmale Spalte neben dem Icon. */
.ausst__detail {
	grid-column: 1 / -1;
	margin-top: .25rem;
	font-size: var(--t-mittel);
	line-height: 1.5;
	color: var(--mu);
	text-wrap: pretty;
}

/* ── Icon-Liste ──────────────────────────────────────────── */
/* Unter dem Text eines Abschnitts, ohne Karte, ohne Linien. Den
   Abstand nach oben traegt die Liste (Text zur Liste, --s4), nach
   unten nichts: der Verweis darunter traegt seinen. */
.ausst__liste--icons { margin-top: var(--s4); }
.ausst__karte > .ausst__liste--icons { margin-top: 0; }
.kick + .ausst__liste--icons,
.abschnittskopf__titel + .ausst__karte { margin-top: 0; }

@media (min-width: 760px) {
	.ausst__liste--zwei {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--s5);
	}
}

/* Zwei Spalten ab 760, die dritte Karte nimmt dann die ganze Zeile. */
@media (min-width: 760px) {
	.ausst__rahmen { grid-template-columns: 1fr 1fr; }
	.ausst__karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Drei nebeneinander ab 980. */
@media (min-width: 61.25rem) {
	.ausst__rahmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ausst__karte:last-child:nth-child(odd) { grid-column: auto; }
}

@media (max-width: 47.5rem) {
	.ausst__karte { padding: var(--s3); }
}