/**
 * assets/css/wm-bausteine.css — Inhaltsbausteine der Magazin-Artikel.
 *
 * Eigene Datei, weil wissen-rework.css das SEITENGERUEST macht (Hero, Autor,
 * CTA, Karten). Zwei Zwecke in einer Datei heisst: beide werden schwerer
 * aenderbar. Markup: functions/wm-bausteine.php, Prefix .wmb-.
 *
 * 🛑 GEMESSENE Kontraste (nicht geschaetzt, gerechnet nach WCAG 2.1):
 *
 *   Sofort  Text     #12354f auf #eaf4f8   11,41:1
 *   Sofort  Titel    #1c7291 auf #eaf4f8    4,86:1
 *   Warnung Text     #7a2e10 auf #fdf0e8    8,45:1
 *   Warnung Titel    #8a3a13 auf #fdf0e8    6,98:1
 *   Fakten  Text     #12354f auf #f7fafc   12,16:1
 *   Quellenzeile     #5b6b7a auf #f7fafc    5,23:1
 *   Schritt-Ziffer   #ffffff auf #12354f   12,74:1
 *   Schritt-Text     #28333f auf #ffffff   12,84:1
 *
 * 🛑 Marken-Cyan #00A8CE ist als TEXTfarbe verboten (2,54:1), dafuer gibt es
 * #1c7291. Steht so in a11y-100-2026-07-22.
 */

/* ── Gemeinsames Kastengeruest ───────────────────────────────────────────── */

.wmb {
	margin: 1.9em 0;
	padding: 20px 22px;
	border-radius: 12px;
}

.iswm-prose .wmb:first-child {
	margin-top: 0;
}

.wmb-titel {
	margin: 0 0 .6em;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
}

.wmb-inhalt > *:first-child { margin-top: 0; }
.wmb-inhalt > *:last-child  { margin-bottom: 0; }

/* Die Quellenzeile ist klein, aber sie muss lesbar bleiben: 5,23:1. */
.wmb-quelle {
	margin: .9em 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5b6b7a;
}

/* ── Sofort-Kasten ───────────────────────────────────────────────────────── */

.wmb-sofort {
	background: #eaf4f8;
	border-left: 4px solid #1c7291;
	color: #12354f;
}

.wmb-sofort .wmb-titel { color: #1c7291; }

/* ── Warnkasten ──────────────────────────────────────────────────────────── */

/* Warm statt rot: ein Warnhinweis, keine Fehlermeldung. Der Rand traegt die
   Bedeutung mit, damit sie nicht allein an der Farbwahrnehmung haengt. */
.wmb-warnung {
	background: #fdf0e8;
	border-left: 4px solid #b4531f;
	color: #7a2e10;
}

.wmb-warnung .wmb-titel { color: #8a3a13; }

/* ── Faktenkasten ────────────────────────────────────────────────────────── */

.wmb-fakten {
	background: #f7fafc;
	border: 1px solid #dde4ea;
	color: #12354f;
}

.wmb-fakten .wmb-titel { color: #12354f; }

/* ── Schritt-Karten ──────────────────────────────────────────────────────── */

/* Aus <ol> werden Karten mit eigener Ziffer. Die Liste bleibt eine Liste —
   Screenreader lesen weiter „Punkt 1 von 5". */
.wmb-schritte {
	padding: 0;
	background: none;
}

.wmb-schritte ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: wmb-schritt;
}

.iswm-prose .wmb-schritte li {
	counter-increment: wmb-schritt;
	position: relative;
	margin: 0 0 12px;
	padding: 14px 18px 14px 56px;
	background: #fff;
	border: 1px solid #dde4ea;
	border-radius: 10px;
	color: #28333f;
}

.wmb-schritte li:last-child { margin-bottom: 0; }

.wmb-schritte li::before {
	content: counter(wmb-schritt);
	position: absolute;
	left: 16px;
	top: 14px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #12354f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
}

/* ── Checkliste ──────────────────────────────────────────────────────────── */

.wmb-checkliste {
	background: #f7fafc;
	border: 1px solid #dde4ea;
	color: #12354f;
}

.wmb-checkliste .wmb-titel { color: #12354f; }

.wmb-checkliste ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iswm-prose .wmb-checkliste li {
	margin: 0 0 10px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.wmb-checkliste li:last-child { margin-bottom: 0; }

.wmb-checkliste input[type="checkbox"] {
	margin: .3em 0 0;
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: #1c7291;
	cursor: pointer;
}

.wmb-checkliste label {
	cursor: pointer;
	line-height: 1.6;
}

/* Erledigtes bleibt lesbar (5,23:1), ist aber sichtbar abgehakt. */
.wmb-checkliste input:checked + label {
	color: #5b6b7a;
	text-decoration: line-through;
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.wmb {
		padding: 16px 16px;
		margin: 1.6em 0;
	}
	.iswm-prose .wmb-schritte li {
		padding: 12px 14px 12px 48px;
	}
	.wmb-schritte li::before {
		left: 12px;
	}
}

/* ── Zweispalter mit mitlaufender Schiene ────────────────────────────────── */

/* 🛑 Eigenes Grid. .ast-container NICHT wiederverwenden: die Klasse ist bei
   Astra SELBST ein Flex-Container und stellt Überschrift und Absatz
   nebeneinander (Fundstelle: karten-bau-2026-08-02). */
.iswm-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 44px;
	align-items: start;
}

.iswm-col-text {
	min-width: 0;
}

/* 68 statt 84 Zeichen: 18px Schriftgröße, im Mittel rund 0,5em je Zeichen,
   also 18 * 0,5 * 68 ≈ 612. Gemessen wird am Ende im Browser, nicht hier. */
.iswm-split .iswm-prose {
	max-width: 620px;
}

.iswm-schiene {
	position: sticky;
	/* Die eigene Navbar ist klebrig; 96px halten die Schiene darunter. */
	top: 96px;
	font-size: 15px;
}

.iswm-toc-titel {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5b6b7a;
}

.iswm-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid #dde4ea;
}

.iswm-page .iswm-toc li {
	margin: 0;
}

/* Astra unterstreicht Links im Artikel per Inline-Style mit Spezifität (0,2,1).
   Deshalb hier drei Klassen und KEIN !important (dieselbe Falle wie bei der
   Österreich-Karte). */
.iswm-page .iswm-schiene .iswm-toc a {
	display: block;
	padding: 6px 0 6px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: #5b6b7a;
	text-decoration: none;
	font-weight: 400;
	line-height: 1.35;
}

.iswm-page .iswm-schiene .iswm-toc a:hover {
	color: #12354f;
}

.iswm-page .iswm-schiene .iswm-toc a.is-aktiv {
	color: #12354f;
	font-weight: 700;
	border-left-color: #1c7291;
}

.iswm-schiene-fakten {
	margin-top: 22px;
}

.iswm-schiene-fakten dl {
	margin: 0;
	display: grid;
	gap: 10px 0;
}

.iswm-schiene-fakten dt {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: #5b6b7a;
}

.iswm-schiene-fakten dd {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #12354f;
}

/* Ab hier ist kein Platz mehr für zwei Spalten: Schiene über den Text. */
@media (max-width: 880px) {
	.iswm-split {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.iswm-schiene {
		position: static;
		order: -1;
	}
	.iswm-split .iswm-prose {
		max-width: none;
	}
	.iswm-schiene-fakten {
		margin-top: 16px;
	}
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */

/* Eine dreispaltige Tabelle ist bei 390px breiter als das Fenster. Sie scrollt
   in sich, statt die ganze Seite zu verschieben (gemessen: scrollWidth 494 bei
   390px Fenster). Rahmen kommt aus functions/wm-bausteine.php. */
.iswm-tabelle-rahmen {
	overflow-x: auto;
	margin: 1.5em 0;
	/* Damit man sieht, dass es hier weitergeht. */
	-webkit-overflow-scrolling: touch;
}

.iswm-tabelle-rahmen table {
	margin: 0;
	min-width: 460px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Überarbeitung 03.08. nach Maxims Rückmeldung, zweiter Anlauf.

   Erste Fassung lag falsch: ich hatte den Navy-Hero mit dem Installateur-Foto
   entfernt. Gemeint war aber das COVER-BILD darunter — ein Navy-Block, der die
   Überschrift ein zweites Mal zeigt, direkt unter der Überschrift. Maxim:
   „der Hero mit dem Installateur wie auf der Startseite hat gepasst, ich
   meinte das ‚Abfluss verstopft?‘ Ding".

   Also: Hero bleibt wie er war, das Cover verschwindet von der Artikelseite.
   Es bleibt gesetzt und wird weiter gebraucht — auf den Karten der Übersicht
   und als Vorschaubild beim Teilen. Nur auf der Seite selbst ist es reine
   Wiederholung und kostet 300 Pixel vor dem ersten Satz.

   🛑 Der Zielkonflikt bei der Breite, damit ihn niemand später wieder aufmacht:
   Lesbarkeit und Bildschirmbreite widersprechen sich. Über etwa 75 Zeichen je
   Zeile findet das Auge den Zeilenanfang schlechter. Der Text kann also NICHT
   auf 1600px mitwachsen; er wird über die SCHRIFTGRÖSSE breiter, nicht über
   mehr Zeichen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breite: Schrift größer, Zeile länger ────────────────────────────────── */

.iswm-single .iswm-inner {
	max-width: 1180px;
}

/* Luft nach dem Hero. `padding-top:0` in wissen-rework.css stammt aus der Zeit,
   als das Cover-Bild mit negativem Margin in das Navy-Band hineinragte und die
   Lücke selbst gefüllt hat. Ohne das Bild klebte der Text an der Kante. */
.iswm-single .iswm-article-wrap {
	padding-top: 46px;
}

@media (max-width: 880px) {
	.iswm-single .iswm-article-wrap { padding-top: 28px; }
}

/* 20px statt 18px: dieselben 75 Zeichen brauchen damit 750 statt 620 Pixel.
   Das ist der einzige ehrliche Weg, den Text breiter zu machen. */
.iswm-single .iswm-prose {
	font-size: 20px;
	line-height: 1.7;
}

.iswm-split {
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
}

.iswm-split .iswm-prose {
	max-width: 750px;
}

.iswm-single .iswm-article {
	max-width: none;
}

@media (max-width: 1100px) {
	.iswm-single .iswm-prose { font-size: 19px; }
}

@media (max-width: 880px) {
	.iswm-single .iswm-prose { font-size: 18px; }
}