/*
 * Die drei Sehsysteme im Vergleich — inc/glasarten.php, bv_glas_systeme(). Nur in der Vorschau
 * ?bv-neu=1 (Präfix teil-zzzzzz-). Eine Brille, drei Zonenaufteilungen: Einstärken, Gleitsicht,
 * Bifokal. Gezeigt wird, was data-system am Kasten sagt; die Lagen blenden weich über.
 * Beim Bifokalglas rücken die Linien im Lesefeld gegen die außerhalb — der Bildsprung an der Kante.
 */

.gl-sys-lage,
.gl-sys-worte,
.gl-sys-leiste {
	opacity: 0;
	transition: opacity .6s var(--weich, ease);
}

.gl-systeme[data-system="einstaerke"] [data-system="einstaerke"],
.gl-systeme[data-system="gleitsicht"] [data-system="gleitsicht"],
.gl-systeme[data-system="bifokal"] [data-system="bifokal"] {
	opacity: 1;
}

/* Das Lesefeld und seine Kante. */
.gl-sys-segment {
	fill: var(--gold-tief, #A98F5F);
	opacity: .5;
}

.gl-sys-kante {
	fill: none;
	stroke: var(--blau, #13376D);
	stroke-width: 2.4;
	stroke-linejoin: round;
}

/* Die Linien hinter dem Glas; im Lesefeld springen sie, sobald das Bifokalglas da ist. */
.gl-sys-linien line {
	stroke: var(--blau, #13376D);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: .55;
}

.gl-sys-sprung {
	transform: translateY(0);
	transition: transform .7s var(--weich, ease) .45s;
}

.gl-systeme[data-system="bifokal"] .gl-sys-sprung {
	transform: translateY(-7px);
}

/* Die Figur — wie .gl-fall in teil-zz-glasarten.css, aber ohne deren Klasse (glasarten.js würde sie
   verstecken, weil sie kein data-ist trägt). */
.gl-sys-fall {
	margin: 0;
	display: grid;
	gap: .7rem;
	justify-items: center;
}

.gl-sys-saetze {
	display: grid;
	max-width: 34rem;
}

/* Alle Sätze in derselben Zelle: der Kasten ist so hoch wie der längste, nichts springt beim Wechsel. */
.gl-sys-satz {
	grid-area: 1 / 1;
	color: var(--text-leise);
	font-size: clamp(.82rem, .6rem + .45vw, .95rem);
	line-height: 1.55;
	text-align: center;
	text-wrap: pretty;
}

/* Die Unterschrift: nur die des gezeigten Systems (ohne Skript: nur die erste, die anderen [hidden]). */
.gl-sys-satz[hidden] {
	display: none;
}

.gl-systeme[data-laeuft] .gl-sys-satz {
	visibility: hidden;
}

.gl-systeme[data-laeuft][data-system="einstaerke"] .gl-sys-satz[data-system="einstaerke"],
.gl-systeme[data-laeuft][data-system="gleitsicht"] .gl-sys-satz[data-system="gleitsicht"],
.gl-systeme[data-laeuft][data-system="bifokal"] .gl-sys-satz[data-system="bifokal"] {
	visibility: visible;
}

/* Ein Kasten, der von selbst wechselt, hält still, solange jemand ihn bedient. */
.gl-systeme .gl-knopf[aria-pressed="true"] {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #CBB082) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.gl-sys-lage,
	.gl-sys-worte,
	.gl-sys-leiste,
	.gl-sys-sprung {
		transition: none;
	}
}