/**
 * BFSG Accessibility Helper - Frontend Styles
 * Version: 1.5.0
 *
 * Neues erweitertes Widget mit 10 Buttons und 4 Slidern (BFSG-konform)
 */

/* =========================================
   Skip Links
   ========================================= */
/* Container bleibt im Fluss, damit fokussierte Links sichtbar werden koennen. */
.libration-skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999999;
}

/* Unsichtbar, aber fuer Screenreader und Tastatur erreichbar. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	background: #fff;
	color: #000;
	text-decoration: underline;
	border: 2px solid #000;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
}

/* Bei Tastaturfokus sichtbar einblenden (WCAG 2.4.7). */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
	outline: 3px solid var(--libration-accent, #0073aa) !important;
	outline-offset: 2px !important;
}

/* Screenreader-Hinweise der Fix-Engine (z. B. "oeffnet in neuem Fenster"). */
.libration-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================
   Screen Reader Text
   ========================================= */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	outline: 3px solid var(--libration-accent, #4a4a4a) !important;
	outline-offset: 2px !important;
}

/* =========================================
   Accessibility Toolbar – FAB-Position
   ========================================= */
.libration-toolbar {
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Floating Action Button */
.libration-toggle {
	background: var(--libration-accent, #4a4a4a);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, filter 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.libration-toggle:hover {
	filter: brightness(0.8);
	transform: scale(1.05);
}

.libration-toggle:focus {
	outline: 3px solid var(--libration-accent, #4a4a4a);
	outline-offset: 3px;
}

body.libration-mouse-navigation .libration-toggle:focus {
	outline: none;
}

.libration-toggle svg {
	width: 32px;
	height: 32px;
}

/* =========================================
   Toolbar-Panel (Eingabehilfen-Dialog)
   ========================================= */
.libration-toolbar-content {
	position: absolute;
	right: 0;
	bottom: 78px;
	background: #ffffff;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	width: 360px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	box-sizing: border-box;
}

.libration-toolbar-content[hidden] {
	display: none;
}

/* Header */
.libration-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 10px;
}

.libration-panel-title {
	font-size: 22px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
	flex: 1;
	line-height: 1.2;
}

.libration-panel-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.libration-panel-header-actions button {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a4a4a;
	transition: background 0.2s ease;
}

.libration-panel-header-actions button:hover {
	background: #f0f0f0;
}

.libration-panel-header-actions .libration-close {
	background: var(--libration-accent, #4a4a4a);
	color: #fff;
	width: 36px;
	height: 36px;
}

.libration-panel-header-actions .libration-close:hover {
	background: var(--libration-accent, #4a4a4a);
	filter: brightness(0.85);
}

.libration-panel-header-actions button:focus {
	outline: 2px solid var(--libration-accent, #4a4a4a);
	outline-offset: 2px;
}

body.libration-mouse-navigation .libration-panel-header-actions button:focus {
	outline: none;
}

/* =========================================
   Feature-Grid (2 Spalten)
   ========================================= */
.libration-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 24px;
}

.libration-feature-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 10px;
	background: #f5f6f8;
	border: 2px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	text-align: left;
	transition: all 0.2s ease;
	min-height: 56px;
	font-family: inherit;
	line-height: 1.2;
}

.libration-feature-btn:hover {
	background: #ebecf0;
}

.libration-feature-btn:focus {
	outline: 2px solid var(--libration-accent, #4a4a4a);
	outline-offset: 2px;
}

body.libration-mouse-navigation .libration-feature-btn:focus {
	outline: none;
}

.libration-feature-btn[aria-pressed="true"] {
	background: var(--libration-accent, #4a4a4a);
	color: #fff;
	border-color: var(--libration-accent, #4a4a4a);
}

.libration-feature-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.libration-feature-icon svg {
	width: 24px;
	height: 24px;
}

.libration-feature-label {
	flex: 1;
}

/* =========================================
   Slider-Bereich
   ========================================= */
.libration-sliders {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.libration-slider-row {
	display: grid;
	grid-template-columns: 110px 1fr auto 32px 32px;
	align-items: center;
	gap: 8px;
	background: #f5f6f8;
	padding: 8px 12px;
	border-radius: 10px;
}

.libration-slider-label {
	font-size: 13px;
	font-weight: 500;
	color: #1a1a1a;
	margin: 0;
}

.libration-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: #e0e0e6;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

/* Slider-Track gefüllter Teil – via gradient */
.libration-slider {
	background: linear-gradient(to right, var(--libration-accent, #4a4a4a) 0%, var(--libration-accent, #4a4a4a) var(--libration-fill, 25%), #e0e0e6 var(--libration-fill, 25%), #e0e0e6 100%);
}

/* Slider Thumb */
.libration-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2px solid var(--libration-accent, #4a4a4a);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.libration-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2px solid var(--libration-accent, #4a4a4a);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.libration-slider:focus {
	outline: 2px solid var(--libration-accent, #4a4a4a);
	outline-offset: 4px;
}

body.libration-mouse-navigation .libration-slider:focus {
	outline: none;
}

.libration-slider-value {
	font-size: 12px;
	font-weight: 500;
	color: #666;
	min-width: 38px;
	text-align: right;
}

.libration-slider-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #d0d0d6;
	background: #fff;
	color: #1a1a1a;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	transition: background 0.15s ease;
}

.libration-slider-btn:hover {
	background: #ebecf0;
}

.libration-slider-btn:focus {
	outline: 2px solid var(--libration-accent, #4a4a4a);
	outline-offset: 2px;
}

body.libration-mouse-navigation .libration-slider-btn:focus {
	outline: none;
}

/* =========================================
   Untergrund fuer die Farbfilter
   Erbt die Hintergrundfarbe des body und wird als direktes Kind des body von
   denselben Filterregeln erfasst. Ohne ihn bliebe die Seitenflaeche hinter
   allem in Originalfarbe stehen — siehe add_color_backdrop().
   ========================================= */
#libration-color-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: inherit;
	pointer-events: none;
}

body.libration-invert-colors > #libration-color-backdrop,
body.libration-monochrome > #libration-color-backdrop,
body.libration-low-saturation > #libration-color-backdrop,
body.libration-high-saturation > #libration-color-backdrop {
	display: block;
}

@media print {
	#libration-color-backdrop { display: none !important; }
}

/* =========================================
   Feature-Effekte: Farben umkehren
   Filter auf direkte Body-Kinder, NICHT auf html
   – sonst lässt sich das Widget nicht ausschließen.
   ========================================= */
body.libration-invert-colors > *:not(#libration-toolbar):not(#wpadminbar):not(script):not(style) {
	filter: invert(1) hue-rotate(180deg);
}

/* Bilder/Videos doppelt invertieren, damit sie original aussehen */
body.libration-invert-colors img,
body.libration-invert-colors video,
body.libration-invert-colors picture,
body.libration-invert-colors iframe {
	filter: invert(1) hue-rotate(180deg);
}

/* =========================================
   Feature-Effekte: Monochrom
   ========================================= */
body.libration-monochrome > *:not(#libration-toolbar):not(#wpadminbar):not(script):not(style) {
	filter: grayscale(100%);
}

/* =========================================
   Feature-Effekte: Dunkler Kontrast
   ========================================= */
body.libration-dark-contrast {
	background: #000 !important;
	color: #fff !important;
}

body.libration-dark-contrast *:not(#libration-toolbar):not(#libration-toolbar *):not(#wpadminbar):not(#wpadminbar *) {
	background-color: #000 !important;
	/* Auch Verlaeufe und Hintergrundbilder abschalten: background-color allein
	   laesst sie stehen, und ein heller Verlauf ueber Schwarz nimmt genau den
	   Kontrast wieder weg, den dieser Modus herstellen soll. */
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
}

body.libration-dark-contrast a:not(#libration-toolbar a):not(#wpadminbar a) {
	color: #ffeb3b !important;
}

body.libration-dark-contrast button:not(.libration-feature-btn):not(.libration-slider-btn):not(.libration-close):not(.libration-reset-all):not(.libration-toggle):not(#wpadminbar button),
body.libration-dark-contrast input[type="submit"],
body.libration-dark-contrast input[type="button"] {
	background: #fff !important;
	color: #000 !important;
	border: 2px solid #fff !important;
}

/* =========================================
   Feature-Effekte: Heller Kontrast
   ========================================= */
body.libration-light-contrast {
	background: #ffffff !important;
	color: #000000 !important;
}

body.libration-light-contrast *:not(#libration-toolbar):not(#libration-toolbar *):not(#wpadminbar):not(#wpadminbar *) {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #000000 !important;
	border-color: #000000 !important;
}

body.libration-light-contrast a:not(#libration-toolbar a):not(#wpadminbar a) {
	color: #0000ee !important;
	text-decoration: underline !important;
}

/* =========================================
   Feature-Effekte: Sättigung
   ========================================= */
body.libration-low-saturation > *:not(#libration-toolbar):not(#wpadminbar):not(script):not(style) {
	filter: saturate(0.5);
}

body.libration-high-saturation > *:not(#libration-toolbar):not(#wpadminbar):not(script):not(style) {
	filter: saturate(2);
}

/* =========================================
   Feature-Effekte: Links hervorheben
   ========================================= */
body.libration-highlight-links a:not(#libration-toolbar a):not(#wpadminbar a) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 2px !important;
	background-color: #fff59d !important;
	color: #1a237e !important;
	padding: 1px 3px !important;
	border-radius: 2px !important;
	box-shadow: 0 0 0 2px #fbc02d !important;
}

/* =========================================
   Feature-Effekte: Überschriften hervorheben
   ========================================= */
body.libration-highlight-headings :is(h1, h2, h3, h4, h5, h6):not(#libration-toolbar *) {
	outline: 2px dashed var(--libration-accent, #4a4a4a) !important;
	outline-offset: 4px !important;
	background-color: rgba(108, 92, 231, 0.08) !important;
	padding: 4px 8px !important;
	border-radius: 4px !important;
}

/* =========================================
   Feature-Effekte: Lesemodus
   ========================================= */
body.libration-reading-mode {
	background: #f5f1e8 !important;
}

body.libration-reading-mode #content,
body.libration-reading-mode main,
body.libration-reading-mode article,
body.libration-reading-mode .entry-content,
body.libration-reading-mode .post-content {
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 24px !important;
	background: #fffef9 !important;
	color: #2c2c2c !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 1.15em !important;
	line-height: 1.7 !important;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important;
	border-radius: 8px !important;
}

/* Blockthemen ziehen "alignfull"- und "alignwide"-Bloecke mit negativen
   Aussenabstaenden ueber die Seitenraender hinaus. Der Lesemodus macht den
   Textbereich schmaler — die Abstaende passen dann nicht mehr und die Seite
   laeuft seitlich ueber, der rechte Rand wird abgeschnitten. */
body.libration-reading-mode .alignfull,
body.libration-reading-mode .alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: auto !important;
}

body.libration-reading-mode aside,
body.libration-reading-mode .sidebar,
body.libration-reading-mode #sidebar,
body.libration-reading-mode .widget-area,
body.libration-reading-mode .related-posts,
body.libration-reading-mode .comments-area,
body.libration-reading-mode .advertisement,
body.libration-reading-mode [class*="banner"],
body.libration-reading-mode [class*="popup"] {
	display: none !important;
}

/* =========================================
   Feature-Effekte: Bildschirmleser
   - body.libration-sr-mode: Hover-Hervorhebung lesbarer Elemente
   - .libration-sr-active: Aktuell vorgelesenes Element
   ========================================= */

/* Hover-Hervorhebung lesbarer Blöcke (nur im SR-Modus) */
body.libration-sr-mode :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, td, dt, dd, figcaption, summary):not(#libration-toolbar *):not(#wpadminbar *):hover {
	outline: 2px dashed var(--libration-accent, #4a4a4a) !important;
	outline-offset: 4px !important;
	cursor: pointer !important;
	background-color: rgba(108, 92, 231, 0.06) !important;
	transition: outline-color 0.1s ease, background-color 0.1s ease;
}

/* Aktuell vorgelesenes Element (bleibt sichtbar bis nächster Klick) */
body.libration-sr-mode .libration-sr-active:not(#libration-toolbar *) {
	outline: 3px solid var(--libration-accent, #4a4a4a) !important;
	outline-offset: 4px !important;
	background-color: rgba(255, 235, 59, 0.25) !important;
}

.libration-sr-announcer {
	position: fixed;
	left: -9999px;
	width: 1px;
	height: 1px;
}

/* =========================================
   Focus Improvements
   ========================================= */
/* Hier stand einmal ein globales *:focus { outline: none }. Es hat den
   Fokusrahmen auf der ganzen Website entfernt — auch bei programmatischem
   Fokus, auch dort, wo das Theme einen guten eigenen Rahmen hatte. Die Regeln
   darunter erledigen das Nötige gezielt: bei Mausbedienung wird der Rahmen
   unterdrückt, bei Tastaturbedienung verstärkt. Ein Plugin für
   Barrierefreiheit darf den Fokus nirgends pauschal ausschalten. */

body.libration-keyboard-navigation *:focus:not(.libration-no-focus-outline) {
	outline: 3px solid var(--libration-accent, #4a4a4a) !important;
	outline-offset: 2px !important;
}

body.libration-mouse-navigation *:focus,
.libration-no-focus-outline:focus {
	outline: none !important;
	box-shadow: none !important;
}

*:focus-visible {
	outline: 3px solid var(--libration-accent, #4a4a4a) !important;
	outline-offset: 2px !important;
}

/* =========================================
   Content Warnings für Editor
   ========================================= */
.libration-content-warnings {
	margin: 20px 0;
	padding: 15px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
}

.libration-content-warnings strong {
	color: #856404;
	display: block;
	margin-bottom: 10px;
}

.libration-content-warnings ul {
	margin: 10px 0 0 20px;
	color: #856404;
}

/* Image Alt Text Warning */
img[data-libration-warning] {
	border: 3px solid #ff0000 !important;
	animation: libration-pulse 2s infinite;
}

@keyframes libration-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

img[data-libration-warning]:hover::after {
	content: attr(data-libration-warning);
	position: absolute;
	background: #ff0000;
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 10000;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 5px;
}

/* =========================================
   Tab-Reihenfolge Visualisierer
   ========================================= */
.libration-tab-order-indicator {
	position: absolute;
	background: #ff0000;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 5px;
	border-radius: 10px;
	z-index: 99999;
	pointer-events: none;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	min-width: 20px;
	text-align: center;
	line-height: 1;
	font-family: monospace;
}

.libration-tab-order-indicator.current {
	background: #00a32a;
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

.libration-tab-visualizer-toggle {
	position: fixed;
	bottom: 100px;
	right: 20px;
	z-index: 99998;
	background: var(--libration-accent, #4a4a4a);
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-size: 12px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   Animation für Panel
   ========================================= */
@keyframes libration-slide-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.libration-toolbar-content:not([hidden]) {
	animation: libration-slide-in 0.2s ease-out;
}

/* =========================================
   Responsive Design
   ========================================= */
@media (max-width: 480px) {
	.libration-toolbar {
		right: 12px;
		bottom: 20px;
	}

	.libration-toolbar-content {
		width: calc(100vw - 24px);
		right: 0;
		padding: 18px;
	}

	.libration-panel-title {
		font-size: 18px;
	}

	.libration-slider-row {
		grid-template-columns: 90px 1fr auto 28px 28px;
		gap: 6px;
		padding: 6px 10px;
	}

	.libration-slider-label {
		font-size: 12px;
	}
}

/* =========================================
   Print Styles
   ========================================= */
@media print {
	.libration-toolbar,
	.libration-skip-links,
	.libration-content-warnings,
	.libration-tab-visualizer-toggle,
	.libration-tab-order-indicator {
		display: none !important;
	}
}

/* =========================================
   Widget-Isolation (MUSS am Ende stehen)
   Schützt das Toolbar-Widget gegen alle eigenen
   Effekt-Klassen (Filter, Kontrast, Schriftgröße,
   Zeilenhöhe, Buchstabenabstand, Hervorhebungen)
   ========================================= */

/* 1. Filter (Monochrom, Sättigung, Invert) abschalten */
#libration-toolbar,
#libration-toolbar * {
	filter: none !important;
}

/* 2. Schriftgröße, Zeilenhöhe & Buchstabenabstand
      auf die ursprünglichen Widget-Werte zurücksetzen */
#libration-toolbar * {
	line-height: normal !important;
	letter-spacing: normal !important;
	font-size: revert !important;
}

/* Originale Widget-Schriftgrößen wiederherstellen */
#libration-toolbar .libration-panel-title       { font-size: 22px !important; line-height: 1.2 !important; }
#libration-toolbar .libration-feature-btn       { font-size: 13px !important; line-height: 1.2 !important; }
#libration-toolbar .libration-slider-label      { font-size: 13px !important; }
#libration-toolbar .libration-slider-value      { font-size: 12px !important; }
#libration-toolbar .libration-slider-btn        { font-size: 16px !important; line-height: 1 !important; }
@media (max-width: 480px) {
	#libration-toolbar .libration-panel-title   { font-size: 18px !important; }
	#libration-toolbar .libration-slider-label  { font-size: 12px !important; }
}

/* 3. Kontrast-Modi: Widget-Farben immer durchsetzen */
#libration-toolbar .libration-toolbar-content {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
}
#libration-toolbar .libration-panel-title,
#libration-toolbar .libration-slider-label,
#libration-toolbar .libration-feature-label {
	color: #1a1a1a !important;
}
#libration-toolbar .libration-slider-value {
	color: #666 !important;
}
#libration-toolbar .libration-toggle,
#libration-toolbar .libration-close {
	background-color: var(--libration-accent, #4a4a4a) !important;
	color: #ffffff !important;
	border: none !important;
}
#libration-toolbar .libration-feature-btn {
	background-color: #f5f6f8 !important;
	color: #1a1a1a !important;
	border-color: transparent !important;
}
#libration-toolbar .libration-feature-btn[aria-pressed="true"] {
	background-color: var(--libration-accent, #4a4a4a) !important;
	color: #ffffff !important;
	border-color: var(--libration-accent, #4a4a4a) !important;
}

/* Label + Icon im aktiven Button weiß färben (nur color, nicht fill!
   Das fill würde Outline-Icons mit fill="none" zu Volltflächen machen) */
#libration-toolbar .libration-feature-btn[aria-pressed="true"] .libration-feature-label,
#libration-toolbar .libration-feature-btn[aria-pressed="true"] .libration-feature-icon,
#libration-toolbar .libration-feature-btn[aria-pressed="true"] svg {
	color: #ffffff !important;
}
#libration-toolbar .libration-slider-row {
	background-color: #f5f6f8 !important;
}
#libration-toolbar .libration-slider-btn {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border-color: #d0d0d6 !important;
}
#libration-toolbar .libration-panel-header-actions .libration-reset-all {
	background: transparent !important;
	color: #4a4a4a !important;
}

/* 4. Hervorheben-Modi dürfen Widget-Buttons nicht betreffen */
#libration-toolbar a,
#libration-toolbar button {
	box-shadow: none !important;
	padding: revert !important;
	text-decoration: none !important;
	outline-style: none;
}
#libration-toolbar h2 {
	outline: none !important;
	background-color: transparent !important;
	padding: 0 !important;
}

/* 5. Reading-Mode: Widget sichtbar lassen, eigene
      Box-Optik nicht überschreiben */
body.libration-reading-mode #libration-toolbar {
	display: block !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 6. Fokus-State im Widget: Hintergrund und Textfarbe explizit
      durchsetzen. Verstärkt mit html+body+id Selektoren, damit
      kein Theme- oder Browser-Default-Stil darüberhinweg gehen kann.
      Garantiert: Inaktive Buttons = hellgrau+dunkel, aktive = grau+weiß.

      WICHTIG: Wir setzen color UND fill UND stroke, weil manche
      SVG-Icons explizit stroke="currentColor" nutzen, andere fill="currentColor". */

/* === Inaktiver fokussierter Button === */
html body #libration-toolbar .libration-feature-btn:focus,
html body #libration-toolbar .libration-feature-btn:focus-visible,
html body #libration-toolbar .libration-feature-btn:focus:hover,
html body #libration-toolbar .libration-feature-btn:focus-visible:hover {
	background-color: #f5f6f8 !important;
	color: #1a1a1a !important;
	box-shadow: none !important;
}

html body #libration-toolbar .libration-feature-btn:focus .libration-feature-label,
html body #libration-toolbar .libration-feature-btn:focus .libration-feature-icon,
html body #libration-toolbar .libration-feature-btn:focus svg,
html body #libration-toolbar .libration-feature-btn:focus-visible .libration-feature-label,
html body #libration-toolbar .libration-feature-btn:focus-visible .libration-feature-icon,
html body #libration-toolbar .libration-feature-btn:focus-visible svg {
	color: #1a1a1a !important;
}

/* === Aktiver fokussierter Button (überschreibt obige Regeln, weil spezifischer durch [aria-pressed]) === */
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus-visible,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus:hover,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus-visible:hover {
	background-color: var(--libration-accent, #4a4a4a) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus .libration-feature-label,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus .libration-feature-icon,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus svg,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus-visible .libration-feature-label,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus-visible .libration-feature-icon,
html body #libration-toolbar .libration-feature-btn[aria-pressed="true"]:focus-visible svg {
	color: #ffffff !important;
}

/* Wenn ein Button gerade nach dem Klick noch Fokus hat und gleichzeitig
   gehovered wird, darf der :hover-Background nicht durchschlagen */
html body #libration-toolbar .libration-feature-btn:not([aria-pressed="true"]):hover {
	background-color: #ebecf0 !important;
	color: #1a1a1a !important;
}

/* =========================================================================
   INLINE-BLOCK (Gutenberg) – "Barrierefreiheit-Einstellungen"
   Zeigt dasselbe Bedienfeld wie das schwebende Widget, aber statisch im
   Inhalt (z. B. in einem Popup). Innen werden dieselben Klassen genutzt
   (.libration-feature-grid, .libration-feature-btn, .libration-slider-row …), die bereits
   global gestylt sind. Hier nur die Container-Optik + Filter-Isolation.
   ========================================================================= */
.libration-inline-widget {
	display: block;
	width: 100%;
	--libration-accent: var(--libration-accent, #4a4a4a);
}

.libration-inline-panel {
	box-sizing: border-box;
	width: 100%;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
}

/* Letztes Element ohne Abstand nach unten */
.libration-inline-panel .libration-sliders,
.libration-inline-panel .libration-feature-grid:last-child {
	margin-bottom: 0;
}

/* Wenn der Block volle Breite (full/wide) hat, Panel nicht unnötig dehnen */
.libration-inline-widget.alignfull .libration-inline-panel,
.libration-inline-widget.alignwide .libration-inline-panel {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Filter-Isolation: Das Inline-Panel selbst soll bei aktiven Anzeige-Modi
   (Invertieren/Monochrom/Kontrast/Sättigung) lesbar bleiben – analog zum
   schwebenden Widget (#libration-toolbar).
   ------------------------------------------------------------------------- */

/* Eigene Filter der Panel-Elemente neutralisieren */
.libration-inline-widget .libration-inline-panel,
.libration-inline-widget .libration-inline-panel * {
	filter: none !important;
}

/* "Farben umkehren" auf einem Vorfahren doppelt invertieren → wieder normal
   (gleicher Trick wie bei Bildern). */
body.libration-invert-colors .libration-inline-widget .libration-inline-panel {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* Kontrast-Modi dürfen die Panel-Farben nicht überschreiben */
body.libration-dark-contrast .libration-inline-panel,
body.libration-light-contrast .libration-inline-panel {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
}
body.libration-dark-contrast .libration-inline-panel .libration-panel-title,
body.libration-dark-contrast .libration-inline-panel .libration-slider-label,
body.libration-dark-contrast .libration-inline-panel .libration-feature-label,
body.libration-light-contrast .libration-inline-panel .libration-panel-title,
body.libration-light-contrast .libration-inline-panel .libration-slider-label,
body.libration-light-contrast .libration-inline-panel .libration-feature-label {
	color: #1a1a1a !important;
}
body.libration-dark-contrast .libration-inline-panel .libration-feature-btn,
body.libration-light-contrast .libration-inline-panel .libration-feature-btn {
	background-color: #f5f6f8 !important;
	color: #1a1a1a !important;
}
body.libration-dark-contrast .libration-inline-panel .libration-feature-btn[aria-pressed="true"],
body.libration-light-contrast .libration-inline-panel .libration-feature-btn[aria-pressed="true"] {
	background-color: var(--libration-accent, #4a4a4a) !important;
	color: #ffffff !important;
}

/* "Links/Überschriften hervorheben" darf die Panel-Bedienelemente nicht treffen */
.libration-inline-panel a,
.libration-inline-panel button {
	box-shadow: none !important;
	text-decoration: none !important;
}
.libration-inline-panel :is(h1, h2, h3, h4, h5, h6) {
	outline: none !important;
	background-color: transparent !important;
}

/* =========================================================
   LIBRATION ACCESSIBILITY WIDGET 2.0 – Look & Positionierung
   (Overrides; gesteuert über CSS-Variablen aus den Einstellungen:
    --libration-accent, --libration-size, --libration-offset, --libration-radius,
    --libration-panel-bg, --libration-panel-text)
   ========================================================= */

/* Positionen (vier Ecken) */
.libration-toolbar{position:fixed;z-index:99998;bottom:var(--libration-offset-y,var(--libration-offset,24px));right:var(--libration-offset-x,var(--libration-offset,24px));top:auto;left:auto;}
.libration-toolbar.libration-pos-bl{right:auto;left:var(--libration-offset-x,var(--libration-offset,24px));}
.libration-toolbar.libration-pos-tr{bottom:auto;top:var(--libration-offset-y,var(--libration-offset,24px));}
.libration-toolbar.libration-pos-tl{bottom:auto;top:var(--libration-offset-y,var(--libration-offset,24px));right:auto;left:var(--libration-offset-x,var(--libration-offset,24px));}

/* Schwebender Button */
.libration-toolbar .libration-toggle{width:var(--libration-size,56px);height:var(--libration-size,56px);border-radius:50%;border:0;cursor:pointer;
	background:var(--libration-accent,#4a4a4a);color:#fff;display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .15s;padding:0;}
.libration-toolbar .libration-toggle:hover{transform:scale(1.05);}
.libration-toolbar .libration-toggle svg,.libration-toolbar .libration-toggle img{width:52%;height:52%;object-fit:contain;}

/* Panel */
.libration-toolbar .libration-toolbar-content{position:absolute;bottom:calc(var(--libration-size,56px) + 14px);right:0;left:auto;top:auto;
	width:368px;max-width:calc(100vw - 2 * var(--libration-offset,24px));
	/* So hoch wie noetig, nicht wie erlaubt: Das Panel bekommt den ganzen
	   Platz zwischen Schaltflaeche und gegenueberliegendem Fensterrand.
	   Gescrollt wird nur, wenn das Fenster wirklich zu niedrig ist. */
	max-height:calc(100vh - var(--libration-offset-y,var(--libration-offset,24px)) - var(--libration-size,56px) - 14px - 16px);
	overflow-y:auto;scrollbar-gutter:stable;
	background:var(--libration-panel-bg,#fff);color:var(--libration-panel-text,#1d1d1f);
	border-radius:var(--libration-radius,24px);border:0;box-shadow:0 24px 70px -14px rgba(0,0,0,.4);padding:22px;}
.libration-toolbar.libration-pos-bl .libration-toolbar-content{right:auto;left:0;}
.libration-toolbar.libration-pos-tr .libration-toolbar-content{bottom:auto;top:calc(var(--libration-size,56px) + 14px);}
.libration-toolbar.libration-pos-tl .libration-toolbar-content{bottom:auto;top:calc(var(--libration-size,56px) + 14px);right:auto;left:0;}

/* Kopfzeile */
.libration-toolbar-content .libration-panel-header,.libration-inline-widget .libration-panel-header{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0;border:0;background:transparent;}
.libration-toolbar-content .libration-panel-title,.libration-inline-widget .libration-panel-title{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:0;flex:1;color:var(--libration-panel-text,#1d1d1f);}
.libration-toolbar-content .libration-reset-all,.libration-toolbar-content .libration-close,
.libration-inline-widget .libration-reset-all,.libration-inline-widget .libration-close{width:38px;height:38px;border-radius:50%;
	border:1.5px solid color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 25%,transparent);
	background:transparent;color:var(--libration-panel-text,#1d1d1f);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.libration-toolbar-content .libration-close{background:var(--libration-panel-text,#1d1d1f);color:var(--libration-panel-bg,#fff);border-color:var(--libration-panel-text,#1d1d1f);}

/* Funktions-Buttons: 2 Spalten, Pill-Optik, gefüllte Icons */
.libration-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;}
.libration-feature-btn{border:0;border-radius:14px;cursor:pointer;text-align:left;
	background:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 5%,var(--libration-panel-bg,#fff));
	color:var(--libration-panel-text,#1d1d1f);padding:14px 12px;display:flex;align-items:center;gap:10px;transition:background .12s;}
.libration-feature-btn:hover{background:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 10%,var(--libration-panel-bg,#fff));}
.libration-feature-btn[aria-pressed="true"]{background:var(--libration-accent,#4a4a4a);color:#fff;}
.libration-feature-icon{display:flex;}
/* Die Symbole sind Strichzeichnungen (Tabler, outline). Ein erzwungenes
   fill:currentColor wuerde sie zu schwarzen Flaechen machen — die Farbe
   gehoert auf die Linie, nicht auf die Flaeche. Einzelne Pfade tragen
   ihr eigenes fill (gefuellte Punkte); die bleiben davon unberuehrt. */
.libration-feature-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;}
.libration-feature-icon svg [fill="currentColor"]{fill:currentColor;}
.libration-feature-label{font-size:.82rem;font-weight:500;line-height:1.2;}

/* Slider: volle Breite im selben Grid-Rhythmus, Daumen ohne Kontur */
.libration-sliders{display:flex;flex-direction:column;gap:10px;margin:10px 0 0;}
.libration-slider-row{display:grid;grid-template-columns:minmax(0,1fr) 68px 40px 28px 28px;align-items:center;gap:8px;
	border-radius:14px;padding:11px 14px;margin:0;
	background:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 5%,var(--libration-panel-bg,#fff));}
.libration-slider-label{font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--libration-panel-text,#1d1d1f);}
.libration-slider-row .libration-slider{width:100%;height:5px;appearance:none;-webkit-appearance:none;border-radius:999px;
	background:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 18%,transparent);}
.libration-slider-row .libration-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
	background:var(--libration-accent,#4a4a4a);border:0;box-shadow:none;cursor:pointer;}
.libration-slider-row .libration-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--libration-accent,#4a4a4a);border:0;cursor:pointer;}
.libration-slider-value{font-size:.78rem;color:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 60%,transparent);text-align:right;font-variant-numeric:tabular-nums;}
.libration-slider-btn{width:28px;height:28px;border-radius:50%;
	border:1.5px solid color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 25%,transparent);
	background:transparent;color:var(--libration-panel-text,#1d1d1f);cursor:pointer;font-size:1rem;line-height:1;padding:0;}
.libration-slider-btn:hover{background:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 8%,transparent);}

/* Branding-Fuß */
.libration-panel-foot{display:flex;justify-content:flex-end;margin-top:14px;}
/* px + hohe Spezifität + !important: Themes stylen a/b im Panel sonst um (Praxis-Theme!) */
html body #libration-toolbar .libration-brand, html body .libration-inline-widget .libration-brand{
	font-size:11px !important;font-weight:400 !important;line-height:1.4 !important;
	letter-spacing:.03em !important;font-family:inherit !important;}
html body #libration-toolbar .libration-brand b, html body .libration-inline-widget .libration-brand b{
	font-size:11px !important;font-weight:600 !important;}
.libration-brand{font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.03em;text-decoration:none;
	color:color-mix(in srgb,var(--libration-panel-text,#1d1d1f) 45%,transparent);}
.libration-brand b{color:var(--libration-accent,#4a4a4a);font-weight:600;}
.libration-brand:hover b{text-decoration:underline;}

/* ==== KI-Vorlesen (im Bildschirmleser-Modus) ==== */
.libration-tts-playing {
	animation: librationTtsGlow 10s ease-out forwards;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
@keyframes librationTtsGlow {
	0%   { background-color: rgba(255, 224, 70, .55); }
	40%  { background-color: rgba(255, 224, 70, .35); }
	100% { background-color: rgba(255, 224, 70, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.libration-tts-playing { animation: none; background-color: rgba(255, 224, 70, .35); }
}
.libration-tts-w { border-radius: 3px; }
.libration-tts-word-now { background: var(--libration-accent, #0891b2); color: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Ladezustand: Spinner in der Ecke + Fortschrittsbalken unter dem Abschnitt,
   damit die Wartezeit bis zum ersten MP3 (KI-Erzeugung) sichtbar ist. */
.libration-tts-loading { position: relative; opacity: .8; }
.libration-tts-loading::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 4px;
	width: 15px;
	height: 15px;
	border: 3px solid rgba(8, 145, 178, .25);
	border-top-color: var(--libration-accent, #0891b2);
	border-radius: 50%;
	animation: librationTtsSpin .8s linear infinite;
}
.libration-tts-loading::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(8, 145, 178, .15) 0 30%, var(--libration-accent, #0891b2) 50%, rgba(8, 145, 178, .15) 70% 100%);
	background-size: 200% 100%;
	animation: librationTtsBar 1.1s linear infinite;
}
@keyframes librationTtsSpin { to { transform: rotate(360deg); } }
@keyframes librationTtsBar { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
	.libration-tts-loading::before { animation: none; }
	.libration-tts-loading::after { animation: none; background: rgba(8, 145, 178, .35); }
}

/* ==== Leichte Sprache (Overlay über dem Original-Inhalt) ==== */
.libration-easy-on > :not(.libration-easy-view) { display: none !important; }
.libration-easy-view { padding: 4px 0; }
.libration-easy-loading { opacity: .6; pointer-events: none; }
.libration-easy-note {
	margin: 0 0 1.2em;
	padding: 10px 14px;
	border-left: 4px solid var(--libration-accent, #0891b2);
	background: rgba(8, 145, 178, .08);
	border-radius: 6px;
	font-size: .95em;
}
.libration-easy-content { line-height: 1.7; }
.libration-easy-content p { max-width: 42em; margin: 0 0 .9em; }
.libration-easy-content ul { max-width: 42em; margin: 0 0 .9em 1.2em; }

/* =========================================================
   Transkript unter Video und Audio (Libration Media)
   ========================================================= */
.libration-transcript{margin:10px 0 22px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(0,0,0,.02);}
.libration-transcript > summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none;}
.libration-transcript > summary::-webkit-details-marker{display:none;}
.libration-transcript > summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform .15s;}
.libration-transcript[open] > summary::before{transform:rotate(90deg);}
.libration-transcript > summary:focus-visible{outline:3px solid currentColor;outline-offset:2px;}
.libration-transcript-body{padding:0 14px 14px;line-height:1.7;max-height:22em;overflow:auto;}
.libration-transcript-body p{margin:0;}
@media (prefers-reduced-motion:reduce){.libration-transcript > summary::before{transition:none;}}