/*
 * Einstärken- und Gleitsichtgläser auf /augenoptik/ — inc/glasarten.php.
 *
 * Christopher, 07.10.2026: „recherchiere eine schöne Beschreibung und ein
 * schönes Design für Einstärken und Gleitsichtbrillen" und „Keine Grafiken
 * kopieren, nur neu erstellen."
 *
 * Nur Haustoken, kein !important, keine Fremdquelle. Die Zeichnung ist ein
 * eigenes SVG; diese Datei gibt ihr Farbe, Maß und Verhalten.
 *
 * Buchstabe zz: functions.php bindet assets/css/teil-*.css alphabetisch ein,
 * das hier ist der letzte Platz der Reihe.
 */

/* ── Der Kasten mit Knöpfen und Beispielen ───────────────────────────────── */

.gl-kasten {
	display: grid;
	gap: clamp(.8rem, 2vw, 1.2rem);
	justify-items: center;
	width: 100%;
}

.gl-schalter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
}

.gl-knopf {
	border: 1px solid color-mix(in srgb, var(--blau) 22%, transparent);
	border-radius: 999px;
	background: var(--grund);
	color: var(--blau);
	font: inherit;
	font-size: clamp(.8rem, .55rem + .5vw, .92rem);
	letter-spacing: .01em;
	padding: .42em 1.05em;
	cursor: pointer;
	transition: background .28s var(--weich), color .28s var(--weich),
		border-color .28s var(--weich);
}

.gl-knopf:hover,
.gl-knopf:focus-visible {
	border-color: var(--gold);
	background: var(--creme);
}

.gl-knopf[aria-pressed="true"] {
	background: var(--blau);
	border-color: var(--blau);
	color: var(--grund);
}

/*
 * Die Mindesthöhe hält den Kasten ruhig, wenn zwischen Beispielen mit
 * unterschiedlich langer Bildunterschrift gewechselt wird. Ohne sie springt
 * der Text darunter beim Klicken weg.
 */
.gl-fall {
	margin: 0;
	display: grid;
	gap: .7rem;
	justify-items: center;
	min-height: 1px;
}

.gl-fall[hidden] {
	/*
	 * display:grid oben schlaegt das eingebaute [hidden]{display:none} —
	 * ohne diese Regel standen am 07.10.2026 alle fuenf Beispiele untereinander.
	 */
	display: none;
}

.gl-fall figcaption {
	max-width: 34rem;
	color: var(--text-leise);
	font-size: clamp(.82rem, .6rem + .45vw, .95rem);
	line-height: 1.55;
	text-align: center;
	text-wrap: pretty;
}

/* ── Die Zeichnung ───────────────────────────────────────────────────────── */

.gl-glas {
	display: block;
	width: min(100%, 27rem);
	height: auto;
	overflow: visible;
}

/* Fassung, Steg und Bügel: damit es als Brille gelesen wird. */
.gl-fassung,
.gl-rand {
	fill: none;
	stroke: var(--blau);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gl-fassung { stroke-width: 7; }
.gl-zweites { stroke-width: 7; opacity: .45; }
.gl-backe   { fill: var(--blau); stroke: none; }

/* Die Schraffur macht den unscharfen Rand sichtbar, ohne ihn dunkel zu machen. */
.gl-strich {
	stroke: var(--text-leise);
	stroke-width: 1.7;
	opacity: .5;
}
.gl-schraffur { stroke: none; }
.gl-rand    { stroke-width: 9; }

/*
 * Der unscharfe Rand. Kein Weichzeichner-Filter — der kostet auf dem Telefon
 * spürbar Zeit und sieht in Safari anders aus als in Chrome (gemessen bei der
 * Standortkarte am 04.10.2026). Stattdessen eine Fläche in Grundfarbe mit
 * weichem Verlauf zur Mitte hin.
 */
.gl-unscharf {
	fill: var(--grund);
	opacity: .9;
}

/* ── Beschriftung im Glas ────────────────────────────────────────────────── */

.gl-wort {
	fill: var(--blau);
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
}

.gl-wort-klein {
	font-size: 15px;
	font-weight: 400;
	fill: var(--text-leise);
}

.gl-wort-rand {
	font-size: 13px;
	font-weight: 400;
	fill: var(--text-leise);
	letter-spacing: .04em;
}

/* ── Die Entfernungsleiste unter dem Glas ────────────────────────────────── */

.gl-leiste-bahn {
	stroke: color-mix(in srgb, var(--blau) 16%, transparent);
	stroke-width: 2;
	stroke-linecap: round;
}

.gl-leiste-feld {
	fill: var(--gold-tief);
}

.gl-leiste-wort {
	fill: var(--text-leise);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: .02em;
}

/* ── Das Band, in dem beides steht ───────────────────────────────────────── */

/*
 * Die Nachbarbänder haben ein Foto in .band2-bild. Hier steht stattdessen der
 * Schaukasten — er bekommt dieselbe Spalte, damit die Reihe nicht aus dem
 * Takt gerät.
 */
.gl-band .gl-bild {
	display: grid;
	align-content: center;
	margin: 0;
}

/*
 * Auf schmalen Geräten steht die Zeichnung über dem Text; die Knopfleiste
 * bleibt dabei über der Zeichnung, damit der Daumen sie erreicht, ohne zu
 * scrollen.
 */
@media (max-width: 52rem) {
	.gl-glas { width: min(100%, 22rem); }
	.gl-knopf { padding: .46em .9em; }
}

@media (prefers-reduced-motion: reduce) {
	.gl-knopf { transition: none; }
}