/* ==========================================================================
   Schoolbird Accessibility Suite v3.1 – Seiten-Effekte (Light DOM)
   Das Panel selbst lebt im Shadow DOM (#sba-host) und ist damit vollständig
   vor Theme-CSS geschützt. Hier stehen nur Effekte, die auf die SEITE wirken.
   ========================================================================== */

/* Overlays (Lesemaske / Leselineal) */
.sba-overlay { position: fixed; left: 0; right: 0; z-index: 2147483000; pointer-events: none; }
.sba-mask-top, .sba-mask-bottom { background: rgba(13, 17, 23, 0.62); }
.sba-guide { height: 10px; background: #edab46; opacity: 0.9; border-radius: 5px; box-shadow: 0 1px 6px rgba(0,0,0,0.35); }

/* Vorlese-Hervorhebung */
.sba-tts-active {
  outline: 4px solid #edab46 !important;
  outline-offset: 3px !important;
  background: rgba(237, 171, 70, 0.18) !important;
  border-radius: 4px;
}
html.sba-tts-click body { cursor: crosshair; }

/* Kontrast: Dunkel */
html.sba-contrast-dark body :not(#sba-host):not(.sba-overlay) {
  background-color: #0d1117 !important;
  color: #f2f4f8 !important;
  border-color: #3a4150 !important;
}
html.sba-contrast-dark body a { color: #9ec1ff !important; }
html.sba-contrast-dark img, html.sba-contrast-dark video { opacity: 0.9; }

/* Kontrast: Hell (maximal) */
html.sba-contrast-light body :not(#sba-host):not(.sba-overlay) {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
html.sba-contrast-light body a { color: #0000cc !important; text-decoration: underline !important; }

/* Invertiert */
html.sba-invert { filter: invert(1) hue-rotate(180deg); background: #0d1117; }
html.sba-invert :is(img, video, picture, iframe, #sba-host) { filter: invert(1) hue-rotate(180deg); }

/* Graustufen / Saettigung */
html.sba-grayscale body > *:not(#sba-host) { filter: grayscale(1); }
html.sba-lowsat body > *:not(#sba-host) { filter: saturate(0.4); }

/* Farbfehlsichtigkeit (SVG-Filter, per JS injiziert) */
html.sba-cb-protanopia body > *:not(#sba-host) { filter: url(#sba-protanopia); }
html.sba-cb-deuteranopia body > *:not(#sba-host) { filter: url(#sba-deuteranopia); }
html.sba-cb-tritanopia body > *:not(#sba-host) { filter: url(#sba-tritanopia); }

/* Lesbare Schrift */
html.sba-readable-font body *:not(#sba-host) {
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* Textabstaende nach WCAG 1.4.12 */
html.sba-spacing body *:not(#sba-host) {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html.sba-lineheight body *:not(#sba-host) {
  line-height: 1.9 !important;
}

/* Links hervorheben */
html.sba-links body a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* Bilder ausblenden */
html.sba-hideimg body :is(img, picture, svg, figure):not(#sba-host *) { visibility: hidden !important; }

/* Grosse Klickziele */
html.sba-bigtargets body :is(a, button, [role="button"], input[type="submit"]):not(#sba-host *) {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 14px !important;
}

/* Grosser Cursor */
html.sba-bigcursor,
html.sba-bigcursor body * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path fill='%23101828' stroke='white' stroke-width='1.2' d='M5 2l14 12-6 1 3.5 6-2.8 1.4L10 16l-5 4z'/></svg>") 4 2, auto !important;
}

/* Sichtbarer Tastatur-Fokus ueberall */
html.sba-focus body :is(a, button, input, select, textarea, [tabindex]):focus:not(#sba-host *) {
  outline: 4px solid #edab46 !important;
  outline-offset: 2px !important;
}

/* Animationen stoppen */
html.sba-nomotion body *:not(#sba-host) {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}