/* ==========================================================================
   Brillenheld — Konfigurator · Gestaltung "Grosser Blick"

   Nur Aussehen. Aufbau, Schritte, Felder, Namen, Daten-Attribute und das
   Verhalten aus konfigurator.js sind unveraendert.

   Nutzt die Farbmarken des Themes. Jede var() hat einen Rueckfallwert: Das
   Plugin soll auch dann nicht auseinanderfallen, wenn es einmal unter einem
   anderen Theme laeuft. Kontraste sind die des Themes und dort gemessen
   (tools/kontrast.py) - hier werden keine neuen Farben erfunden.

   Kirschrot nur fuer Auswahl, Preise und Knoepfe.
   ========================================================================== */

/* Ueberschriften-Ebene (0.8.0, Penelope): Die Zwischenueberschriften sind
   H2 statt H3 (H1 -> H2, keine Stufe uebersprungen), sehen aber aus wie
   bisher die H3. :where() haelt die Spezifitaet niedrig, damit die
   bisherigen Regeln (.bh-unterschritt, .bh-zwischen ...) weiter greifen;
   diese Datei steht nach dem Theme, darum schlaegt sie h2 und .prose h2. */
:where(.bh-konf) h2.bh-h3 { font-size: 1.3rem; }
:where(.prose) h2.bh-h3 { margin: 32px 0 12px; font-size: 1.3rem; }

.bh-konf {
	--bh-linie:   var(--linie, #E4DEE0);
	--bh-bedien:  var(--bedien, #8C7C82);
	--bh-rose:    var(--rose, #FBEFF2);
	--bh-ton:     var(--kirsch, #A4133C);
	--bh-text:    var(--tinte, #1A1A1E);
	--bh-leise:   var(--leise, #50505A);
	--bh-rund:    var(--r, 14px);
	--bh-rand:    20px;   /* = Seitenrand von .wrap im Theme */

	max-width: 1000px;
}

/* ---------------------------------------------------------- Fortschritt
   Fuenf Kreise auf einer Linie. Der Selektor traegt .bh-konf mit, damit die
   Listenregel des Fliesstexts (.prose ol: Einzug links) nicht greift. */

.bh-konf .bh-fortschritt {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	/* So viele Spalten wie Schritte - die Zahl steht nur im Markup. */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	position: relative;
}

.bh-konf .bh-fortschritt::before {
	content: '';
	position: absolute;
	left: 10%;
	right: 10%;
	top: 19px;
	height: 2px;
	background: var(--bh-linie);
}

.bh-konf .bh-fortschritt li {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 6px;
	margin: 0;
	position: relative;
	font-size: .8rem;
	line-height: 1.25;
	text-align: center;
	color: var(--bh-leise);
}

.bh-fortschritt .bh-nr {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	font-weight: 500;
	font-size: 1rem;
	color: var(--bh-text);
}

.bh-fortschritt [aria-current="step"] {
	color: var(--bh-text);
	font-weight: 500;
}

.bh-fortschritt [aria-current="step"] .bh-nr {
	background: var(--bh-ton);
	border-color: var(--bh-ton);
	color: #FFF;
}

.bh-fortschritt .bh-erledigt .bh-nr {
	border-color: var(--bh-ton);
	color: var(--bh-ton);
}

/* -------------------------------------------------------------- Schritt */

.bh-schritt {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.bh-schritt legend {
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.15;
	padding: 0;
	margin-bottom: 18px;
}

.bh-unterschritt {
	margin-top: 40px;
}

/* Steht der Unterschritt direkt unter der Schrittueberschrift (Schritt Dicke),
   kein zusaetzlicher Abstand. */
.bh-schritt > legend + .bh-unterschritt {
	margin-top: 0;
}

.bh-unterschritt h3,
.bh-unterschritt h2.bh-h3 {
	font-size: 1.35rem;
	margin: 0 0 8px;
}

.bh-konf .bh-hinweis {
	color: var(--bh-leise);
	font-size: 1rem;
	margin: 0 0 12px;
	max-width: 68ch;
}

/* ---------------------------------------------------------------- Karten

   Das Feld liegt unsichtbar ueber der ganzen Karte. Es bleibt bedienbar und
   fokussierbar - nicht mit display:none entfernt, sonst faellt es aus der
   Tabulatorreihenfolge und der Konfigurator ist mit der Tastatur nicht
   mehr zu bedienen.

   Rechts sitzt ein Kreis (bei Mehrfachwahl ein Kaestchen), gewaehlt wird er
   kirschrot gefuellt. Die gewaehlte Karte bekommt Rose als Flaeche und einen
   dickeren Rand - der dickere Rand ist ein Schatten nach innen, damit die
   Karte beim Waehlen nicht um ein Pixel springt. */

.bh-wahl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin-top: 4px;
}

/* Raster nach der Breite der linken Spalte, nicht des Fensters: Die Spalte
   ist ein Container, so zaehlt nur der Platz neben der Seitenleiste.
   Alle Raster: Karten mindestens 240 px, also ab 492 px Spalte zwei
   nebeneinander - bei 960 px Fenster bleiben neben der Leiste 525 px.
   data-spalten="3" (Gleitsicht-Stufen, Entspiegelung): ab 744 px Spalte drei
   nebeneinander (3 x 232 + 2 x 12).
   data-spalten="4" (Dicken, Fassung): ab 940 px vier nebeneinander
   (4 x 226 + 3 x 12), ab 492 px zwei (2 x 2 statt 3 + 1), darunter eine. Weniger Karten als
   Spalten strecken sich (auto-fit). */
.bh-spalte {
	container-type: inline-size;
}

@container (min-width: 492px) {
	.bh-wahl[data-spalten="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 744px) {
	.bh-wahl[data-spalten="3"] {
		grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	}
}

@container (min-width: 940px) {
	.bh-wahl[data-spalten="4"] {
		grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
	}
}

.bh-karte {
	position: relative;
	display: block;
	cursor: pointer;
}

.bh-karte input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bh-karte-inhalt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 72px;
	height: 100%;
	padding: 18px 56px 18px 18px;
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: var(--bh-rund);
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}

.bh-karte-inhalt::after {
	content: '';
	position: absolute;
	top: 18px;
	right: 18px;
	width: 24px;
	height: 24px;
	border: 2px solid var(--bh-bedien);
	border-radius: 50%;
	background: #FFF;
}

/* Veredelungen sind Mehrfachwahl: Kaestchen statt Kreis. */
.bh-karte input[type="checkbox"] + .bh-karte-inhalt::after {
	border-radius: 6px;
}

.bh-karte-inhalt b {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--bh-text);
}

.bh-karte-inhalt small {
	font-size: 1rem;
	line-height: 1.45;
	color: var(--bh-leise);
}

.bh-karte .bh-ab {
	margin-top: auto;
	padding-top: 6px;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--bh-ton);
	font-variant-numeric: tabular-nums;
}

.bh-karte:hover .bh-karte-inhalt {
	border-color: var(--bh-ton);
}

.bh-karte input:checked + .bh-karte-inhalt {
	border-color: var(--bh-ton);
	box-shadow: inset 0 0 0 1px var(--bh-ton);
	background: var(--bh-rose);
}

.bh-karte input[type="radio"]:checked + .bh-karte-inhalt::after {
	border: 7px solid var(--bh-ton);
}

/* Haken im Kaestchen: weiss auf Kirschrot. */
.bh-karte input[type="checkbox"]:checked + .bh-karte-inhalt::after {
	border-color: var(--bh-ton);
	background: var(--bh-ton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Der Fokusrahmen sitzt an der Karte, weil das Feld unsichtbar ist. */
.bh-karte input:focus-visible + .bh-karte-inhalt {
	outline: 3px solid var(--bh-text);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ Abbildungen

   Beide kommen unveraendert aus inc/grafik.php (Sehbereiche als Foto,
   Glasprofil als Zeichnung). Hier wird nur eingepasst: weisse Bildflaeche
   mit Rundung - so steht das Bild auch auf der rosefarbenen, gewaehlten
   Karte sauber als Bild da.

   Handy: Das Sehbereich-Foto steht links neben dem Text, damit drei Stufen
   nicht drei Bildschirmhoehen kosten. Das Glasprofil ist flach und bleibt
   ueber dem Text - schmal gestellt waere es nicht mehr zu lesen. */

.bh-sehbereiche,
.bh-glas {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 0 10px;
	border-radius: 10px;
	background: #FFF;
}

.bh-glas {
	padding: 6px 0;
}

@media (max-width: 699px) {
	.bh-karte-inhalt:has(> .bh-sehbereiche) {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		column-gap: 14px;
		align-content: start;
	}

	.bh-karte-inhalt > .bh-sehbereiche {
		grid-row: 1 / span 3;
		margin: 2px 0 0;
	}

	.bh-karte-inhalt:has(> .bh-sehbereiche) > :not(.bh-sehbereiche) {
		grid-column: 2;
	}
}

/* ------------------------------------------------------- Tönungsvorschau

   Eine gezeichnete Brille, die Gläser zeigen die gewählte Farbe. Weißer
   Grund, damit die Helligkeit der Prozentzahl entspricht. Knöpfe sind echte
   Knöpfe mit aria-pressed, mindestens 48 px hoch. */

.bh-tv {
	margin-top: 28px;
	padding: 20px;
	border: 2px solid var(--bh-linie);
	border-radius: var(--bh-rund);
	background: #FFF;
}

.bh-tv-buehne {
	position: relative;
	max-width: 520px;
	margin: 0 auto 8px;
}

.bh-tv-brille {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bh-tv-fassung {
	fill: none;
	stroke: var(--bh-text);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bh-konf .bh-tv-anzeige {
	min-height: 1.6em;
	margin: 6px 0 0;
	text-align: center;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--bh-text);
}

.bh-konf .bh-tv-titel {
	margin: 16px 0 8px;
	text-align: center;   /* mittig unter der Fassung (Tom, 12.10.2026) */
	font-weight: 600;
	color: var(--bh-text);
}

.bh-tv-knoepfe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* mittig unter der Fassung (Tom, 12.10.2026) */
	gap: 8px;
}

.bh-tv-knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	min-width: 48px;
	padding: 0 16px;
	font: 400 1rem/1.2 var(--sans, sans-serif);
	color: var(--bh-text);
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: 12px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.bh-tv-knopf:hover {
	border-color: var(--bh-ton);
}

.bh-tv-knopf[aria-pressed="true"] {
	border-color: var(--bh-ton);
	box-shadow: inset 0 0 0 1px var(--bh-ton);
	background: var(--bh-rose);
	font-weight: 600;
}

.bh-tv-knopf:focus-visible {
	outline: 3px solid var(--bh-text);
	outline-offset: 3px;
}

.bh-tv-punkt {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--bh-bedien);
}

.bh-konf .bh-tv-hinweis {
	margin: 16px auto 0;   /* max-width 68ch aus .bh-hinweis: Block mittig */
	font-size: .9rem;
	text-align: center;
}

@media (max-width: 520px) {
	.bh-tv {
		padding: 16px 12px;
	}

	/* Drei Farben und drei Stärken: je eine Reihe zu drei. */
	.bh-tv-knoepfe {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 420px;
		margin-inline: auto;
	}

	.bh-tv-knopf {
		justify-content: center;
		gap: 8px;
		padding: 0 8px;
	}
}

/* --------------------------------------------------------------- Warnung */

.bh-konf .bh-warnung {
	margin-top: 20px;
	padding: 14px 18px;
	border-left: 4px solid var(--bh-text);
	background: var(--bh-rose);
	border-radius: 0 var(--bh-rund) var(--bh-rund) 0;
	font-size: 1rem;
	max-width: none;
}

.bh-warnung b {
	display: block;
	color: var(--bh-text);
}

/* ------------------------------------------------------------ Sehstärke */

.bh-werte-block {
	margin-top: 36px;
	padding: 24px;
	background: var(--bh-rose);
	border-radius: var(--bh-rund);
}

.bh-werte-block h3,
.bh-werte-block h2.bh-h3:not(.bh-zwischen) {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

/* Ein Raster statt einer Tabelle: Die Werte sind ein Formular. Die Kopfzeile
   traegt die Kuerzel vom Brillenpass - sph, cyl, A, ADD. */
.bh-werte-gitter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.bh-werte-kopf,
.bh-werte-zeile {
	display: grid;
	grid-template-columns: 62px repeat(5, minmax(0, 1fr));
	gap: 8px;
	align-items: center;
}

.bh-werte-kopf span {
	display: block;
	font-size: .85rem;
	color: var(--bh-leise);
	text-align: center;
	line-height: 1.25;
}

.bh-werte-kopf b {
	display: block;
	color: var(--bh-text);
}

.bh-werte-kopf small {
	font-size: .75rem;
	letter-spacing: .02em;
}

.bh-ohne-add .bh-werte-kopf,
.bh-ohne-add .bh-werte-zeile {
	grid-template-columns: 62px repeat(4, minmax(0, 1fr));
}

.bh-auge {
	font-weight: 600;
	font-size: .95rem;
}

.bh-werte-gitter select {
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	font: inherit;
	font-weight: 400;
	text-align: center;
	color: var(--bh-text);
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: 10px;
}

.bh-werte-gitter select:focus-visible {
	outline: 3px solid var(--bh-text);
	outline-offset: 2px;
	border-color: var(--bh-ton);
}

.bh-konf .bh-pd-hinweis {
	margin-top: 14px;
	margin-bottom: 0;
}

/* Die Einwilligung steht bewusst abgesetzt und traegt einen eigenen Rahmen -
   sie ist keine Zeile unter vielen, sondern die Bedingung. */
.bh-einwilligung {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 24px;
	padding: 18px;
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: var(--bh-rund);
	font-size: 1rem;
	cursor: pointer;
}

.bh-einwilligung input {
	flex: none;
	width: 26px;
	height: 26px;
	margin: 2px 0 0;
	accent-color: var(--bh-ton);
}

.bh-einwilligung:has(input:checked) {
	border-color: var(--bh-ton);
	box-shadow: inset 0 0 0 1px var(--bh-ton);
}

/* Beschriftung nur fuer Vorleseprogramme. */
.bh-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.bh-werte-block {
		padding: 18px 14px;
	}

	.bh-werte-kopf,
	.bh-werte-zeile {
		grid-template-columns: 44px repeat(5, minmax(0, 1fr));
		gap: 6px;
	}

	.bh-ohne-add .bh-werte-kopf,
	.bh-ohne-add .bh-werte-zeile {
		grid-template-columns: 44px repeat(4, minmax(0, 1fr));
	}

	.bh-werte-gitter select {
		padding: 10px 2px;
		font-size: .9rem;
	}
}

/* ---------------------------------------------------------------- Leiste

   Preis links, Knoepfe rechts. Auf dem Handy klebt die Leiste am unteren
   Rand und reicht bis an die Bildschirmkanten - der Preis und "Weiter" sind
   auf jedem Bildschirm sichtbar. Ab 860 px wird sie zum gerahmten Kasten. */

.bh-leiste {
	position: sticky;
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	margin: 32px calc(-1 * var(--bh-rand)) 0;
	padding: 12px var(--bh-rand) calc(12px + env(safe-area-inset-bottom));
	background: #FFF;
	border-top: 3px solid var(--bh-ton);
}

.bh-summe {
	display: grid;
	line-height: 1.15;
	flex: 1 1 auto;
	min-width: 0;
}

.bh-summe-text {
	font-size: .85rem;
	color: var(--bh-leise);
}

.bh-summe-wert {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bh-summe small {
	font-size: .76rem;
	color: var(--bh-leise);
	max-width: 24ch;
}

/* Anfrage statt Preis (0.5.1) */
.bh-summe-anfrage {
	margin: 4px 0 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
}

.bh-summe [hidden] {
	display: none;
}

/* "Ich kenne meine Werte nicht" als kleiner Aufklapp-Knopf (0.5.1).
   Mindestens 44 px Zielhoehe, sichtbarer Fokus. */
.bh-aufklapp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 12px 0 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--bh-ton, #A4133C);
	font: inherit;
	font-size: .95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bh-aufklapp::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.bh-aufklapp[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-2px);
}

.bh-aufklapp:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.bh-aufklapp[hidden],
[data-unbekannt-block][hidden],
[data-unbekannt-titel][hidden] {
	display: none;
}

.bh-knoepfe {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

.bh-knoepfe .btn {
	padding: 0 20px;
}

.bh-knoepfe .btn[data-weiter],
.bh-knoepfe .btn[data-absenden] {
	min-width: 128px;
}

.bh-knoepfe .btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.bh-konf .bh-fussnote {
	margin: 16px 0 48px;
}

@media (max-width: 400px) {
	.bh-konf {
		--bh-rand: 16px;
	}
}

/* Handy: Preis und zwei Knoepfe ("Zurück", "Weiter") muessen in EINE Zeile,
   sonst frisst die klebende Leiste ein Fuenftel des Bildschirms. Der Preis
   gibt Breite ab, der Kleintext bricht um. Nur im letzten Schritt ("Zurück"
   und "In den Warenkorb") reicht es nicht - dann rutschen die Knoepfe in eine
   eigene Zeile. */
@media (max-width: 520px) {
	.bh-summe {
		flex: 1 1 0;
	}

	.bh-summe-wert {
		font-size: 1.6rem;
	}

	.bh-summe small {
		font-size: .72rem;
	}

	.bh-knoepfe .btn {
		padding: 0 16px;
	}

	.bh-knoepfe .btn[data-weiter],
	.bh-knoepfe .btn[data-absenden] {
		min-width: 108px;
	}

	/* Letzter Schritt: "In den Warenkorb" ist sichtbar - Knoepfe in eine
	   eigene Zeile, der Preis behaelt seine volle Breite. */
	.bh-leiste:has([data-absenden]:not([hidden])) .bh-knoepfe {
		flex: 1 1 100%;
	}

	.bh-leiste:has([data-absenden]:not([hidden])) .bh-knoepfe .btn {
		flex: 1 1 auto;
	}

	.bh-leiste:has([data-absenden]:not([hidden])) .bh-summe {
		flex: 1 1 100%;
	}
}

@media (min-width: 860px) {
	.bh-leiste {
		margin: 40px 0 0;
		padding: 20px 24px;
		border: 3px solid var(--bh-ton);
		border-radius: var(--bh-rund);
	}

	.bh-summe small {
		max-width: none;
	}

	.bh-summe-wert {
		font-size: 2.2rem;
	}

	.bh-knoepfe .btn {
		padding: 0 28px;
	}
}

/* Was noch fehlt, wenn der Knopf gesperrt ist - direkt bei den Knoepfen.
   Auf dem Handy eine eigene Zeile ueber Preis und Knoepfen. */
.bh-konf .bh-fehlt {
	flex: 1 1 100%;
	order: -1;
	margin: 0;
	font-size: .9rem;
	font-weight: 500;
	color: var(--bh-text);
	max-width: none;
}

@media (min-width: 960px) {
	.bh-konf .bh-fehlt {
		order: 0;
	}
}

/* ------------------------------------------------ Seitenleiste ab 960 px

   Unter 960 px bleibt die Leiste unten klebend (wie bisher); Auswahl und
   Aufschluesselung sind dort ausgeblendet, damit sie klein bleibt.

   WARUM 960: Das Theme bricht seine Startseite auch bei 960 auf zwei Spalten
   um. Bei 960 px bleiben fuer die linke Spalte 920 − 40 − 340 = 540 px, mit
   Bildlaufleiste gemessen 525 px - das reicht fuer zwei Wahlkarten
   nebeneinander (je mind. 240 px). Darunter
   wuerden die Karten einspaltig und die Seitenleiste nur Platz kosten.

   Die Leiste klebt unter der Kopfzeile (68 px + Linie + Abstand = 85 px)
   und bleibt im Formular - sie schiebt sich nie ueber den Fussbereich. */
.bh-auswahl,
.bh-aufschluesselung {
	display: none;
}

@media (min-width: 960px) {
	.bh-konf {
		max-width: none;
	}

	.bh-konf .bh-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: 40px;
		align-items: start;
	}

	.bh-spalte {
		grid-column: 1;
		min-width: 0;
	}

	.bh-konf .bh-leiste {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 85px;
		bottom: auto;
		max-height: calc(100vh - 101px);
		overflow: auto;
		margin: 0;
		padding: 24px;
		display: flex;
		flex-direction: column;
		/* Pflicht: die Handy-Regel setzt wrap - in einer Spalte mit
		   max-height bricht der Inhalt sonst rechts aus der Karte aus
		   (im Test am 12.10.2026 so gesehen). Zu lang = Karte scrollt. */
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 18px;
		border: 3px solid var(--bh-ton);
		border-radius: var(--bh-rund);
	}

	.bh-auswahl {
		display: block;
	}

	/* Mit .bh-konf .bh-leiste: die Fliesstext-Regel des Themes (.prose h2)
	   ist sonst staerker und macht daraus eine Kapitelueberschrift. */
	.bh-konf .bh-leiste .bh-leiste-titel {
		margin: 0 0 10px;
		font-size: 1.15rem;
		letter-spacing: -.01em;
	}

	.bh-auswahl-liste,
	.bh-aufschluesselung {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 6px 12px;
		margin: 0;
		font-size: .95rem;
	}

	.bh-auswahl-liste dt,
	.bh-aufschluesselung dt {
		color: var(--bh-leise);
	}

	.bh-auswahl-liste dd,
	.bh-aufschluesselung dd {
		margin: 0;
		color: var(--bh-text);
		overflow-wrap: anywhere;
	}

	.bh-konf .bh-leiste > * {
		flex: 0 0 auto;
	}

	.bh-aufschluesselung {
		padding-top: 12px;
		border-top: 1px solid var(--bh-linie);
		font-variant-numeric: tabular-nums;
	}

	/* Betraege nie umbrechen; lange Namen links duerfen umbrechen. */
	.bh-konf .bh-aufschluesselung {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.bh-aufschluesselung dd {
		text-align: right;
		white-space: nowrap;
	}

	.bh-konf .bh-leiste .bh-summe small {
		max-width: none;
	}

	.bh-konf .bh-leiste .bh-knoepfe {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.bh-konf .bh-leiste .bh-knoepfe .btn {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 18px;
	}
}

/* ------------------------------------------- Staerke, Ueberblick, Anfrage */

/* Sieben Schritte passen auf dem Handy nicht mit Namen nebeneinander:
   dort steht nur der Name des aktuellen Schritts. Vorlesen koennen alle. */
@media (max-width: 559px) {
	.bh-konf .bh-fortschritt .bh-schritt-knopf:not([aria-current="step"]) .bh-name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Schritte als Knoepfe: volles Tipp-Ziel, sichtbarer Fokus. Nicht
   erreichbare Schritte (aria-disabled) sind blass, bleiben aber lesbar
   (#6B6B75 auf Weiss) und fokussierbar - ein Klick tut nichts. */
.bh-schritt-knopf {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	padding: 0 0 4px;
	font: inherit;
	color: inherit;
	text-align: center;
	background: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}
.bh-schritt-knopf:focus-visible {
	outline: 3px solid var(--bh-text);
	outline-offset: 2px;
}
.bh-schritt-knopf:not([aria-disabled="true"]):not([aria-current="step"]):hover .bh-nr {
	border-color: var(--bh-ton);
}
.bh-schritt-knopf[aria-disabled="true"] {
	cursor: default;
	color: #6B6B75;
}
.bh-schritt-knopf[aria-disabled="true"] .bh-nr {
	border-color: #D9D9DE;
	color: #6B6B75;
	background: #F7F7F8;
}

.bh-fortschritt li.bh-uebersprungen .bh-nr {
	border-style: dashed;
	color: var(--bh-leise);
}

.bh-konf .bh-zwischen {
	margin: 28px 0 10px;
	font-size: 1.15rem;
}

.bh-konf .bh-staerke-ergebnis {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-left: 4px solid var(--bh-ton);
	background: var(--bh-rose);
	border-radius: 0 var(--bh-rund) var(--bh-rund) 0;
	font-weight: 500;
	max-width: none;
}

.bh-konf .bh-staerke-achtung {
	border-left-color: var(--bh-text);
}

.bh-konf .bh-hinweis-fassung {
	margin: 20px 0 0;
	font-size: .95rem;
	color: var(--bh-leise);
	max-width: 68ch;
}

.bh-konf .bh-meldung {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 2px solid var(--bh-ton);
	border-radius: var(--bh-rund);
	background: var(--bh-rose);
	font-weight: 500;
	max-width: none;
}

.bh-uebersicht {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 10px 16px;
	margin: 0 0 8px;
	padding: 18px;
	border: 2px solid var(--bh-linie);
	border-radius: var(--bh-rund);
}

.bh-uebersicht dt {
	font-weight: 600;
	color: var(--bh-text);
}

.bh-uebersicht dd {
	margin: 0;
	color: var(--bh-text);
	overflow-wrap: anywhere;
}

@media (max-width: 520px) {
	.bh-uebersicht {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.bh-uebersicht dd {
		margin-bottom: 10px;
	}
}

.bh-fassung-pflicht .bh-einwilligung {
	margin-top: 12px;
}

.bh-konf .bh-feld {
	display: grid;
	gap: 6px;
	margin: 14px 0 0;
	max-width: 32rem;
}

.bh-feld label {
	font-weight: 600;
}

.bh-feld input {
	min-height: 52px;
	padding: 10px 14px;
	font: inherit;
	font-weight: 400;
	color: var(--bh-text);
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: 10px;
}

.bh-feld input:focus-visible {
	outline: 3px solid var(--bh-text);
	outline-offset: 2px;
	border-color: var(--bh-ton);
}

.bh-werte-gitter select:disabled {
	background: #F3F3F4;
	cursor: not-allowed;
}

/* ⚠️ DIESE REGEL IST PFLICHT, NICHT KOSMETIK.

   `[hidden]` wirkt nur ueber `display:none` aus dem Browser-Stylesheet -
   jede eigene display-Angabe sticht es aus. Betroffen war zweimal dasselbe:

     .btn { display:inline-flex }   aus dem Theme
     .bh-karte { display:block }    aus dieser Datei

   Folge beim ersten Mal: "Zurueck", "Weiter" und "In den Warenkorb" standen
   gleichzeitig da. Folge beim zweiten Mal, schlimmer: Die Stufen der
   jeweils anderen Glasart blieben sichtbar - im DOM sauber auf hidden
   gesetzt, auf dem Schirm trotzdem da. Am 29.08.2026 beides gesehen.

   📝 Daraus die Lehre fuers Pruefen: `element.hidden` im DOM abzufragen
   beweist NICHT, dass etwas unsichtbar ist. Es muss angesehen werden.

   Deshalb eine Regel fuer alles im Konfigurator, statt einer je Fall. Sie
   steht am Ende der Datei, damit keine spaetere Regel sie aussticht. */
.bh-konf [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------- Ohne JS

   Solange konfigurator.js nicht gelaufen ist, fehlt die Klasse bh-mit-js.
   Dann stehen alle Schritte untereinander, die Knoepfe zum Blaettern sind
   weg und nur "In den Warenkorb" bleibt. Der Preis erscheint erst im
   Warenkorb. Die Leiste klebt dann nicht. */

.bh-konf:not(.bh-mit-js) .bh-schritt[hidden] {
	display: block !important;
}

.bh-konf:not(.bh-mit-js) .bh-schritt {
	margin-bottom: 48px;
}

.bh-konf:not(.bh-mit-js) .bh-leiste {
	position: static;
}

.bh-konf:not(.bh-mit-js) [data-weiter],
.bh-konf:not(.bh-mit-js) [data-zurueck],
.bh-konf:not(.bh-mit-js) .bh-summe {
	display: none;
}

.bh-konf:not(.bh-mit-js) [data-absenden],
.bh-konf:not(.bh-mit-js) [data-anfrage] {
	display: inline-flex !important;
}

/* Ohne Skript: Bereichswahl und Anfrage-Felder stehen offen da; welcher
   Weg gilt, entscheidet der Server. */
.bh-konf:not(.bh-mit-js) [data-nur-ohne-werte],
.bh-konf:not(.bh-mit-js) [data-nur-anfrage] {
	display: block !important;
}

/* Gesperrte Karte (Blaulichtfilter bei Selbsttoenend, Standardglas bei zu
   hohen Werten): sichtbar, aber deutlich blasser (Tom, 12.10.2026).
   Text #6B6B75 auf #F7F7F8 = 4,92 : 1 - bleibt lesbar (Soll 4,5). */
.bh-karte.bh-gesperrt {
	cursor: not-allowed;
}
.bh-karte.bh-gesperrt .bh-karte-inhalt {
	background: #F7F7F8;
	border: 2px dashed #D9D9DE;
	color: #6B6B75;
	box-shadow: none;
}
.bh-karte.bh-gesperrt .bh-karte-inhalt::after {
	border-color: #D9D9DE;
	background: #F7F7F8;
}
.bh-karte.bh-gesperrt .bh-karte-inhalt b,
.bh-karte.bh-gesperrt .bh-karte-inhalt small,
.bh-karte.bh-gesperrt .bh-ab {
	color: #6B6B75;
	font-weight: 400;
}
.bh-karte.bh-gesperrt .bh-karte-inhalt img {
	opacity: .35;
}
.bh-karte.bh-gesperrt:hover .bh-karte-inhalt {
	border-color: #D9D9DE;
}
.bh-sperrhinweis {
	display: block;
	margin-top: 6px;
	font-weight: 600;
	font-size: .9rem;
	color: #3F3F46;
}

/* PD-Felder und Werte-Pruefung */
.bh-pd-felder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 12rem));
	gap: 0 16px;
	margin-top: 4px;
}
.bh-pd-felder .bh-pd-hinweis {
	grid-column: 1 / -1;
}
.bh-pd-felder select {
	min-height: 52px;
	padding: 10px 12px;
	font: inherit;
	font-weight: 400;
	color: var(--bh-text);
	background: #FFF;
	border: 2px solid var(--bh-bedien);
	border-radius: 10px;
}
.bh-pd-felder select:disabled {
	background: #F3F3F4;
}
.bh-werte-pruefen {
	margin: 20px 0 8px;
	padding: 18px;
	border: 2px solid var(--bh-ton);
	border-radius: var(--bh-rund);
	background: var(--bh-rose);
}
.bh-werte-pruefen h3,
.bh-werte-pruefen h2.bh-h3 {
	margin: 0 0 10px;
	font-size: 1.15rem;
}
.bh-scrollbar {
	overflow-x: auto;
}
.bh-werte-tabelle {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	background: #FFF;
}
.bh-werte-tabelle th,
.bh-werte-tabelle td {
	padding: 8px 12px;
	border: 1px solid var(--bh-linie);
	text-align: center;
	white-space: nowrap;
}
.bh-werte-tabelle th {
	font-weight: 600;
}

/* Toenung: schmales Fotoband ueber der Vorschau (0.5.2) */
.bh-tv-streifen {
	margin: -4px 0 16px;
	border-radius: 12px;
	overflow: hidden;
	height: 96px;
}

.bh-tv-streifen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

@media (min-width: 700px) {
	.bh-tv-streifen {
		height: 140px;
	}
}

/* Entspiegelung: gezeichnetes Glas im Licht (0.5.3). Zurueckhaltende
   Farben - der Restreflex ist in Wirklichkeit schwach. */
.bh-konf {
	--bh-reflex-gruen:   #3FA36B;
	--bh-reflex-blau:    #3D7FD1;
	--bh-reflex-neutral: #A9AEB8;
}

.bh-reflex {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
	margin: 0 0 10px;
	--bh-reflex-staerke: .42;
}

.bh-reflex--gruen   { color: var(--bh-reflex-gruen); }
.bh-reflex--blau    { color: var(--bh-reflex-blau); }
.bh-reflex--neutral { color: var(--bh-reflex-neutral); --bh-reflex-staerke: .22; }

.bh-reflex-schimmer {
	opacity: var(--bh-reflex-staerke);
}

.bh-reflex-hinweis {
	margin-top: 12px;
}

/* Gleitsicht, einfache Linie: nicht moegliche Farbknoepfe (0.6.0) */
.bh-tv-knopf.bh-tv-aus,
.bh-tv-knopf:disabled {
	opacity: .38;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ---------------------------------------------- Kundenseite (0.7.0)
   /mein-auftrag/ (inc/kundenlink.php): dieselben Felder wie im
   Konfigurator, dazu Stand, Anleitung zum Foto, Ruecksendeformular. */

.bh-kunde {
	padding: 32px 0 64px;
}

.bh-kunde h1 {
	margin: 0 0 8px;
}

.bh-kunde h2 {
	margin: 32px 0 12px;
	font-size: 1.3rem;
}

.bh-kunde-stand {
	margin: 0 0 16px;
	color: var(--bh-leise);
}

.bh-kunde-offen,
.bh-kunde-anleitung {
	margin: 0 0 16px;
	padding-left: 1.3em;
	line-height: 1.6;
}

.bh-kunde-block {
	border-top: 1px solid var(--bh-linie);
	margin-top: 24px;
}

.bh-kunde .bh-werte-block {
	margin: 0 0 16px;
}

.bh-kunde .bh-feld input[type="file"] {
	display: block;
	max-width: 100%;
	margin-top: 6px;
	font: inherit;
}

.bh-kunde-gueltig {
	margin-top: 32px;
}

.bh-kunde .bh-meldung {
	border-left: 4px solid #0B6E4F;
	padding: 10px 14px;
	background: #EEF7F2;
}

/* Ruecksendeformular: auf Papier ohne Kopf, Fuss und Knopf. */
.bh-ruecksendung {
	padding: 32px 0 64px;
	max-width: 760px;
}

.bh-rs-felder {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 18px 16px;
	margin: 24px 0;
}

.bh-rs-felder dt {
	font-weight: 600;
}

.bh-rs-felder dd {
	margin: 0;
	min-height: 1.6em;
}

.bh-rs-linie {
	display: block;
	border-bottom: 1px solid var(--bh-text);
	height: 1.6em;
	margin-bottom: 8px;
}

@media (max-width: 600px) {
	.bh-rs-felder {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.bh-rs-felder dd {
		margin-bottom: 14px;
	}
}

@media print {
	.kopf,
	.fuss,
	footer,
	.skip-link,
	.bh-rs-druck {
		display: none !important;
	}
	.bh-ruecksendung {
		padding: 0;
	}
}

/* Bereichskarten beim Weg "Aus der Brille auslesen", solange die Einwilligung
   fehlt (Arno S3, 0.7.1): blass, nicht waehlbar. Eigene Klasse, damit sie
   nicht als Sperrregel (bh-gesperrt) zaehlt. */
.bh-karte.bh-gesperrt-einw {
	cursor: not-allowed;
}
.bh-karte.bh-gesperrt-einw .bh-karte-inhalt {
	background: #F7F7F8;
	border-style: dashed;
	color: #6B6B75;
}
.bh-einwilligung-block {
	margin: 18px 0 0;
}