/**
 * a11y-widget.css
 * Accessibility toolbar styles for Contao 5.7.
 *
 * Sections:
 *  1. CSS Custom Properties (override in your theme if needed)
 *  2. Color themes: .a11y-theme-hc  (high contrast)
 *                   .a11y-theme-soft (soft / screen-friendly)
 *  3. Widget UI: floating button + panel
 */

/* ── 1. Custom Properties ───────────────────────────────────────────── */
:root {
  --a11y-accent:      #273683;
  --a11y-btn-size:    46px;
  --a11y-btn-bottom:  24px;
  --a11y-btn-right:   24px;
  --a11y-panel-w:     300px;
  --a11y-radius:      10px;
  --a11y-z:           9999;
}

/* ── 2. Color Themes ────────────────────────────────────────────────── */

/* High Contrast */
body.a11y-theme-hc,
body.a11y-theme-hc * {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.a11y-theme-hc a,
body.a11y-theme-hc a:visited {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.a11y-theme-hc img {
  filter: contrast(120%) brightness(0.9);
}

body.a11y-theme-hc button,
body.a11y-theme-hc input,
body.a11y-theme-hc select,
body.a11y-theme-hc textarea {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* Soft / Blue-light reduced */
body.a11y-theme-soft {
  --a11y-soft-text: #4a3f2f;
  --a11y-soft-heading: #3b2e1a;
  --a11y-soft-link: #7b5e2a;
  --a11y-soft-surface: #fefaf0;
  --a11y-soft-border: #e0d0a0;
  --a11y-soft-accent: #6a5638;
  --a11y-soft-accent-hover: #7a6443;
  --a11y-soft-accent-muted: #8a765a;
  --a11y-soft-accent-text: #fff8eb;
  --a11y-soft-green: #687c02;
  --a11y-soft-green-hover: #5f7302;
  --a11y-soft-green-text: #ffffff;
  background-color: #fdf6e3 !important;
  color: var(--a11y-soft-text) !important;
}

body.a11y-theme-soft :is(#main, .mod_article, .content-text, .ce_text, .content-page, .content-download, .content-downloads, .content-gallery, article) {
  color: var(--a11y-soft-text) !important;
}

body.a11y-theme-soft :is(#main, .mod_article, .content-text, .ce_text, .content-page, .content-download, .content-downloads, .content-gallery, article) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--a11y-soft-heading) !important;
}

body.a11y-theme-soft :is(#main, .mod_article, .content-text, .ce_text, .content-page, .content-download, .content-downloads, .content-gallery, article) a {
  color: var(--a11y-soft-link) !important;
}

body.a11y-theme-soft :is(.content-wrapper, #main, .mod_article, .content-text, .ce_text, .content-page, .content-download, .content-downloads, .content-gallery, article, .box) {
  background-color: var(--a11y-soft-surface) !important;
  border-color: var(--a11y-soft-border) !important;
}

body.a11y-theme-soft :is(button, .btn, [role="button"], input, select, textarea) {
  color: inherit;
}

body.a11y-theme-soft :is(
  .side-menu-collpse,
  .nav>li>a#taste-collapse:hover,
  .nav>li>a#taste-collapse:focus,
  #sub-submenu h1,
  #sub-submenu ul li.active,
  #sub-submenu .nav>li>a:focus,
  #sub-submenu .nav>li>a:hover,
  .pagination>.active>span,
  .pagination>.active>a,
  .pagination>.active>a:focus,
  .pagination>.active>a:hover,
  .pagination>.active>span:focus,
  .pagination>.active>span:hover,
  .side_menu ul li ul li a:focus,
  .side_menu ul li ul li a:hover
) {
  background-color: var(--a11y-soft-accent) !important;
  border-color: var(--a11y-soft-accent) !important;
  color: var(--a11y-soft-accent-text) !important;
}

body.a11y-theme-soft :is(
  button#btn-decrease,
  button#btn-orig,
  button#btn-increase
) {
  background-color: var(--a11y-soft-accent-muted) !important;
  border-color: var(--a11y-soft-accent-muted) !important;
  color: var(--a11y-soft-accent-text) !important;
}

body.a11y-theme-soft :is(
  .side-menu-collpse a,
  .side-menu-collpse button,
  #sub-submenu h1,
  #sub-submenu ul li.active a,
  .pagination>.active>span,
  .pagination>.active>a,
  button#btn-decrease,
  button#btn-orig,
  button#btn-increase
) {
  color: var(--a11y-soft-accent-text) !important;
}

body.a11y-theme-soft :is(
  .nav>li>a#taste-collapse:hover,
  .side_menu ul li ul li a:focus,
  .side_menu ul li ul li a:hover,
  .pagination>.active>a:hover,
  .btn-green:hover
) {
  background-color: var(--a11y-soft-accent-hover) !important;
  border-color: var(--a11y-soft-accent-hover) !important;
}

body.a11y-theme-soft :is(
  .pagination>li>a,
  .pagination>li>span,
  #sub-submenu ul li.active .level_2.dropdown-menu a
) {
  color: var(--a11y-soft-link) !important;
}

body.a11y-theme-soft :is(
  .startseite #topthemen h1,
  .startseite #schnellkontakt h1,
  h1.aktuelles,
  body.content #left .mod_navigation h1,
  .schnellkontakt-home-module h1,
  .mod_navigation.side_menu h2,
  .dropdown-menu>li>a:focus,
  .dropdown-menu>li>a:hover,
  #navbar-responsive-7 .level_2.dropdown-menu li.active a,
  #navbar-responsive-7 > ul > li.nav-item.dropdown.submenu.trail > ul > li.nav-item.dropdown.submenu.trail > a.dropdown-item,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) a,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) button,
  #navbar-responsive-7 > ul > li.nav-item.dropdown.submenu.trail > ul > li.nav-item.trail > a,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) ul.level_2.dropdown-menu li a:hover,
  .btn-green,
  ul#logo-footer li a + .tooltip > .tooltip-inner
) {
  background-color: var(--a11y-soft-green) !important;
  border-color: var(--a11y-soft-green) !important;
  color: var(--a11y-soft-green-text) !important;
}

body.a11y-theme-soft :is(
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) a:hover,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) button:hover,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) button.show,
  #navbar-responsive-7 ul.level_1 li:not(.blau-menu) ul.level_2.dropdown-menu li a:hover,
  .dropdown-menu>li>a:hover,
  .btn-green:hover
) {
  background-color: var(--a11y-soft-green-hover) !important;
  border-color: var(--a11y-soft-green-hover) !important;
  color: var(--a11y-soft-green-text) !important;
}

body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > a,
body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > button,
body.a11y-theme-soft .header-main-menu #navbar-responsive-7 ul.level_1 li.blau-menu a {
  background-color: #4e637c !important;
  border-color: #4e637c !important;
  color: #ffffff !important;
}

body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > a:hover,
body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > a:focus,
body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > button:hover,
body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > button:focus,
body.a11y-theme-soft #navbar-responsive-7 li.blau-menu > button.show,
body.a11y-theme-soft .header-main-menu #navbar-responsive-7 ul.level_1 li.blau-menu a:hover,
body.a11y-theme-soft .header-main-menu #navbar-responsive-7 ul.level_1 li.blau-menu a:focus {
  background-color: #3f556d !important;
  border-color: #3f556d !important;
  color: #ffffff !important;
}

/* ── 3. Widget UI ───────────────────────────────────────────────────── */

/* Floating trigger button */
#a11y-btn {
  position: fixed;
  bottom: var(--a11y-btn-bottom);
  right:  var(--a11y-btn-right);
  z-index: var(--a11y-z);
  width:  var(--a11y-btn-size);
  height: var(--a11y-btn-size);
  border-radius: 50%;
  border: none;
  background: var(--a11y-accent);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform .15s, background .15s;
  padding: 12px;
}

#a11y-btn:hover  { background: #4740a3; transform: scale(1.06); }
#a11y-btn:focus  { outline: 3px solid #ffbf00; outline-offset: 3px; }
#a11y-btn:active { transform: scale(0.97); }

/* Panel */
#a11y-panel {
  position: fixed;
  bottom: calc(var(--a11y-btn-bottom) + var(--a11y-btn-size) + 10px);
  right:  var(--a11y-btn-right);
  z-index: var(--a11y-z);
  width: var(--a11y-panel-w);
  background: #fff;
  border: 1px solid #d1cfe8;
  border-radius: var(--a11y-radius);
  padding: 16px;
  font-family: inherit;
  font-size: 14px;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  box-shadow: 2px 8px 60px -2px rgba(0, 0, 0, .2);
}

#a11y-panel.a11y-panel--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Panel header */
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.a11y-close-btn {
  border: none;
  color: #afafaf;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-bottom: 9.6px;
  background-color: transparent;
  transition: all .15s;
  svg{
    width: 16px;
    height: 16px;
  }
}

.a11y-close-btn:hover {
  border-color: var(--a11y-accent);
  color: var(--a11y-accent);
}

.a11y-close-btn:focus {
  outline: 2px solid var(--a11y-accent);
}

/* Section label */
.a11y-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
  margin-bottom: 9.6px;
  display: block;
}

/* Font size row */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-direction: column;
  gap: 8px;
}

.a11y-row-label {
  font-size: 14px;
  color: #181d27;
}

.a11y-fs-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.a11y-fs-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all .15s;
  padding: 3px 0 0;
}

.a11y-fs-controls button:hover  { background: #e8e8ff; border-color: var(--a11y-accent); }
.a11y-fs-controls button:focus  { outline: 2px solid var(--a11y-accent); }

#a11y-fs-value {
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--a11y-accent);
  background: #f0eeff;
  border: 1px solid #d0cbff;
  border-radius: 5px;
  padding: 4px 0;
  flex: 1;
}

/* Divider */
.a11y-divider {
  border: none;
  border-top: 1px solid #929191;
  margin: 12px 0;
}

/* Theme buttons */
.a11y-theme-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}

.a11y-theme-btns button {
  padding: 12px 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f7f7f7;
  font-size: 14px;
  color: #181d27;
  cursor: pointer;
  text-align: center;
  line-height: normal;
  transition: all .15s;
}

.a11y-theme-btns button:hover  { border-color: var(--a11y-accent); color: var(--a11y-accent); }
.a11y-theme-btns button:focus  { outline: 2px solid var(--a11y-accent); }
.a11y-theme-btns button.a11y-active {
  border-color: var(--a11y-accent);
  background: #f0eeff;
  color: var(--a11y-accent);
  font-weight: 500;
}

/* Reset button */
#a11y-reset {
  width: 100%;
  padding: 12px 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #181d27;
  cursor: pointer;
  transition: all .15s;
  background: #ebebeb;
}

#a11y-reset:hover { background: #fff0f0; border-color: #e88; color: #c44; }
#a11y-reset:focus { outline: 2px solid var(--a11y-accent); }

/* Cookie info */
.a11y-cookie-info {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 9.6px;
  padding-top: 9.6px;
  border-top: 1px solid #eee;
}

/* High-contrast overrides for the widget itself */
body.a11y-theme-hc #a11y-btn {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

body.a11y-theme-hc #a11y-panel {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

body.a11y-theme-hc .a11y-fs-controls button,
body.a11y-theme-hc .a11y-theme-btns button,
body.a11y-theme-hc #a11y-reset {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}