/*
 * Farbschemata
 * Die Kopffarben tragen weissen Text. Damit 1.4.3 (AA, 4,5:1) erfuellt ist,
 * wurden Gruen, Orange und Tuerkis abgedunkelt:
 *   Gruen   #28a745 (3,13:1) -> #208838 (4,53:1)
 *   Orange  #fd7e14 (2,57:1) -> #b85b0e (4,62:1)
 *   Tuerkis #20c997 (2,13:1) -> #158665 (4,54:1)
 * Blau, Rot, Lila und Dunkel erfuellten den Wert bereits.
 */
/* Accessibility Toolbar Styles v2.1.2 - Updated Bottom Positions */

/* ================================================================== */
/* CSS ISOLATION - Prevents external styles from affecting widget */
/* Uses !important to override theme styles without breaking own styles */
/* ================================================================== */

/* Removed aggressive "all: revert" and use targeted isolation instead */
.accessibility-toolbar {
  /* Base isolation - only reset inherited properties */
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-align: left !important;
  color: #333333 !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Inherit font-family for all children */
.accessibility-toolbar *,
.accessibility-toolbar *::before,
.accessibility-toolbar *::after {
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* Reset headings */
.accessibility-toolbar h1,
.accessibility-toolbar h2,
.accessibility-toolbar h3,
.accessibility-toolbar h4,
.accessibility-toolbar h5,
.accessibility-toolbar h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: none !important;
  background: none !important;
}

/* Reset paragraph and text elements */
.accessibility-toolbar p,
.accessibility-toolbar span,
.accessibility-toolbar label {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* Reset links */
.accessibility-toolbar a {
  font-family: Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
  text-shadow: none !important;
  background: none !important;
}

/* Reset buttons */
.accessibility-toolbar button {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* Reset select */
.accessibility-toolbar select {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Reset lists */
.accessibility-toolbar ul,
.accessibility-toolbar ol,
.accessibility-toolbar li {
  list-style: none !important;
  list-style-type: none !important;
}

/* ================================================================== */
/* END CSS ISOLATION */
/* ================================================================== */

.accessibility-toolbar {
  position: fixed !important;
  z-index: 2147483647 !important;
  top: 50% !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  color: #333333 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  margin-top: -30px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.accessibility-toolbar,
.accessibility-toolbar *,
.accessibility-toolbar *::before,
.accessibility-toolbar *::after {
  box-sizing: border-box !important;
}

.accessibility-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  background-color: #0066cc !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s !important;
  animation: accessibility-pulse 2s infinite !important;
  padding: 10px !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2147483647 !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  /* Enhanced mobile touch support */
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.accessibility-toggle .accessibility-icon {
  display: block !important;
  line-height: 1 !important;
  pointer-events: none !important;
  font-size: 24px !important;
  margin: 0 !important;
}

.accessibility-toggle .accessibility-icon-svg {
  display: block !important;
  pointer-events: none !important;
  object-fit: contain !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  filter: brightness(0) invert(1) !important; /* Macht SVG weiß für bessere Sichtbarkeit */
  transition: all 0.3s ease !important;
}

/* Dynamische SVG-Größenanpassung basierend auf Icon-Größe-Konfiguration */
.accessibility-toggle[data-icon-size="16"] .accessibility-icon-svg {
  width: 16px !important;
  height: 16px !important;
}

.accessibility-toggle[data-icon-size="18"] .accessibility-icon-svg {
  width: 18px !important;
  height: 18px !important;
}

.accessibility-toggle[data-icon-size="20"] .accessibility-icon-svg {
  width: 20px !important;
  height: 20px !important;
}

.accessibility-toggle[data-icon-size="22"] .accessibility-icon-svg {
  width: 22px !important;
  height: 22px !important;
}

.accessibility-toggle[data-icon-size="24"] .accessibility-icon-svg {
  width: 24px !important;
  height: 24px !important;
}

.accessibility-toggle[data-icon-size="26"] .accessibility-icon-svg {
  width: 26px !important;
  height: 26px !important;
}

.accessibility-toggle[data-icon-size="28"] .accessibility-icon-svg {
  width: 28px !important;
  height: 28px !important;
}

.accessibility-toggle[data-icon-size="30"] .accessibility-icon-svg {
  width: 30px !important;
  height: 30px !important;
}

.accessibility-toggle[data-icon-size="32"] .accessibility-icon-svg {
  width: 32px !important;
  height: 32px !important;
}

.accessibility-toggle[data-icon-size="34"] .accessibility-icon-svg {
  width: 34px !important;
  height: 34px !important;
}

.accessibility-toggle[data-icon-size="36"] .accessibility-icon-svg {
  width: 36px !important;
  height: 36px !important;
}

.accessibility-toggle[data-icon-size="38"] .accessibility-icon-svg {
  width: 38px !important;
  height: 38px !important;
}

.accessibility-toggle[data-icon-size="40"] .accessibility-icon-svg {
  width: 40px !important;
  height: 40px !important;
}

.accessibility-toggle[data-icon-size="42"] .accessibility-icon-svg {
  width: 42px !important;
  height: 42px !important;
}

.accessibility-toggle[data-icon-size="44"] .accessibility-icon-svg {
  width: 44px !important;
  height: 44px !important;
}

.accessibility-toggle[data-icon-size="46"] .accessibility-icon-svg {
  width: 46px !important;
  height: 46px !important;
}

.accessibility-toggle[data-icon-size="48"] .accessibility-icon-svg {
  width: 48px !important;
  height: 48px !important;
}

/* Color schemes */
/* Applying toolbar colors to toggle button, category headers, and primary TTS button */
.accessibility-toolbar.accessibility-color-blue .accessibility-toggle {
  background-color: #0066cc !important;
}

.accessibility-toolbar.accessibility-color-blue .accessibility-tools-header {
  background-color: #0066cc !important;
}

.accessibility-toolbar.accessibility-color-blue .accessibility-section-header {
  background-color: #0066cc !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-blue .accessibility-button-primary {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;
}

.accessibility-toolbar.accessibility-color-green .accessibility-toggle {
  background-color: #208838 !important;
}

.accessibility-toolbar.accessibility-color-green .accessibility-tools-header {
  background-color: #208838 !important;
}

.accessibility-toolbar.accessibility-color-green .accessibility-section-header {
  background-color: #208838 !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-green .accessibility-button-primary {
  background: linear-gradient(135deg, #208838 0%, #1e7e34 100%) !important;
}

.accessibility-toolbar.accessibility-color-red .accessibility-toggle {
  background-color: #dc3545 !important;
}

.accessibility-toolbar.accessibility-color-red .accessibility-tools-header {
  background-color: #dc3545 !important;
}

.accessibility-toolbar.accessibility-color-red .accessibility-section-header {
  background-color: #dc3545 !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-red .accessibility-button-primary {
  background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%) !important;
}

.accessibility-toolbar.accessibility-color-purple .accessibility-toggle {
  background-color: #6f42c1 !important;
}

.accessibility-toolbar.accessibility-color-purple .accessibility-tools-header {
  background-color: #6f42c1 !important;
}

.accessibility-toolbar.accessibility-color-purple .accessibility-section-header {
  background-color: #6f42c1 !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-purple .accessibility-button-primary {
  background: linear-gradient(135deg, #6f42c1 0%, #5a329b 100%) !important;
}

.accessibility-toolbar.accessibility-color-orange .accessibility-toggle {
  background-color: #b85b0e !important;
}

.accessibility-toolbar.accessibility-color-orange .accessibility-tools-header {
  background-color: #b85b0e !important;
}

.accessibility-toolbar.accessibility-color-orange .accessibility-section-header {
  background-color: #b85b0e !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-orange .accessibility-button-primary {
  background: linear-gradient(135deg, #b85b0e 0%, #e8590c 100%) !important;
}

.accessibility-toolbar.accessibility-color-teal .accessibility-toggle {
  background-color: #158665 !important;
}

.accessibility-toolbar.accessibility-color-teal .accessibility-tools-header {
  background-color: #158665 !important;
}

.accessibility-toolbar.accessibility-color-teal .accessibility-section-header {
  background-color: #158665 !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-teal .accessibility-button-primary {
  background: linear-gradient(135deg, #158665 0%, #1aa179 100%) !important;
}

.accessibility-toolbar.accessibility-color-dark .accessibility-toggle {
  background-color: #343a40 !important;
}

.accessibility-toolbar.accessibility-color-dark .accessibility-tools-header {
  background-color: #343a40 !important;
}

.accessibility-toolbar.accessibility-color-dark .accessibility-section-header {
  background-color: #343a40 !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-dark .accessibility-button-primary {
  background: linear-gradient(135deg, #343a40 0%, #23272b 100%) !important;
}

/* Custom color: uses CSS custom property set via inline style in PHP */
.accessibility-toolbar.accessibility-color-custom .accessibility-toggle {
  background-color: var(--custom-toolbar-color, #007bff) !important;
}

.accessibility-toolbar.accessibility-color-custom .accessibility-tools-header {
  background-color: var(--custom-toolbar-color, #007bff) !important;
}

.accessibility-toolbar.accessibility-color-custom .accessibility-section-header {
  background-color: var(--custom-toolbar-color, #007bff) !important;
  color: white !important;
}

.accessibility-toolbar.accessibility-color-custom .accessibility-button-primary {
  background: var(--custom-toolbar-color, #007bff) !important;
}

.accessibility-toggle .accessibility-icon-img {
  display: block !important;
  pointer-events: none !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}

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

.accessibility-toggle:hover,
.accessibility-toggle:focus {
  background-color: #0052a3 !important;
  outline: 2px solid #0052a3 !important;
  transform: scale(1.05) translateX(-5px) !important;
}

/* PANEL STYLING */
/* Optimized for WCAG 3.3.2 - improved contrast and compact sizing */
.accessibility-tools {
  position: absolute !important;
  top: 50% !important;
  right: -320px !important;
  transform: translateY(-50%) !important;
  width: 300px !important;
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  z-index: 2147483647 !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  transition: right 0.3s ease-in-out !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  /* Reduced base font-size for compactness */
  font-size: 13px !important;
  line-height: 1.4 !important;
  /* Improved contrast - darker text color (WCAG AA: 7:1 ratio) */
  color: #1a1a1a !important;
  text-align: left !important;
}

.accessibility-toolbar.panel-open .accessibility-tools {
  right: 70px !important;
}

.accessibility-tools-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 15px !important;
  background-color: #0066cc !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  border: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.accessibility-tools-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
}

.accessibility-close {
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 5px !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  text-decoration: none !important;
  /* Enhanced mobile touch support */
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  min-height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accessibility-tools-content {
  padding: 15px !important;
  overflow-y: auto !important;
  flex-grow: 1 !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  border: none !important;
  text-align: left !important;
}

/* New simplified section structure with toggle between collapsible and simple modes */

/* Base section styling */
.accessibility-section {
  margin-bottom: 12px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  padding: 0 !important;
}

/* Section header wrapper - contains the collapsible button */
.accessibility-section-header-wrapper {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Simple header - the h4 element for non-collapsible mode */
/* Improved simple header contrast and compactness */
.accessibility-simple-header {
  display: none !important;
  /* Smaller font for compactness */
  font-size: 11px !important;
  font-weight: 600 !important;
  /* Darker color for better contrast (WCAG AA compliant) */
  color: #1a1a1a !important;
  /* Reduced padding for compactness */
  padding: 6px 12px !important;
  margin: 0 !important;
  background-color: #f0f0f0 !important;
  border-bottom: 1px solid #d0d0d0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
}

/* Section content - always visible in simple mode */
/* Reduced section content padding for compactness */
.accessibility-section-content {
  padding: 10px 12px !important;
  background: white !important;
}

/* When panel categories are DISABLED (simple mode) */
body[data-panel-categories="false"] .accessibility-section-header-wrapper {
  display: none !important;
}

body[data-panel-categories="false"] .accessibility-simple-header {
  display: block !important;
}

body[data-panel-categories="false"] .accessibility-section-content {
  display: block !important;
}

body[data-panel-categories="false"] .accessibility-section {
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

body[data-panel-categories="false"] .accessibility-section:last-of-type {
  border-bottom: none !important;
}

/* When panel categories are ENABLED (collapsible mode) */
body[data-panel-categories="true"] .accessibility-section-header-wrapper {
  display: block !important;
}

body[data-panel-categories="true"] .accessibility-simple-header {
  display: none !important;
}

body[data-panel-categories="true"]
  .accessibility-section-header[aria-expanded="false"]
  + .accessibility-section-content,
body[data-panel-categories="true"]
  .accessibility-section-header-wrapper:has(.accessibility-section-header[aria-expanded="false"])
  ~ .accessibility-section-content {
  display: none !important;
}

/* Default state (when data attribute is not set) - show collapsible mode */
body:not([data-panel-categories]) .accessibility-section-header-wrapper {
  display: block !important;
}

body:not([data-panel-categories]) .accessibility-simple-header {
  display: none !important;
}

/* Reset section special styling */
.accessibility-reset-section {
  border: none !important;
  background: transparent !important;
  margin-top: 15px !important;
}

.accessibility-reset-section .accessibility-section-header-wrapper,
.accessibility-reset-section .accessibility-simple-header {
  display: none !important;
}

.accessibility-reset-section .accessibility-section-content {
  padding: 0 !important;
  background: transparent !important;
}

/* Remove old duplicate CSS rules */
.accessibility-section-collapsible,
.accessibility-section-simple,
.accessibility-section-language,
.accessibility-section-language-collapsible,
.accessibility-section-language-simple {
  /* These classes are no longer used */
}

.accessibility-section {
  margin-bottom: 25px !important;
  padding: 0 !important;
  background: transparent !important;
}

.accessibility-section:last-child {
  margin-bottom: 0 !important;
}

.accessibility-section h3 {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333333 !important;
  font-family: Arial, sans-serif !important;
  background: transparent !important;
}

/* Collapsible section styles */
.accessibility-section-collapsible {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.accessibility-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  /* Reduced padding for compactness */
  padding: 8px 12px !important;
  background-color: #0066cc !important;
  color: #ffffff !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  /* Smaller font for compactness */
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  /* Reduced min-height for compactness while maintaining touch target */
  min-height: 36px !important;
}

.accessibility-section-header:hover,
.accessibility-section-header:focus {
  background-color: #0052a3 !important;
  outline: none !important;
  text-decoration: none !important;
}

.accessibility-section-header h3 {
  margin: 0 !important;
  /* Reduced font-size from 14px to 13px for more compact headers */
  font-size: 12px !important;
  font-weight: 600 !important;
  /* Changed color from #333 to white for better readability on colored backgrounds */
  color: #ffffff !important;
}

.accessibility-section-header span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

/* Collapsible section styles */
.accessibility-section-collapsible {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.accessibility-section-toggle {
  font-size: 12px !important;
  transition: transform 0.3s ease !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #ffffff !important;
  font-weight: normal !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.accessibility-section-header[aria-expanded="false"] .accessibility-section-toggle {
  transform: rotate(-90deg) !important;
}

.accessibility-section-content {
  padding: 16px !important;
  background: white !important;
}

.accessibility-section-header[aria-expanded="false"] + .accessibility-section-content {
  display: none !important;
}

.accessibility-subsection {
  margin-bottom: 16px !important;
}

.accessibility-subsection:last-child {
  margin-bottom: 0 !important;
}

.accessibility-subsection h4 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555555 !important;
  font-family: Arial, sans-serif !important;
}

.accessibility-controls {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.accessibility-button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background-color: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  color: #333333 !important;
  font-size: 13px !important;
  font-family: Arial, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  /* Enhanced mobile touch support */
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  min-height: 44px !important;
}

.accessibility-button:hover,
.accessibility-button:focus {
  background-color: #e9ecef !important;
  border-color: #0066cc !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
}

.accessibility-button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #f8f9fa !important;
}

.accessibility-button .accessibility-icon {
  margin-right: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.accessibility-select {
  width: 100% !important;
  min-width: 120px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 2px solid #dee2e6 !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  font-size: 14px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 500 !important;
  color: #333333 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Added line-height and min-height to fix text clipping */
  line-height: 1.5 !important;
  min-height: 44px !important;
  height: auto !important;
}

.accessibility-select:hover {
  border-color: #0066cc !important;
  background-color: #f8f9fa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 102, 204, 0.15) !important;
}

.accessibility-select:focus {
  outline: none !important;
  border-color: #0066cc !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
  background-color: #ffffff !important;
}

.accessibility-select:active {
  transform: translateY(0) !important;
}

.accessibility-footer {
  margin-top: 20px !important;
  padding: 15px 20px !important;
  border-top: 1px solid #dee2e6 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  background-color: #f8f9fa !important;
  border-radius: 0 0 8px 8px !important;
}

.accessibility-blog-link {
  display: inline-block !important;
  padding: 8px 12px !important;
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  color: #0066cc !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-family: Arial, sans-serif !important;
  transition: all 0.2s ease !important;
  margin-bottom: 8px !important;
}

.accessibility-blog-link:hover,
.accessibility-blog-link:focus {
  background-color: #0066cc !important;
  color: white !important;
  text-decoration: none !important;
}

.accessibility-version {
  font-size: 10px !important;
  color: #6c757d !important;
  margin-top: 8px !important;
  opacity: 0.8 !important;
  font-family: Arial, sans-serif !important;
  background: transparent !important;
}

.accessibility-version.premium {
  color: #208838 !important;
  font-weight: bold !important;
}

/* ZEILENLINEAL - WICHTIG! */
.accessibility-reading-guide {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  height: 50px !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.3) 0%,
    rgba(255, 255, 0, 0.5) 45%,
    rgba(255, 255, 0, 0.7) 50%,
    rgba(255, 255, 0, 0.5) 55%,
    rgba(255, 255, 0, 0.3) 100%
  ) !important;
  border: 2px solid #ffcc00 !important;
  border-left: none !important;
  border-right: none !important;
  z-index: 2147483646 !important;
  pointer-events: none !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important;
  transition: top 0.1s ease !important;
}

/* ACCESSIBILITY FEATURES */

/* Link highlighting */
body.accessibility-highlight-links a {
  background-color: yellow !important;
  color: black !important;
  text-decoration: underline !important;
  border: 2px solid red !important;
}

/* Reading indicator */
.accessibility-reading-indicator {
  background-color: rgba(255, 255, 0, 0.3) !important;
  outline: 2px solid #0066cc !important;
  position: relative !important;
  z-index: 1000 !important;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.5) !important;
  transition: background-color 0.3s ease !important;
}

/* Letter spacing */
body.accessibility-letter-spacing-1 {
  letter-spacing: 1px !important;
  word-spacing: 2px !important;
}

body.accessibility-letter-spacing-2 {
  letter-spacing: 2px !important;
  word-spacing: 4px !important;
}

body.accessibility-letter-spacing-3 {
  letter-spacing: 3px !important;
  word-spacing: 6px !important;
}

body.accessibility-letter-spacing-1 *,
body.accessibility-letter-spacing-2 *,
body.accessibility-letter-spacing-3 * {
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
}

/* Grayscale */
body.accessibility-grayscale #accessibility-toolbar {
  filter: none !important;
  -webkit-filter: none !important;
}

body.accessibility-grayscale > *:not(#accessibility-toolbar) {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}

/* ===================================================================
   FARBUMKEHR ("Farben invertieren")
   -------------------------------------------------------------------
   Vorher wurde hier jedem Element per "*"-Regel pauschal
   background-color:#000 und color:#fff verpasst. Das ist keine
   Farbumkehr, sondern uebermalt die Seite - Ergebnis: alles schwarz,
   Hintergrundbilder verschwanden, Farbinformation ging verloren.

   Jetzt: ein echter Inversionsfilter auf dem Wurzelelement.
   Medien werden gegengedreht, damit Fotos, Logos und Videos normal
   aussehen (zwei Inversionen heben sich auf).

   Der Filter sitzt bewusst auf <html> und nicht auf <body> oder
   dessen Kindern: ein Filter erzeugt einen neuen Bezugsrahmen fuer
   position:fixed. Auf einem Wrapper-Element angewandt reisst er
   feste Kopfzeilen aus ihrer Verankerung, auf dem Wurzelelement
   nicht.
   =================================================================== */
html.accessibility-invert-colors {
  filter: invert(100%) hue-rotate(180deg) !important;
  -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  background-color: #ffffff !important;
}

/* Medien zurueckdrehen */
html.accessibility-invert-colors img,
html.accessibility-invert-colors picture,
html.accessibility-invert-colors video,
html.accessibility-invert-colors iframe,
html.accessibility-invert-colors embed,
html.accessibility-invert-colors object,
html.accessibility-invert-colors canvas,
html.accessibility-invert-colors svg,
html.accessibility-invert-colors [data-bf-keep-colors] {
  filter: invert(100%) hue-rotate(180deg) !important;
  -webkit-filter: invert(100%) hue-rotate(180deg) !important;
}

/* Die Bedienleiste soll unveraendert aussehen: einmal gegendrehen ... */
html.accessibility-invert-colors #accessibility-toolbar,
html.accessibility-invert-colors .accessibility-toolbar {
  filter: invert(100%) hue-rotate(180deg) !important;
  -webkit-filter: invert(100%) hue-rotate(180deg) !important;
}

/* ... und darin nichts ein drittes Mal drehen */
html.accessibility-invert-colors #accessibility-toolbar img,
html.accessibility-invert-colors #accessibility-toolbar svg,
html.accessibility-invert-colors #accessibility-toolbar video,
html.accessibility-invert-colors .accessibility-toolbar img,
html.accessibility-invert-colors .accessibility-toolbar svg,
html.accessibility-invert-colors .accessibility-toolbar video {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Das Toolbar-Icon behaelt seine eigene Einfaerbung (hoehere Spezifitaet) */
html.accessibility-invert-colors .accessibility-toolbar .accessibility-icon-svg,
html.accessibility-invert-colors #accessibility-toolbar .accessibility-icon-svg {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Other features */
body.accessibility-underline-links a {
  text-decoration: underline !important;
}

body.accessibility-big-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="black" stroke-width="3"><circle cx="16" cy="16" r="14" fill="white"/></svg>')
    16 16, auto !important;
}

body.accessibility-big-cursor a,
body.accessibility-big-cursor button,
body.accessibility-big-cursor [role="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="black" stroke-width="3"><circle cx="16" cy="16" r="14" fill="white"/><path d="M 12,12 L 20,20 M 20,12 L 12,20" stroke="black" stroke-width="3"/></svg>')
    16 16, pointer !important;
}

/* ===================================================================
   Schriftgroesse
   -------------------------------------------------------------------
   Hier standen frueher Klassen der Form

     html.accessibility-font-size-110 { font-size: 110% !important; }
     html.accessibility-font-size-110 body,
     html.accessibility-font-size-110 body *:not(...) {
       font-size: inherit !important;    <-- das war der Fehler
     }

   Die zweite Regel zwang JEDES Element, die Groesse vom Elternelement
   zu erben. Damit fiel die gesamte Typografie auf einen einzigen Wert
   zusammen: eine h1 mit 32px wurde beim ersten Klick auf "A+" auf
   17,6px geschrumpft - also kleiner als vorher - und war danach vom
   Fliesstext nicht mehr zu unterscheiden.

   Die Skalierung passiert jetzt in accessibility.js: dort wird die
   urspruengliche Groesse jedes Textelements gemerkt und mit dem
   gewaehlten Faktor multipliziert. Die Groessenverhaeltnisse der Seite
   bleiben dadurch erhalten, und es funktioniert unabhaengig davon, ob
   die Seite px, rem oder em benutzt.
   =================================================================== */


/* Fixed toolbar font sizes - prevent inheritance */
#accessibility-toolbar,
#accessibility-toolbar *,
.accessibility-toolbar,
.accessibility-toolbar * {
  font-size: 14px !important;
}

#accessibility-toolbar .accessibility-tools-header h2,
.accessibility-toolbar .accessibility-tools-header h2 {
  font-size: 16px !important;
}

#accessibility-toolbar .accessibility-section h3,
.accessibility-toolbar .accessibility-section h3 {
  font-size: 14px !important;
}

#accessibility-toolbar .accessibility-button,
.accessibility-toolbar .accessibility-button {
  font-size: 13px !important;
}

#accessibility-toolbar .accessibility-select,
.accessibility-toolbar .accessibility-select {
  font-size: 13px !important;
}

#accessibility-toolbar .accessibility-blog-link,
.accessibility-toolbar .accessibility-blog-link {
  font-size: 12px !important;
}

#accessibility-toolbar .accessibility-version,
.accessibility-toolbar .accessibility-version {
  font-size: 10px !important;
}

/* Premium Section and Reading Speed */
.accessibility-premium-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: 2px solid #208838 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15) !important;
  position: relative !important;
}

.accessibility-premium-label {
  display: block !important;
  font-weight: 600 !important;
  color: #208838 !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.accessibility-reading-speed-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: white !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.accessibility-reading-speed-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #495057 !important;
  white-space: nowrap !important;
  min-width: 120px !important;
}

/* Position classes */
.accessibility-toolbar.accessibility-position-right {
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: -30px !important;
}

.accessibility-toolbar.accessibility-position-right .accessibility-toggle {
  border-radius: 16px !important;
  padding: 10px !important;
}

.accessibility-toolbar.accessibility-position-left {
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: -30px !important;
}

.accessibility-toolbar.accessibility-position-left .accessibility-toggle {
  border-radius: 16px !important;
  padding: 10px !important;
}

.accessibility-toolbar.accessibility-position-left .accessibility-tools {
  left: -320px !important;
  right: auto !important;
}

.accessibility-toolbar.accessibility-position-left.panel-open .accessibility-tools {
  left: 70px !important;
  right: auto !important;
}

.accessibility-toolbar.accessibility-position-bottom-left {
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  margin-top: 0 !important;
}

.accessibility-toolbar.accessibility-position-bottom-left .accessibility-toggle {
  border-radius: 16px !important;
  padding: 10px !important;
  width: 48px !important;
  height: 48px !important;
}

.accessibility-toolbar.accessibility-position-bottom-left .accessibility-tools {
  left: -320px !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  transform: translateY(0) !important;
}

.accessibility-toolbar.accessibility-position-bottom-left.panel-open .accessibility-tools {
  left: 70px !important;
  bottom: 0 !important;
  top: auto !important;
  transform: translateY(0) !important;
}

.accessibility-toolbar.accessibility-position-bottom-right {
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  bottom: 20px !important;
  margin-top: 0 !important;
}

.accessibility-toolbar.accessibility-position-bottom-right .accessibility-toggle {
  border-radius: 16px !important;
  padding: 10px !important;
  width: 48px !important;
  height: 48px !important;
}

.accessibility-toolbar.accessibility-position-bottom-right .accessibility-tools {
  right: -320px !important;
  left: auto !important;
  bottom: 0 !important;
  top: auto !important;
  transform: translateY(0) !important;
}

.accessibility-toolbar.accessibility-position-bottom-right.panel-open .accessibility-tools {
  right: 70px !important;
  bottom: 0 !important;
  top: auto !important;
  transform: translateY(0) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .accessibility-tools {
    width: 280px !important;
    max-height: 70vh !important;
  }

  .accessibility-toolbar.panel-open .accessibility-tools {
    right: 50px !important;
  }

  .accessibility-toolbar.accessibility-position-bottom-left.panel-open .accessibility-tools {
    left: 50px !important;
  }

  .accessibility-toolbar.accessibility-position-bottom-right.panel-open .accessibility-tools {
    right: 50px !important;
  }

  .accessibility-toggle {
    width: 50px !important;
    height: 50px !important;
    /* Enhanced touch area for mobile */
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

@media (max-width: 480px) {
  .accessibility-tools {
    width: 260px !important;
    max-height: 60vh !important;
  }

  .accessibility-toolbar.panel-open .accessibility-tools {
    right: 45px !important;
  }

  .accessibility-toolbar.accessibility-position-bottom-left.panel-open .accessibility-tools {
    left: 45px !important;
  }

  .accessibility-toolbar.accessibility-position-bottom-right.panel-open .accessibility-tools {
    right: 45px !important;
  }

  .accessibility-toggle {
    width: 45px !important;
    height: 45px !important;
    /* Ensure minimum touch target size */
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* SELECTION READING POPUP */
.accessibility-selection-popup {
  position: absolute !important;
  background: #0066cc !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: Arial, sans-serif !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 2147483648 !important;
  display: none !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.accessibility-selection-popup:hover {
  background: #0052a3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.accessibility-selection-popup .accessibility-icon {
  margin-right: 6px !important;
  font-size: 14px !important;
}

/* Adding new TTS section styles for improved UX */

/* TTS Section - Enhanced Layout */
.accessibility-tts-section {
  background: #f8f9fa !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

/* Primary Action Button - Prominent "Read Page" */
.accessibility-button-primary {
  width: 100% !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
}

.accessibility-button-primary:hover,
.accessibility-button-primary:focus {
  background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4) !important;
  opacity: 0.9 !important;
}

.accessibility-button-primary .accessibility-icon {
  font-size: 18px !important;
  margin-right: 0 !important;
}

.accessibility-button-primary .accessibility-button-text {
  font-size: 15px !important;
}

/* Secondary Actions - Vertical stacking */
.accessibility-tts-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.accessibility-button-secondary {
  padding: 8px 6px !important;
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  min-height: 44px !important;
  width: 100% !important;
}

.accessibility-button-secondary:hover:not(:disabled),
.accessibility-button-secondary:focus:not(:disabled) {
  background-color: #f8f9fa !important;
  border-color: #0066cc !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15) !important;
}

.accessibility-button-secondary .accessibility-icon {
  font-size: 16px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.accessibility-button-secondary .accessibility-button-text {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

/* Optimizing TTS speed control for better compact display */
.accessibility-tts-speed {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: white !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  margin-bottom: 12px !important;
}

.accessibility-tts-speed-label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #495057 !important;
  white-space: normal !important;
  flex-shrink: 1 !important;
  line-height: 1.4 !important;
  max-width: 120px !important;
}

.accessibility-tts-speed-label .accessibility-icon {
  font-size: 11px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.accessibility-select-compact {
  flex: 1 !important;
  min-width: 60px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  min-height: 28px !important;
}

/* Info Box - Clear Instructions */
.accessibility-tts-info {
  background: white !important;
  border: 1px solid #dee2e6 !important;
  border-left: 3px solid #0066cc !important;
  border-radius: 8px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.accessibility-tts-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #495057 !important;
}

.accessibility-tts-info-item .accessibility-icon {
  font-size: 14px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.accessibility-tts-info-item span:last-child {
  flex: 1 !important;
}

/* Reset section styling */
.accessibility-reset-section {
  margin-bottom: 15px !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* New class for reset section at bottom */
.accessibility-reset-section-bottom {
  margin-top: 15px !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid #e9ecef !important;
  border-bottom: none !important;
  text-align: center !important; /* Center the button in the section */
}

/* Subtle and smaller reset button */
.accessibility-button-reset {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  background-color: transparent !important;
  border: 1px solid #adb5bd !important;
  border-radius: 4px !important;
  color: #6c757d !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: Arial, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  min-height: 28px !important;
  margin: 0 auto !important;
}

.accessibility-button-reset:hover,
.accessibility-button-reset:focus {
  background-color: #f8f9fa !important;
  border-color: #6c757d !important;
  color: #495057 !important;
  transform: none !important;
  box-shadow: none !important;
}

.accessibility-button-reset:active {
  background-color: #e9ecef !important;
  transform: none !important;
}

.accessibility-button-reset.active {
  background-color: #d4edda !important;
  border-color: #208838 !important;
  color: #208838 !important;
}

/* Added styles for simple (non-categorized) panel headers */
/* Simple section styles - dezente Überschriften ohne farbige Boxen */
.accessibility-section-simple {
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.accessibility-section-simple:last-child {
  margin-bottom: 0 !important;
}

.accessibility-section-simple .accessibility-section-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666666 !important;
  margin-bottom: 8px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.accessibility-section-simple .accessibility-section-content {
  padding: 0 !important;
  background: transparent !important;
}

.accessibility-section-simple .accessibility-subsection {
  margin-bottom: 16px !important;
}

.accessibility-section-simple .accessibility-subsection h5 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #888888 !important;
  font-family: Arial, sans-serif !important;
}

/* Language section - always visible regardless of panel categories setting */
.accessibility-section-language {
  display: block !important;
}

.accessibility-section-language .accessibility-section-header {
  background-color: var(--accessibility-primary-color, #0066cc);
  color: white;
  border: none;
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.accessibility-section-language .accessibility-section-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* REMOVED SEPARATE LANGUAGE SECTION STYLES - NOW USES SAME SYSTEM AS OTHER SECTIONS */
/* Language section follows the same display rules as other sections */
.accessibility-section-language-collapsible .accessibility-section-header {
  background-color: var(--accessibility-primary-color, #0066cc) !important;
}

.accessibility-section-language-simple {
  margin-bottom: 15px !important;
}

.accessibility-section-language-simple .accessibility-section-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 8px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Hide collapsible sections by default (when showPanelCategories is false) */
body[data-panel-categories="false"] .accessibility-section-collapsible {
  display: none !important;
}

/* Show simple sections when showPanelCategories is false */
body[data-panel-categories="false"] .accessibility-section-simple {
  display: block !important;
}

/* Hide simple sections when showPanelCategories is true */
body[data-panel-categories="true"] .accessibility-section-simple {
  display: none !important;
}

/* Show collapsible sections when showPanelCategories is true */
body[data-panel-categories="true"] .accessibility-section-collapsible {
  display: block !important;
}

/* ====================================================
   PANEL CATEGORIES TOGGLE SYSTEM
   Controls whether sections show as collapsible colored boxes
   or as simple text headers
   ==================================================== */

/* Removed all old conflicting rules and consolidated into one clean system */

/* Section header wrapper - contains the clickable collapsible button */
.accessibility-section-header-wrapper {
  display: block !important;
}

/* Simple header - the h4 element for non-collapsible mode */
.accessibility-simple-header {
  display: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #666 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 0 6px 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  background: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Section content - visible by default */
.accessibility-section-content {
  padding: 16px !important;
  background: white !important;
}

/* ====================================================
   MODE: CATEGORIES DISABLED (data-panel-categories="false")
   Shows simple text headers, all content expanded
   ==================================================== */

body[data-panel-categories="false"] .accessibility-section-header-wrapper {
  display: none !important;
}

body[data-panel-categories="false"] .accessibility-simple-header {
  display: block !important;
}

body[data-panel-categories="false"] .accessibility-section-content {
  display: block !important;
  padding: 0 0 16px 0 !important;
  background: transparent !important;
}

body[data-panel-categories="false"] .accessibility-section {
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

body[data-panel-categories="false"] .accessibility-section:last-of-type {
  border-bottom: none !important;
}

/* ====================================================
   MODE: CATEGORIES ENABLED (data-panel-categories="true")
   Shows colored collapsible category boxes
   ==================================================== */

body[data-panel-categories="true"] .accessibility-section-header-wrapper {
  display: block !important;
}

body[data-panel-categories="true"] .accessibility-simple-header {
  display: none !important;
}

/* Hide content when section is collapsed */
body[data-panel-categories="true"]
  .accessibility-section-header-wrapper:has(.accessibility-section-header[aria-expanded="false"])
  ~ .accessibility-section-content {
  display: none !important;
}

/* Show content when section is expanded */
body[data-panel-categories="true"]
  .accessibility-section-header-wrapper:has(.accessibility-section-header[aria-expanded="true"])
  ~ .accessibility-section-content {
  display: block !important;
}

/* ====================================================
   DEFAULT STATE (no data attribute set)
   Falls back to collapsible mode
   ==================================================== */

body:not([data-panel-categories]) .accessibility-section-header-wrapper {
  display: block !important;
}

body:not([data-panel-categories]) .accessibility-simple-header {
  display: none !important;
}

/* ====================================================
   RESET SECTION - Always visible, no header
   ==================================================== */

.accessibility-reset-section {
  border: none !important;
  background: transparent !important;
  margin-top: 15px !important;
  padding: 0 !important;
}

.accessibility-reset-section .accessibility-section-header-wrapper,
.accessibility-reset-section .accessibility-simple-header {
  display: none !important;
}

.accessibility-reset-section .accessibility-section-content {
  padding: 0 !important;
  background: transparent !important;
}

body[data-panel-categories="false"] .accessibility-reset-section {
  border-bottom: none !important;
  padding: 12px 0 0 0 !important;
}

/* ====================================================
   REMOVE OLD DEPRECATED CLASSES
   These are no longer used in the HTML
   ==================================================== */

/* Old classes kept for backwards compatibility but hidden */
.accessibility-section-collapsible,
.accessibility-section-simple,
.accessibility-section-language-collapsible,
.accessibility-section-language-simple {
  /* These classes are deprecated - use .accessibility-section instead */
}

/* Fixed footer styling for panel */
.accessibility-tools-footer {
  padding: 10px 15px !important;
  background-color: #f8f9fa !important;
  border-top: 1px solid #e0e0e0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.accessibility-tools-footer a {
  color: #0066cc !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  display: inline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.accessibility-tools-footer a:hover,
.accessibility-tools-footer a:focus {
  text-decoration: underline !important;
  color: #0052a3 !important;
}

.accessibility-tools-footer small,
.accessibility-tools-footer .accessibility-version {
  display: block !important;
  color: #888888 !important;
  font-size: 10px !important;
  margin-top: 4px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.accessibility-tools-footer .accessibility-version {
  display: block !important;
  font-size: 10px !important;
  color: #6c757d !important;
  font-family: Arial, sans-serif !important;
  background: transparent !important;
}

/* Section content and button styling with explicit font */
.accessibility-section-content {
  padding: 12px !important;
  background-color: #ffffff !important;
  display: none !important;
  margin: 0 !important;
  border: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #333333 !important;
}

.accessibility-section.open .accessibility-section-content {
  display: block !important;
}

.accessibility-section.open .accessibility-section-toggle {
  transform: rotate(180deg) !important;
}

.accessibility-button-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.accessibility-button-row:last-child {
  margin-bottom: 0 !important;
}

.accessibility-button {
  flex: 1 !important;
  padding: 10px 8px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background-color: #f8f9fa !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #333333 !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-transform: none !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.accessibility-button:hover,
.accessibility-button:focus {
  background-color: #e9ecef !important;
  border-color: #0066cc !important;
  outline: none !important;
  text-decoration: none !important;
}

.accessibility-button.active {
  background-color: #0066cc !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
}

.accessibility-button span {
  display: block !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  color: inherit !important;
}

.accessibility-button-icon {
  font-size: 18px !important;
  margin-bottom: 4px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.accessibility-button-text {
  font-size: 11px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

/* Select/dropdown styling with explicit font */
/* Language Selector */
.accessibility-language {
  width: 100% !important;
  padding: 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #333333 !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

.accessibility-language:hover,
.accessibility-language:focus {
  border-color: #0066cc !important;
  outline: none !important;
}

.accessibility-language option {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  color: #333333 !important;
  background-color: #ffffff !important;
  padding: 8px !important;
}
/* Reset button styling with explicit font */
/* Reset Button */
.accessibility-reset-section {
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #e0e0e0 !important;
  margin-bottom: 0 !important;
  background: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.accessibility-button-primary {
  width: 100% !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-align: center !important;
  min-height: 44px !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.accessibility-button-primary:hover,
.accessibility-button-primary:focus {
  background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Dark Mode Styles für besseren Kontrast */
/* Dark Mode - Schwarzer Hintergrund mit weißer Schrift für optimalen Kontrast */
.accessibility-toolbar.accessibility-dark-mode .accessibility-tools {
  background-color: #000000 !important;
  color: #ffffff !important;
  /* Border von #333333 auf #000000 für unsichtbaren Rahmen im Dark Mode */
  border: 1px solid #000000 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-tools-content {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-simple-header {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  /* Border von #333333 auf #000000 */
  border-bottom: 1px solid #000000 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-section {
  background-color: #000000 !important;
  /* Border von #333333 auf #000000 */
  border: 1px solid #000000 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-section-content {
  background: #000000 !important;
  color: #ffffff !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-subsection h5 {
  color: #ffffff !important;
}

/* Updating dark mode button styles for white backgrounds and better contrast */
.accessibility-toolbar.accessibility-dark-mode .accessibility-button,
.accessibility-toolbar.accessibility-dark-mode .accessibility-button-group .accessibility-button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #cccccc !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-button:hover,
.accessibility-toolbar.accessibility-dark-mode .accessibility-button-group .accessibility-button:hover {
  background-color: #f0f0f0 !important;
  border-color: #bbbbbb !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-button:active,
.accessibility-toolbar.accessibility-dark-mode .accessibility-button-group .accessibility-button:active,
.accessibility-toolbar.accessibility-dark-mode .accessibility-button.active,
.accessibility-toolbar.accessibility-dark-mode .accessibility-button-group .accessibility-button.active {
  background-color: #e0e0e0 !important;
  border-color: #aaaaaa !important;
  color: #000000 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-select {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-select:focus {
  border-color: #0066cc !important;
  outline: 2px solid #0066cc !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-tts-hint {
  color: #cccccc !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-tools-footer {
  background-color: #1a1a1a !important;
  /* Border von #333333 auf #000000 */
  border-top: 1px solid #000000 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-tools-footer a {
  color: #66b3ff !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-version {
  color: #999999 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-reset-button {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #555555 !important;
}

.accessibility-toolbar.accessibility-dark-mode .accessibility-reset-button:hover {
  background-color: #444444 !important;
  border-color: #666666 !important;
}

/* Dark Mode Kontrast-Verbesserungen für Section Headers (wenn Kategorien aktiv) */
body[data-panel-categories="true"] .accessibility-toolbar.accessibility-dark-mode .accessibility-section-header {
  color: #ffffff !important;
}

body[data-panel-categories="true"] .accessibility-toolbar.accessibility-dark-mode .accessibility-section-header h3 {
  color: #ffffff !important;
}

body[data-panel-categories="false"] .accessibility-toolbar.accessibility-dark-mode .accessibility-section {
  /* Border von #333333 auf #000000 */
  border-bottom: 1px solid #000000 !important;
}

/* ====================================================================
   FORMENSPRACHE 2026
   --------------------------------------------------------------------
   Dieser Block bringt das Bedienfeld auf dieselbe Formensprache wie
   barrierfree.site: groessere Rundungen, weichere Schatten, mehr Luft,
   farbige Symbolfelder.

   Er steht bewusst am Ende der Datei und aendert keine einzige Zeile
   darueber. Alle Regeln hier betreffen Form, nicht Farbe - die sieben
   bestehenden Farbschemata und die frei waehlbare Kundenfarbe bleiben
   unangetastet. Wer den Umbau rueckgaengig machen will, loescht diesen
   Block und hat wieder genau den vorherigen Stand.

   Eine Ausnahme: das neue Schema "violet" weiter unten. Das ist ein
   Zusatz, kein Eingriff.
   ==================================================================== */

/* ---------- Abgerundeter Knopf ---------- */
.accessibility-toggle {
  border-radius: 16px !important;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45) !important;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}
.accessibility-toggle:hover {
  transform: translateX(-3px) !important;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .5) !important;
}

/* Der Knopf pulsiert dauerhaft. Wer in seinem System "weniger Bewegung"
   eingestellt hat, bekommt jetzt keine Animation mehr - WCAG 2.3.3 und
   2.2.2 im Sinn, und schlicht angenehmer. */
@media (prefers-reduced-motion: reduce) {
  .accessibility-toggle {
    animation: none !important;
    transition: none !important;
  }
  .accessibility-toggle:hover { transform: none !important; }
  .accessibility-tools { transition: none !important; }
  .accessibility-section-toggle { transition: none !important; }
}

/* ---------- Bedienfeld ---------- */
.accessibility-tools {
  border-radius: 18px !important;
  border: 1px solid #E9E5FF !important;
  box-shadow: 0 24px 50px -12px rgba(46, 16, 101, .35),
              0 4px 10px -4px rgba(46, 16, 101, .18) !important;
}

.accessibility-tools-header {
  padding: 13px 14px 13px 16px !important;
  border-radius: 18px 18px 0 0 !important;
}
.accessibility-tools-header h2 {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
}

/* Schliessen als eigene Flaeche statt als nacktes Kreuz */
.accessibility-close {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  /* Abgedunkelt statt aufgehellt. Eine aufgehellte Flaeche macht den
     Kopf heller, und das weisse Kreuz darauf kam dann je nach Schema nur
     noch auf 3,34:1 bis 4,41:1 - gefordert sind 4,5:1. Abgedunkelt sind
     es in jedem der acht Schemata mindestens 6,17:1. */
  background: rgba(0, 0, 0, .18) !important;
  font-size: 18px !important;
  padding: 0 !important;
  transition: background .2s ease !important;
}
.accessibility-close:hover { background: rgba(0, 0, 0, .30) !important; }

.accessibility-tools-content { padding: 10px !important; }

/* ---------- Bereiche ---------- */
.accessibility-section {
  margin-bottom: 8px !important;
  border: 1px solid #EFEAFF !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px -2px rgba(46, 16, 101, .08) !important;
}

.accessibility-section-header {
  padding: 9px 12px !important;
  gap: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
.accessibility-section-header h3 {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  flex: 1 1 auto !important;
}

/* Symbolfeld vor jedem Bereichsnamen. Die Flaeche ist aufgehelltes Weiss
   auf der Kundenfarbe - das funktioniert mit jedem Farbwert, auch mit
   einem frei eingetragenen, ohne dass eine Mischfarbe berechnet werden
   muesste. Das Zeichen darin ist weiss und traegt dieselbe Bedeutung wie
   die Ueberschrift daneben, es ist also aria-hidden. */
.accessibility-section-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .2) !important;
  color: #ffffff !important;
}
.accessibility-section-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

/* Pfeil dreht sich, statt das Zeichen zu wechseln */
.accessibility-section-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  transition: transform .25s ease !important;
  font-size: 10px !important;
}
.accessibility-section-header[aria-expanded="true"] .accessibility-section-toggle {
  transform: rotate(90deg) !important;
}

.accessibility-section-content { padding: 10px !important; }

.accessibility-subsection {
  margin-bottom: 10px !important;
}

.accessibility-subsection h5 {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #2E1065 !important;          /* 15,24:1 auf Weiss */
  margin: 0 0 5px 0 !important;
}

/* ---------- Knoepfe ---------- */
.accessibility-button {
  border-radius: 11px !important;
  border: 1.5px solid #E5E0FF !important;
  background-color: #FBFAFF !important;
  color: #1F2937 !important;          /* 14,68:1 auf #FBFAFF */
  font-weight: 600 !important;
  padding: 7px 10px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.accessibility-button:hover {
  background-color: #F3F0FF !important;
  border-color: #C4B5FD !important;
  transform: translateY(-1px) !important;
}

/* Kompakte Dreiergruppen (Schriftgroesse, Abstaende) */
.accessibility-controls .accessibility-button {
  flex: 1 1 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

.accessibility-select {
  border-radius: 11px !important;
  border: 1.5px solid #E5E0FF !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  font-size: 13px !important;
}

.accessibility-tools-footer,
.accessibility-footer {
  border-radius: 0 0 18px 18px !important;
}

/* ---------- Fokus ----------
   Bisher wurde der Umriss entfernt (outline:none) und statt dessen die
   Hintergrundfarbe auf ein festes Blau gesetzt - auch bei gruenem oder
   orangefarbenem Schema. Das war weder farbschema-fest noch ein
   verlaesslicher Fokusnachweis.

   Jetzt ein doppelter Ring, innen weiss, aussen dunkel. Gegeneinander
   stehen die beiden bei 15,99:1, also traegt immer eine der Farben -
   auf weissem Grund die dunkle, auf farbigem Grund die weisse. Das
   funktioniert mit jedem Farbschema und jeder Kundenfarbe. */
.accessibility-toolbar :focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 6px #1E1B4B !important;
  border-radius: 11px !important;
}
.accessibility-toggle:focus-visible {
  border-radius: 16px !important;
}
/* Der farbliche Wechsel beim Fokus darf bleiben, er schadet nicht -
   aber er ist nicht mehr der einzige Hinweis. */

/* ====================================================================
   NEUES FARBSCHEMA: VIOLETT
   Das Violett der Website als achte Auswahl. Weisser Text darauf:
   7,10:1 auf #6D28D9, 10,95:1 auf #4C1D95. Die sieben bestehenden
   Schemata sind davon nicht beruehrt.
   ==================================================================== */
.accessibility-toolbar.accessibility-color-violet .accessibility-toggle {
  background-color: #6D28D9 !important;
}
.accessibility-toolbar.accessibility-color-violet .accessibility-tools-header {
  background-color: #4C1D95 !important;
}
.accessibility-toolbar.accessibility-color-violet .accessibility-section-header {
  background-color: #6D28D9 !important;
  color: #ffffff !important;
}
.accessibility-toolbar.accessibility-color-violet .accessibility-button-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%) !important;
}
.accessibility-toolbar.accessibility-color-violet .accessibility-toggle:focus,
.accessibility-toolbar.accessibility-color-violet .accessibility-section-header:focus {
  background-color: #4C1D95 !important;
}

/* ---------- Symbole statt Emoji ----------
   Die Symbole stehen bewusst im CSS und nicht im Markup. Beim
   Sprachwechsel setzt updateAllTranslations() el.textContent - ein
   Symbol im Markup waere danach geloescht. Ausserdem hat ein
   Hintergrundbild keinen Textinhalt, wird also von Screenreadern nicht
   vorgelesen. Genau das war bei den Emoji das Problem: "Vorlesen" wurde
   als "Dreieck nach rechts Vorlesen" angesagt. */
.accessibility-button::before {
  content: none;
}

/* Dreieck nach rechts */
#accessibility-read-page::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F2937'><path d='M6 4l13 8-13 8z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Quadrat */
#accessibility-stop-reading::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F2937'><rect x='6' y='6' width='12' height='12' rx='2'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Lautsprecher */
#accessibility-read-selection::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9v6h4l5 4V5L8 9H4z'/><path d='M17 8a5 5 0 010 8'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Lineal */
#accessibility-reading-ruler::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='6' rx='1.5'/><path d='M7 9v3M11 9v3M15 9v3M19 9v3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Kettenglieder */
#accessibility-highlight-links::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 007 0l2-2a5 5 0 00-7-7l-1 1'/><path d='M14 11a5 5 0 00-7 0l-2 2a5 5 0 007 7l1-1'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Unterstrichenes U */
#accessibility-underline-links::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v7a5 5 0 0010 0V4'/><path d='M5 20h14'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* halb gefuellter Kreis */
#accessibility-invert-colors::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 3a9 9 0 010 18z' fill='%231F2937' stroke='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* zwei Kreise */
#accessibility-grayscale-toggle::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  flex: 0 0 16px !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='12' r='6'/><circle cx='15' cy='12' r='6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Die Knoepfe fuer Schriftgroesse und Buchstabenabstand tragen nur noch
   ein Zeichen. Damit die drei gleich breit nebeneinander stehen und das
   Zeichen mittig sitzt: */
#accessibility-font-decrease,
#accessibility-font-reset,
#accessibility-font-increase,
#accessibility-letter-spacing-decrease,
#accessibility-letter-spacing-reset,
#accessibility-letter-spacing-increase {
  justify-content: center !important;
  flex: 1 1 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ---------- Ausrichtung der Symbolknoepfe ----------
   Weiter oben in dieser Datei steht "flex-direction: column" fuer
   .accessibility-button. Solange die Knoepfe nur Text enthielten, fiel
   das nicht auf; mit einem Symbol davor stuende das Symbol ueber der
   Beschriftung. Die Knoepfe mit Symbol laufen deshalb waagerecht. */
#accessibility-read-page,
#accessibility-stop-reading,
#accessibility-read-selection,
#accessibility-reading-ruler,
#accessibility-highlight-links,
#accessibility-underline-links,
#accessibility-invert-colors,
#accessibility-grayscale-toggle {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ---------- Pfeil der Bereichskoepfe ----------
   Weiter oben dreht eine Regel den Pfeil im geschlossenen Zustand um
   -90 Grad; dort war das Zeichen ein nach unten zeigendes Dreieck.
   Jetzt steht im Markup ein nach rechts zeigendes - geschlossen bleibt
   es also ungedreht, geoeffnet dreht es sich um 90 Grad nach unten. */
.accessibility-section-header[aria-expanded="false"] .accessibility-section-toggle {
  transform: none !important;
}
.accessibility-section-header[aria-expanded="true"] .accessibility-section-toggle {
  transform: rotate(90deg) !important;
}
.accessibility-section.open .accessibility-section-toggle {
  transform: rotate(90deg) !important;
}
.accessibility-section-toggle {
  font-size: 13px !important;
  color: #ffffff !important;
}

/* ---------- Versionszeile ----------
   Bestand schon vorher: #6c757d auf #f8f9fa ergibt 4,45:1, gefordert
   sind 4,5:1. Knapp daneben ist auch daneben.

   Dazu kam ein zweiter Punkt, der beim Messen auffiel: auf das Element
   wirkte zusaetzlich opacity: 0.8. Der Messwert 4,45:1 galt also fuer
   eine Farbe, die so gar nicht auf dem Schirm steht - tatsaechlich war
   es weniger. Die Durchsichtigkeit ist jetzt weg und die Farbe
   dunkler: 4,98:1, und diesmal ist der Wert auch der echte.

   Der Selektor nennt drei Stufen, weil weiter oben in der Datei
   .accessibility-tools-footer .accessibility-version steht - eine
   Regel mit zwei Klassen schlaegt eine mit einer. */
.accessibility-toolbar .accessibility-tools-footer .accessibility-version,
.accessibility-toolbar .accessibility-version {
  color: #666D73 !important;
  opacity: 1 !important;
}

/* ================================================================== */
/* v2.6 - Word spacing                                                 */
/* ================================================================== */
body.accessibility-word-spacing-1 {
  word-spacing: 3px !important;
}

body.accessibility-word-spacing-2 {
  word-spacing: 6px !important;
}

body.accessibility-word-spacing-3 {
  word-spacing: 10px !important;
}

body.accessibility-word-spacing-1 *,
body.accessibility-word-spacing-2 *,
body.accessibility-word-spacing-3 * {
  word-spacing: inherit !important;
}

/* Exclude toolbar from word spacing override */
body.accessibility-word-spacing-1 #accessibility-toolbar *,
body.accessibility-word-spacing-2 #accessibility-toolbar *,
body.accessibility-word-spacing-3 #accessibility-toolbar *,
body.accessibility-word-spacing-1 .accessibility-toolbar *,
body.accessibility-word-spacing-2 .accessibility-toolbar *,
body.accessibility-word-spacing-3 .accessibility-toolbar * {
  word-spacing: normal !important;
}

/* ================================================================== */
/* v2.6 - Line height                                                  */
/* ================================================================== */
body.accessibility-line-height-1 {
  line-height: 1.8 !important;
}

body.accessibility-line-height-2 {
  line-height: 2.2 !important;
}

body.accessibility-line-height-3 {
  line-height: 2.8 !important;
}

body.accessibility-line-height-1 *,
body.accessibility-line-height-2 *,
body.accessibility-line-height-3 * {
  line-height: inherit !important;
}

/* Exclude toolbar from line height override */
body.accessibility-line-height-1 #accessibility-toolbar *,
body.accessibility-line-height-2 #accessibility-toolbar *,
body.accessibility-line-height-3 #accessibility-toolbar *,
body.accessibility-line-height-1 .accessibility-toolbar *,
body.accessibility-line-height-2 .accessibility-toolbar *,
body.accessibility-line-height-3 .accessibility-toolbar * {
  line-height: normal !important;
}

/* ================================================================== */
/* v2.6 - Stop animations                                              */
/* ================================================================== */
body.accessibility-stop-animations *,
body.accessibility-stop-animations *::before,
body.accessibility-stop-animations *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

body.accessibility-stop-animations img[src$=".gif"],
body.accessibility-stop-animations img[src*=".gif?"] {
  visibility: hidden !important;
}

/* Exclude toolbar from animation stop */
body.accessibility-stop-animations #accessibility-toolbar *,
body.accessibility-stop-animations #accessibility-toolbar *::before,
body.accessibility-stop-animations #accessibility-toolbar *::after,
body.accessibility-stop-animations .accessibility-toolbar *,
body.accessibility-stop-animations .accessibility-toolbar *::before,
body.accessibility-stop-animations .accessibility-toolbar *::after {
  animation-duration: unset !important;
  animation-iteration-count: unset !important;
  transition-duration: unset !important;
}

/* ================================================================== */
/* Draggable toggle - overrides position classes when user has dragged */
/* ================================================================== */
.accessibility-toolbar.bf-dragged {
  margin-top: 0 !important;
}

.accessibility-toolbar.bf-dragged .accessibility-toggle {
  cursor: grab !important;
  border-radius: 16px !important;
}

/* Dragged: panel hidden when closed */
.accessibility-toolbar.bf-dragged .accessibility-tools {
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
  margin-top: 0 !important;
}

/* Panel opens to the right of the toggle */
.accessibility-toolbar.bf-dragged.bf-panel-right.panel-open .accessibility-tools {
  visibility: visible !important;
  pointer-events: auto !important;
  top: 0 !important;
  bottom: auto !important;
  left: 100% !important;
  right: auto !important;
  transform: none !important;
  margin-left: 10px !important;
  margin-top: 0 !important;
}

/* Panel opens to the left of the toggle */
.accessibility-toolbar.bf-dragged.bf-panel-left.panel-open .accessibility-tools {
  visibility: visible !important;
  pointer-events: auto !important;
  top: 0 !important;
  bottom: auto !important;
  right: 100% !important;
  left: auto !important;
  transform: none !important;
  margin-right: 10px !important;
  margin-top: 0 !important;
}