/* ═══ Baustein Text und Bild ════════════════════════════════
   Zwei Spalten, ungleich breit. Gleich breite Haelften wirken
   wie ein Formular, nicht wie eine Seite. Das Bild steht rechts
   und liegt eine Stufe hoeher als der Text, damit die Zeile
   nicht als Balken liest.
   ═══════════════════════════════════════════════════════════ */

/* Mehrere Bildzeilen stehen auf einer Seite untereinander. Mit
   --ab-gross oben und unten liegen zwischen zwei Zeilen 212 Pixel,
   und die Seite zerfaellt in Einzelteile. Eine Stufe kleiner haelt
   sie zusammen, ohne dass es eng wird. */

.textbild__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--r-gross);
	align-items: start;
}

/* Bild links heisst: die breitere Spalte wandert mit nach links.
   Ohne diese Zeile bekaeme jede zweite Bildzeile das schmalere
   Bild, und drei Zeilen untereinander haetten zwei Bildbreiten. */
.textbild--links .textbild__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.textbild--links .textbild__text { order: 2; }
.textbild--links .textbild__bild { order: 1; }


/* Text und Bild beginnen auf einer Linie. Vorher sass das Bild
   ein Stueck tiefer, was als feine Staffelung gedacht war und im
   Ergebnis wie ein Versehen aussah: bei drei Bildzeilen
   untereinander begann keine einzige Spalte dort, wo die
   Nachbarspalte begann. */
.textbild__bild {
	position: relative;
	overflow: hidden;
}
/* Ein Verhaeltnis fuer alle Bildzeilen. Ohne feste Angabe richtet
   sich die Hoehe nach der Datei, und drei Zeilen untereinander
   haben dann drei verschiedene Bildhoehen. */
.textbild__bild img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	transition: transform 1.2s var(--e);
}
.textbild__bild:hover img { transform: scale(1.03); }

.textbild__bild figcaption {
	margin-top: var(--s2);
	font-size: var(--t-klein);
	color: var(--mu);
}

/* Der Bezug zum Haus am Ende eines Blocks. Eine Linie links, kein
   Kasten, kein Farbfeld: er soll als Nachsatz lesen, nicht als
   Werbebanner. Dieselbe Machart wie die Bruecke am Seitenende. */
.textbild__bezug {
	border-left: 1px solid var(--tx);
	padding-left: clamp(14px, 1.8vw, 24px);
	margin-top: var(--s4);
	color: var(--tx);
}

/* Merkmalliste, dieselbe Machart wie im Baustein Text: eine Zeile
   je Merkmal, Haarlinie darunter, ein kurzer blauer Strich davor. */
.textbild__liste {
	margin-top: var(--s4);
	font-size: var(--t-mittel);
	color: var(--mu);
}
.textbild__liste li {
	padding: 9px 0 9px 20px;
	position: relative;
	border-bottom: 1px solid var(--ln);
	line-height: 1.55;
}
.textbild__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 19px;
	width: 8px;
	height: 1px;
	background: var(--tx);
}

.textbild__aktion { margin-top: var(--s4); }

@media (max-width: 980px) {
	.textbild__raster { grid-template-columns: 1fr; }

	/* Auf einer Spalte steht das Bild immer hinter dem Text.
	   Sonst kippt die Reihenfolge je Baustein und der Lesefluss
	   springt von Seite zu Seite. */
	.textbild--links .textbild__raster { grid-template-columns: 1fr; }
	.textbild--links .textbild__text,
	.textbild--links .textbild__bild { order: 0; }

	.textbild__bild { margin-top: 0; }
}