/* ══ Baustein Gut zu wissen ═══════════════════════════════════
   Vorbild: 03_Design/final/idee-wissen.html

   Die Angaben stehen als Definitionsliste ueber die volle Breite,
   nicht im Raster. Ein Raster mit zwei Spalten laesst bei drei
   Eintraegen rechts unten ein Loch, und die Haarlinie liefe nur
   unter einer der beiden Spalten. Ueber die volle Breite kann das
   nicht passieren, egal wie viele Angaben dazukommen.
   ═════════════════════════════════════════════════════════════ */


.wissen__kopf {
	container-type: inline-size;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: var(--s7);
	align-items: end;
}


.wissen__ein {
	color: var(--tx);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 44ch;
	padding-bottom: .25rem;
}



/* pretty gegen den Schusterjungen. "5.00 euros per person per day,
   children under 15 pay none" liess im Englischen das Wort none
   allein in der letzten Zeile stehen; auf Deutsch ist derselbe Satz
   kuerzer und bricht anders. */
.wissen dd {
	color: var(--tx);
	font-size: .9375rem;
	max-width: 62ch;
	margin: 0;
	text-wrap: pretty;
}

/* ── Preiszeile ──────────────────────────────────────────── */
/* Haengt an der Liste, nicht irgendwo darunter. */

.wissen__preis {
	margin-top: var(--s5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s5);
	align-items: center;
}

.wissen__preis p {
	font-size: 1.0625rem;
	max-width: 52ch;
}

.wissen__preis b {
	font-weight: var(--gw-halb);
}

/* ── Weiterverweise ──────────────────────────────────────── */

.wissen__weiter {
	margin-top: var(--s5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s5);
}

.wissen__weiter a {
	font-size: .84375rem;
	font-weight: var(--gw-halb);
	position: relative;
	padding-bottom: .1875rem;
}

.wissen__weiter a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--e);
}

.wissen__weiter a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

@media (max-width: 61.25rem) {

	/* --s5, nicht --s4: einspaltig stand der Beitext 40 Pixel unter
	   der Ueberschrift, und die Seite benutzt sonst 48. */
	.wissen__kopf {
		grid-template-columns: 1fr;
		gap: var(--s5);
	}

	/* Am Handy sind die Weiterverweise Tastflaechen und keine
	   Woerter im Satz. Als Zeile im Fluss waren sie 24 Pixel hoch. */
	.wissen__weiter a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}


	
	.wissen__preis {
		grid-template-columns: 1fr;
		gap: var(--s4);
		justify-items: start;
	}

	.wissen__weiter {
		gap: var(--s4);
	}
}

/* ── Zweite Spalte: Fragen ──────────────────────────────── */
/* Vorbild: 03_Design/final/idee-appartements.html
   Auf /appartements/ stehen die Angaben und die drei Fragen
   nebeneinander. Es ist dasselbe Thema; untereinander waeren es
   zwei Ueberschriften fuer eine Sache und ein Bildschirm mehr. */

.wissen--zwei .wissen__g {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s7);
	align-items: start;
}

/* In zwei Spalten hat der Kopf keinen Beitext daneben, er steht
   einspaltig ueber seiner Liste. */
.wissen--zwei .wissen__kopf {
	grid-template-columns: 1fr;
	gap: var(--s3);
}


.wissen__fragen {
	margin-top: var(--s4);
	border-top: 1px solid var(--ln);
}


@media (max-width: 61.25rem) {

	.wissen--zwei .wissen__g {
		grid-template-columns: 1fr;
		gap: var(--s5);
	}
}