/*
 * uwc-lektion-stil - the one style sheet of the UWC blog layout for topics (Martin, 21.10.2026).
 *
 * Source of truth: steffi2 app/src/Shared/Kurs/Layout/uwc-lektion-stil.css. The WordPress plugin
 * uwc-lektion-stil ships copies of this file and the warning sign next to it; the Steffi
 * storyboard preview reads the source files directly.
 * Edit it here only.
 *
 * Scope: everything sits below .uwc-lektion (the group the course renderer puts around a topic)
 * or on the uwc- classes of a box, so no other page of a customer site changes.
 * Colours: the agreed sample (konzepte/2026-10-21-blog-layout-muster.html), stronger than the
 * first version (Martin, 22.10.2026: "mehr Farbe"). Every text colour reaches WCAG AA (4.5:1) on
 * its surface; the ratios stand next to the values. Fonts and font sizes come from the theme and
 * are not overridden. Sizes change only relative to the theme (em/rem): small labels and the
 * header line are smaller, the legal box is 0.9em, the key sentence 1.08em - as in the sample.
 */

.uwc-lektion,
.uwc-box,
.uwc-richtig-falsch,
.uwc-schritte {
	--uwc-text: #1f2933;               /* 14.8:1 on white */
	--uwc-text-gedaempft: #5b6670;     /* 5.9:1 on white, 5.3:1 on the light surfaces */
	--uwc-linie: #e3e7eb;
	--uwc-akzent: #1d5fa8;             /* 6.5:1 on white */
	--uwc-akzent-hell: #e8f0fa;        /* accent text on it 5.6:1 */
	--uwc-auf-akzent: #ffffff;         /* 6.5:1 on accent */
	--uwc-auf-akzent-marke: #cfe0f5;   /* 4.8:1 on accent */
	--uwc-fall: #6b4fa0;               /* 5.7:1 on its surface */
	--uwc-fall-flaeche: #f2eefa;
	--uwc-recht: #475467;              /* 7.0:1 on its surface */
	--uwc-recht-flaeche: #f2f4f7;
	--uwc-uebung: #2f7d4a;             /* 4.6:1 on its surface */
	--uwc-uebung-flaeche: #e9f6ee;
	--uwc-gut: #2f7d4a;                /* "Richtig", 4.6:1 */
	--uwc-gut-flaeche: #e9f6ee;
	--uwc-schlecht: #b42318;           /* "Falsch", 5.8:1 */
	--uwc-schlecht-flaeche: #fdecea;
	/* Safety notice by severity (Martin, 22.10.2026): red, orange, ochre - never black or grey. */
	--uwc-gefahr: #b42318;             /* 5.8:1 on its surface */
	--uwc-gefahr-flaeche: #fdecea;
	--uwc-warnung: #b45309;            /* 4.6:1 on its surface */
	--uwc-warnung-flaeche: #fff4e5;
	--uwc-vorsicht: #7a5600;           /* label 6.1:1 on its surface */
	--uwc-vorsicht-kante: #e0a800;     /* the yellow edge; the label carries the contrast */
	--uwc-vorsicht-flaeche: #fdf6d8;
	--uwc-flaeche: #ffffff;
	--uwc-abstand: 1.5rem;
	--uwc-innen-block: 1rem;
	--uwc-innen-seite: 1.25rem;
	--uwc-rundung: 0.625rem;
	--uwc-rundung-klein: 0.25rem;
	--uwc-lesebreite: 70ch;
}

/* Reading width and line height of the topic text. */
.uwc-lektion {
	max-width: var(--uwc-lesebreite);
	line-height: 1.6;
	color: var(--uwc-text);
}

/* Header line: where the page sits in the course. */
.uwc-lektion .uwc-kopf {
	color: var(--uwc-text-gedaempft);
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

/* ---------- Boxes ---------- */
.uwc-box {
	margin: var(--uwc-abstand) 0;
	padding: var(--uwc-innen-block) var(--uwc-innen-seite);
	border-radius: var(--uwc-rundung);
	border-left: 0.3125rem solid var(--uwc-linie);
}
.uwc-box > :first-child { margin-top: 0; }
.uwc-box > :last-child { margin-bottom: 0; }
.uwc-box .uwc-marke {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.uwc-box--fall { background: var(--uwc-fall-flaeche); border-left-color: var(--uwc-fall); }
.uwc-box--fall .uwc-marke { color: var(--uwc-fall); }

/* Safety notice: signal word by severity, light filled surface with a coloured edge like the
   other boxes and a thin frame in the same colour; the triangle is the original ISO 7010 W001
   file, decoration only; the signal word stays text. */
.uwc-box--achtung { border: 1px solid var(--uwc-warnung); border-left-width: 0.3125rem; }
.uwc-box--achtung .uwc-marke::before {
	content: "";
	display: inline-block;
	width: 1.375em;                    /* 1.2em high at the 600 x 524 ratio of the sign */
	height: 1.2em;
	background: url("ISO_7010_W001.svg") no-repeat center / contain;
	vertical-align: -0.15em;
	margin-right: 0.375rem;
}
.uwc-box--gefahr { background: var(--uwc-gefahr-flaeche); border-color: var(--uwc-gefahr); }
.uwc-box--gefahr .uwc-marke { color: var(--uwc-gefahr); }
.uwc-box--warnung { background: var(--uwc-warnung-flaeche); border-color: var(--uwc-warnung); }
.uwc-box--warnung .uwc-marke { color: var(--uwc-warnung); }
.uwc-box--vorsicht { background: var(--uwc-vorsicht-flaeche); border-color: var(--uwc-vorsicht-kante); }
.uwc-box--vorsicht .uwc-marke { color: var(--uwc-vorsicht); }

.uwc-box--recht { background: var(--uwc-recht-flaeche); border-left-color: var(--uwc-recht); font-size: 0.9em; }
.uwc-box--recht .uwc-marke { color: var(--uwc-recht); }

.uwc-box--uebung { background: var(--uwc-uebung-flaeche); border-left-color: var(--uwc-uebung); }
.uwc-box--uebung .uwc-marke { color: var(--uwc-uebung); }
.uwc-box--uebung .uwc-pflicht { color: var(--uwc-text-gedaempft); font-style: italic; }

/* Key sentence: the strong end of the page, white on the accent colour as in the sample. */
.uwc-box--merksatz { background: var(--uwc-akzent); border-left-color: var(--uwc-akzent); color: var(--uwc-auf-akzent); font-weight: 600; font-size: 1.08em; line-height: 1.45; }
.uwc-box--merksatz .uwc-marke { color: var(--uwc-auf-akzent-marke); font-size: 0.75rem; }

/* Core statement of a former diagram: the strong opener on the accent colour. */
.uwc-box--kern { background: var(--uwc-akzent); border-left-color: var(--uwc-akzent); color: var(--uwc-auf-akzent); font-weight: 700; }
.uwc-box--kern .uwc-marke { color: var(--uwc-auf-akzent-marke); }

/* ---------- Steps and lists ---------- */
.uwc-lektion ol.uwc-schritte,
ol.wp-block-list.uwc-schritte {
	list-style: none;
	counter-reset: uwc-schritt;
	padding-left: 0;
	margin: 0 0 var(--uwc-abstand);
}
ol.uwc-schritte > li {
	counter-increment: uwc-schritt;
	position: relative;
	min-height: 2.5rem;
	padding: 0.375rem 0 0.75rem 3.25rem;
}
/* Numbers in a light accent circle with accent digits, as in the sample - not a filled blue
   circle with white content, which would read as a mandatory sign. */
ol.uwc-schritte > li::before {
	content: counter(uwc-schritt);
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--uwc-akzent-hell);
	color: var(--uwc-akzent);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.uwc-schritte { margin: 0 0 var(--uwc-abstand); padding-left: 1.25rem; }
ul.uwc-schritte > li { margin-bottom: 0.375rem; }
ul.uwc-schritte > li::marker { color: var(--uwc-akzent); }

/* ---------- Right and wrong ---------- */
.uwc-richtig-falsch { margin: var(--uwc-abstand) 0; }
.uwc-richtig-falsch .uwc-spalte {
	padding: var(--uwc-innen-block) var(--uwc-innen-seite);
	border-radius: var(--uwc-rundung);
}
.uwc-richtig-falsch .uwc-spalte > :first-child { margin-top: 0; }
.uwc-richtig-falsch .uwc-spalte > :last-child { margin-bottom: 0; }
.uwc-richtig-falsch .uwc-spalte h4 { margin: 0 0 0.375rem; }
.uwc-richtig-falsch .uwc-spalte ul { margin: 0; padding-left: 1.25rem; }
.uwc-spalte--gut { background: var(--uwc-gut-flaeche); }
.uwc-spalte--gut h4 { color: var(--uwc-gut); }
.uwc-spalte--schlecht { background: var(--uwc-schlecht-flaeche); }
.uwc-spalte--schlecht h4 { color: var(--uwc-schlecht); }
/* Mark and word together (status never by colour alone); the mark is hidden from screen readers. */
.uwc-spalte--gut h4::before { content: "\2713" / ""; margin-right: 0.5rem; }
.uwc-spalte--schlecht h4::before { content: "\2715" / ""; margin-right: 0.5rem; }

/* ---------- Pictures ---------- */
.uwc-lektion .wp-block-image { margin: var(--uwc-abstand) 0; }
.uwc-lektion .wp-block-image img { max-width: 100%; height: auto; border-radius: var(--uwc-rundung-klein); }
.uwc-lektion .wp-block-image figcaption { color: var(--uwc-text-gedaempft); font-size: 0.875rem; margin-top: 0.375rem; }
/* Real photos keep their frame (Board Martin 2026-08-22): drawn is the situation, real is what
   must be recognised. */
.uwc-lektion .wp-block-image.uwc-foto img { border: 0.25rem solid var(--uwc-text); }

/* Picture beside text: columns, picture first in the markup so it stands above the text on a
   phone; on a wide screen the picture takes 40 percent, "rechts" puts it on the right. */
.uwc-lektion .uwc-neben { margin: var(--uwc-abstand) 0; align-items: flex-start; }
.uwc-lektion .uwc-neben .wp-block-image { margin: 0; }
.uwc-lektion .uwc-neben-text > :first-child { margin-top: 0; }
/* On a phone the columns stack; the core gap of 2em plus the paragraph margin left a hole
   between picture and text (Martin, 22.10.2026). */
@media (max-width: 781px) {
	.uwc-lektion .wp-block-columns.uwc-neben,
	.uwc-lektion .wp-block-columns.uwc-bildpaar { row-gap: 0.75rem; }
}
@media (min-width: 782px) {
	.uwc-lektion .wp-block-columns.uwc-neben > .wp-block-column.uwc-neben-bild { flex: 0 0 40%; }
	.uwc-lektion .wp-block-columns.uwc-neben--rechts { flex-direction: row-reverse; }
}

.uwc-lektion .uwc-bildpaar { margin: var(--uwc-abstand) 0; }
.uwc-lektion .uwc-bildpaar .wp-block-image { margin: 0; }

/* Symbol list: narrow symbol column and text column, side by side also on a phone. */
.uwc-lektion .wp-block-columns.uwc-symbol-zeile { margin: 0 0 0.75rem; gap: 1rem; align-items: flex-start; }
.uwc-lektion .wp-block-columns.uwc-symbol-zeile > .wp-block-column.uwc-symbol-bild { flex: 0 0 5.5rem; }
.uwc-lektion .uwc-symbol-zeile .wp-block-image { margin: 0; }
.uwc-lektion .uwc-symbol-zeile .wp-block-image img { max-width: 5.5rem; border-radius: 0; }
.uwc-lektion .uwc-symbol-text p { margin: 0; }