/*!
 * hotbytes Lesehilfe – Bedienfeld und Darstellungs-Einstellungen.
 * Gestaltung pro Kunde im Theme über die Variablen --hb-lh-* überschreiben, nicht hier.
 * Alle Darstellungs-Regeln hängen an html[data-hb-lh-*]: ohne Wahl des Besuchers ändert sich nichts.
 */

/* ===== Darstellungs-Einstellungen ===== */

/* Schriftgröße: Basis × Faktor. Unsere Themes rechnen in rem/clamp, darum wächst die Schrift mit. */
html[data-hb-lh-groesse="105"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.05) !important; }
html[data-hb-lh-groesse="110"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.10) !important; }
html[data-hb-lh-groesse="115"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.15) !important; }
html[data-hb-lh-groesse="120"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.20) !important; }
html[data-hb-lh-groesse="125"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.25) !important; }
html[data-hb-lh-groesse="130"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.30) !important; }
html[data-hb-lh-groesse="140"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.40) !important; }
html[data-hb-lh-groesse="150"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.50) !important; }
html[data-hb-lh-groesse="175"] { font-size: calc(var(--hb-lh-basis, 100%) * 1.75) !important; }
html[data-hb-lh-groesse="200"] { font-size: calc(var(--hb-lh-basis, 100%) * 2.00) !important; }
/* Lange Wörter bei großer Schrift: zuerst mit Trennstrich (Sprache aus <html lang>), nur notfalls hart umbrechen statt aus dem Rahmen zu laufen. */
html[data-hb-lh-groesse] body :where(*):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) { overflow-wrap: break-word; }
html[data-hb-lh-groesse] :where(h1, h2, h3, h4, h5, h6):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) { -webkit-hyphens: auto; hyphens: auto; }

/* Links hervorheben (nur Fließtext-Links, keine Buttons und kein Bedienfeld). */
html[data-hb-lh-links] a:where(:not([class*="btn"]):not([class*="button"]):not([role="button"])):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) {
	text-decoration-line: underline !important;
	text-decoration-thickness: max(2px, 0.1em) !important;
	text-underline-offset: 0.2em !important;
}
html[data-hb-lh-links] a:where([class*="btn"], [class*="button"], [role="button"]):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) {
	outline: 2px dashed currentColor !important;
	outline-offset: 3px !important;
}
html[data-hb-lh-links] a:hover:where(:not(#hb-lesehilfe, #hb-lesehilfe *)) { text-decoration-thickness: max(3px, 0.15em) !important; }

/* Animationen anhalten. */
html[data-hb-lh-ruhe] *,
html[data-hb-lh-ruhe] *::before,
html[data-hb-lh-ruhe] *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0s !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html[data-hb-lh-ruhe] { scroll-behavior: auto !important; }

/* Einfache Schrift (Systemschrift, keine Fremdschrift). Icon-Schriften bleiben unberührt. */
html[data-hb-lh-lesefont] body,
html[data-hb-lh-lesefont] body :where(:not(i):not(svg):not(svg *):not([class*="icon"]):not([class*="fa-"]):not([class*="dashicons"]):not(#hb-lesehilfe, #hb-lesehilfe *)) {
	font-family: var(--hb-lh-lesefont, Verdana, "Segoe UI", Tahoma, Arial, sans-serif) !important;
	letter-spacing: 0.01em !important;
}

/* Mehr Zeilenabstand (nur Textblöcke, nicht Überschriften oder Buttons). */
html[data-hb-lh-zeilen] :where(p, li, dd, dt, td, th, blockquote, figcaption, label):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) {
	line-height: 1.8 !important;
	word-spacing: 0.08em !important;
}
html[data-hb-lh-zeilen] :where(p, ul, ol, blockquote):where(:not(#hb-lesehilfe, #hb-lesehilfe *)) { margin-bottom: max(1em, 1.2em) !important; }

/* ===== Bedienfeld ===== */

.hb-lh {
	--hb-lh-flaeche: #ffffff;
	--hb-lh-text: #1d1d1b;
	--hb-lh-rand: #6b6b6b;
	--hb-lh-fokus: var(--hb-lh-akzent, #1d1d1b);
	position: fixed;
	bottom: var(--hb-lh-unten, 20px);
	z-index: 99990;
	font: 400 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	letter-spacing: normal !important;
	color: var(--hb-lh-text);
}
.hb-lh--rechts { right: var(--hb-lh-seite, 20px); }
.hb-lh--links { left: var(--hb-lh-seite, 20px); }
.hb-lh *, .hb-lh *::before, .hb-lh *::after { box-sizing: border-box; font-family: inherit !important; line-height: 1.45 !important; letter-spacing: normal !important; word-spacing: normal !important; }

.hb-lh__sr {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.hb-lh__knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 48px; min-height: 48px; padding: 0 12px;
	border: 2px solid var(--hb-lh-knopf-text, #fff); border-radius: 999px;
	background: var(--hb-lh-knopf-hg, #1d1d1b); color: var(--hb-lh-knopf-text, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	font-size: 15px !important; font-weight: 600; cursor: pointer;
}
.hb-lh__knopf:hover { filter: brightness(1.15); }
.hb-lh__icon { flex: 0 0 auto; }
/* Platzsparend: Text nur auf breiten Bildschirmen sichtbar, sonst als vorgelesener Name. */
@media (max-width: 781px) {
	.hb-lh__knopf { padding: 0; width: 48px; }
	.hb-lh__knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

.hb-lh__panel {
	position: absolute; bottom: calc(100% + 12px);
	width: min(340px, calc(100vw - 2 * var(--hb-lh-seite, 20px)));
	max-height: calc(100vh - var(--hb-lh-unten, 20px) - 90px); overflow-y: auto;
	padding: 16px 18px 18px;
	background: var(--hb-lh-flaeche); color: var(--hb-lh-text);
	border: 1px solid var(--hb-lh-rand); border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.hb-lh__panel[hidden] { display: none !important; }
.hb-lh--rechts .hb-lh__panel { right: 0; }
.hb-lh--links .hb-lh__panel { left: 0; }

.hb-lh__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hb-lh__titel { margin: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: var(--hb-lh-text) !important; text-transform: none !important; }
.hb-lh__zu {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0;
	border: 0; border-radius: 8px; background: transparent; color: var(--hb-lh-text);
	font-size: 28px !important; line-height: 1 !important; cursor: pointer;
}
.hb-lh__zu:hover { background: #f0f0f0; }

.hb-lh__gruppe { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.hb-lh__legende { margin: 0 0 8px; padding: 0; font-weight: 600; font-size: 15px !important; color: var(--hb-lh-text); }
.hb-lh__stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.hb-lh__stufe { position: relative; display: block; margin: 0; }
.hb-lh__stufe input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hb-lh__stufe span {
	display: flex; align-items: center; justify-content: center; min-height: 44px;
	border: 2px solid var(--hb-lh-rand); border-radius: 8px; background: #fff; color: var(--hb-lh-text);
	font-size: 15px !important; font-weight: 600;
}
.hb-lh__stufe input:checked + span { background: var(--hb-lh-akzent, #1d1d1b); border-color: var(--hb-lh-akzent, #1d1d1b); color: #fff; }

.hb-lh__schalter { display: grid; gap: 4px; margin: 0 0 14px; }
.hb-lh__schalter-zeile {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 44px; margin: 0; padding: 4px 0; cursor: pointer; font-size: 15px !important; color: var(--hb-lh-text);
}
.hb-lh__schalter-zeile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hb-lh__schalter-bahn {
	position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px;
	background: #fff; border: 2px solid var(--hb-lh-rand);
}
.hb-lh__schalter-bahn::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--hb-lh-rand); transition: transform 0.15s;
}
.hb-lh__schalter-zeile input:checked ~ .hb-lh__schalter-bahn { background: var(--hb-lh-akzent, #1d1d1b); border-color: var(--hb-lh-akzent, #1d1d1b); }
.hb-lh__schalter-zeile input:checked ~ .hb-lh__schalter-bahn::after { transform: translateX(20px); background: #fff; }

.hb-lh__reset {
	display: block; width: 100%; min-height: 44px; margin: 0 0 12px; padding: 8px 12px;
	border: 2px solid var(--hb-lh-text); border-radius: 8px; background: #fff; color: var(--hb-lh-text);
	font-size: 15px !important; font-weight: 600; cursor: pointer;
}
.hb-lh__reset:hover { background: #f0f0f0; }

.hb-lh__hinweis, .hb-lh__mehr { margin: 0 0 6px !important; font-size: 13.5px !important; color: #3d3d3d !important; }
.hb-lh__mehr a { color: var(--hb-lh-text) !important; text-decoration: underline !important; }

/* Fokus immer gut sichtbar, unabhängig vom Theme. */
.hb-lh__knopf:focus-visible,
.hb-lh__zu:focus-visible,
.hb-lh__reset:focus-visible,
.hb-lh__mehr a:focus-visible {
	outline: 3px solid var(--hb-lh-fokus) !important; outline-offset: 3px !important;
	box-shadow: 0 0 0 6px #fff !important;
}
.hb-lh__stufe input:focus-visible + span,
.hb-lh__schalter-zeile input:focus-visible ~ .hb-lh__schalter-bahn {
	outline: 3px solid var(--hb-lh-fokus) !important; outline-offset: 3px !important;
}

/* Der Knopf hält Abstand zu Cookie-Banner und Druckansicht. */
@media print { .hb-lh { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hb-lh__schalter-bahn::after { transition: none; } }