#acw-panel,
#acw-trigger {
  --acw-accent:       #d12b23;
  --acw-accent-hover: #d12b23;
  --acw-bg:           #ffffff;
  --acw-text:         #111827;
  --acw-text-muted:   #6b7280;
  --acw-border:       #e5e7eb;
  --acw-switch-off:   #d1d5db;
  --acw-switch-on:    #d12b23;
  --acw-radius:       12px;
  --acw-shadow:       0 20px 60px rgba(0, 0, 0, 0.15);
  --acw-transition:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --acw-panel-width:  320px;
}

#acw-trigger {
  position:        fixed;
  bottom:          10px;
  right:            20px;
  z-index:         99998;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--acw-accent);
  color:           #fff;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  /*box-shadow:      0 4px 16px rgba(37, 99, 235, 0.4);*/
  transition:      background var(--acw-transition),
                   transform  var(--acw-transition),
                   box-shadow var(--acw-transition);
  padding:         0;
}

#acw-trigger svg {
  width:  38px;
  height: 38px;
  flex-shrink: 0;
}

#acw-trigger:hover {
  /*background:  var(--acw-accent-hover);
  transform:   scale(1.08);
  box-shadow:  0 6px 20px rgba(37, 99, 235, 0.5);*/
}

#acw-trigger::after {
  content: "Barrierefreiheit";
  position: absolute;
  bottom: 125%;
  left: -50%;
  transform: translateX(-50%);
  
  background: #281E59;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 999;
}

#acw-trigger:hover::after {
  visibility: visible;
  opacity: 1;
}


#acw-trigger:focus-visible {
  outline:        3px solid var(--acw-accent);
  outline-offset: 3px;
}

#acw-backdrop {
  position:   fixed;
  inset:      0;
  z-index:    99999;
  background: rgba(0, 0, 0, 0.35);
  opacity:    0;
  visibility: hidden;
  transition: opacity   var(--acw-transition),
              visibility var(--acw-transition);
  backdrop-filter: blur(2px);
}

#acw-backdrop.is-visible {
  opacity:    1;
  visibility: visible;
}

#acw-panel {
  position:   fixed;
  top:        0;
  left:       0;
  bottom:     0;
  z-index:    100000;
  width:      var(--acw-panel-width);
  max-width:  calc(100vw - 32px);
  background: var(--acw-bg);
  color:      var(--acw-text);
  display:    flex;
  flex-direction: column;
  box-shadow: var(--acw-shadow);
  transform:  translateX(calc(-1 * var(--acw-panel-width) - 20px));
  transition: transform var(--acw-transition);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#acw-panel.is-open {
  transform: translateX(0);
}

.acw-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 20px 16px;
  border-bottom:   1px solid var(--acw-border);
  flex-shrink:     0;
}

.acw-panel-header h2 {
  margin:        0 !important;
  padding:       0 !important;
  font-size:     1.1rem !important;
  font-weight:   700 !important;
  line-height:   1.3 !important;
  color:         var(--acw-text) !important;
  border:        none !important;
  background:    none !important;
}

#acw-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   8px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           var(--acw-text-muted);
  transition:      background var(--acw-transition),
                   color      var(--acw-transition);
  padding:         0;
  flex-shrink:     0;
}

#acw-close svg {
  width:  18px;
  height: 18px;
}

#acw-close:hover {
  background: var(--acw-border);
  color:      var(--acw-text);
}

#acw-close:focus-visible {
  outline:        3px solid var(--acw-accent);
  outline-offset: 2px;
}

.acw-panel-body {
  flex: 1;
  padding: 4px 0;
}

.acw-section {
  padding: 16px 20px;
}

.acw-section-label {
  margin:        0 0 12px !important;
  padding:       0 !important;
  font-size:     0.7rem !important;
  font-weight:   600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:         var(--acw-text-muted) !important;
  background:    none !important;
  border:        none !important;
}

.acw-divider {
  height:     1px;
  background: var(--acw-border);
  margin:     0 20px;
}

.acw-stepper {
  display:     flex;
  align-items: center;
  gap:         0;
  background:  #f3f4f6;
  border-radius: 10px;
  overflow:    hidden;
}

.acw-step-btn {
  flex:            1;
  height:          44px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-size:       0.9rem;
  font-weight:     600;
  color:           var(--acw-text);
  transition:      background var(--acw-transition),
                   color      var(--acw-transition);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  padding:         0;
}

.acw-step-btn:hover:not(:disabled) {
  background: var(--acw-border);
}

.acw-step-btn:disabled {
  color:  var(--acw-switch-off);
  cursor: default;
}

.acw-step-btn:focus-visible {
  outline:        3px solid var(--acw-accent);
  outline-offset: -2px;
}

.acw-step-value {
  flex:            1;
  text-align:      center;
  font-size:       0.85rem;
  font-weight:     600;
  color:           var(--acw-text);
  pointer-events:  none;
  user-select:     none;
}

.acw-toggle-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.acw-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 0;
  gap:             12px;
}

.acw-toggle-row + .acw-toggle-row {
  border-top: 1px solid var(--acw-border);
}

.acw-toggle-label {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.9rem !important;
  font-weight: 500 !important;
  color:       var(--acw-text) !important;
  margin:      0 !important;
  padding:     0 !important;
  cursor:      pointer;
  flex:        1;
  line-height: 1.4 !important;
}

.acw-toggle-label svg {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
  color:       var(--acw-text-muted);
}

.acw-switch {
  position:      relative;
  width:         44px;
  height:        24px;
  border-radius: 12px;
  background:    var(--acw-switch-off);
  border:        none;
  cursor:        pointer;
  padding:       0;
  flex-shrink:   0;
  transition:    background var(--acw-transition);
}

.acw-switch.is-active {
  background: var(--acw-switch-on);
}

.acw-switch-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    #fff;
  box-shadow:    0 1px 3px rgba(0, 0, 0, 0.2);
  transition:    transform var(--acw-transition);
  pointer-events: none;
}

.acw-switch.is-active .acw-switch-thumb {
  transform: translateX(20px);
}

.acw-switch:focus-visible {
  outline:        3px solid var(--acw-accent);
  outline-offset: 2px;
}

.acw-panel-footer {
  padding:       16px 20px;
  border-top:    1px solid var(--acw-border);
  flex-shrink:   0;
}

#acw-reset {
  width:         100%;
  padding:       10px;
  border-radius: 8px;
  background:    transparent;
  border:        1.5px solid var(--acw-border);
  color:         var(--acw-text-muted);
  font-size:     0.85rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    background  var(--acw-transition),
                 border-color var(--acw-transition),
                 color        var(--acw-transition);
}

#acw-reset:hover {
  background:   #fef2f2;
  border-color: #fca5a5;
  color:        #dc2626;
}

#acw-reset:focus-visible {
  outline:        3px solid var(--acw-accent);
  outline-offset: 2px;
}

/* Hoher Kontrast */
html.acw-high-contrast {
  filter: contrast(1.5);
}

/* Graustufen */
html.acw-grayscale {
  filter: grayscale(1);
}

/* Hoher Kontrast + Graustufen kombinieren */
html.acw-high-contrast.acw-grayscale {
  filter: contrast(1.5) grayscale(1);
}

/* Animationen reduzieren */
html.acw-reduce-motion *,
html.acw-reduce-motion *::before,
html.acw-reduce-motion *::after {
  animation-duration:   0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration:  0.001ms !important;
  scroll-behavior:      auto !important;
}

/* Ausnahme: das Widget selbst soll nicht eingefroren werden */
html.acw-reduce-motion #acw-panel,
html.acw-reduce-motion #acw-panel * {
  transition-duration: var(--acw-transition) !important;
}

/* Links hervorheben */
html.acw-highlight-links a:not(#acw-panel a) {
  text-decoration:       underline !important;
  text-decoration-color: var(--acw-accent) !important;
  text-underline-offset: 3px !important;
  font-weight:           600 !important;
  outline:               2px solid transparent;
}

html.acw-highlight-links a:not(#acw-panel a):focus-visible {
  outline-color: var(--acw-accent);
}

html.acw-readable-font body,
html.acw-readable-font p,
html.acw-readable-font li,
html.acw-readable-font span,
html.acw-readable-font h1,
html.acw-readable-font h2,
html.acw-readable-font h3,
html.acw-readable-font h4,
html.acw-readable-font h5,
html.acw-readable-font h6 {
  font-family: 'Verdana', Verdana, Geneva, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing:   0.05em !important;
  line-height:    1.7  !important;
}

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

@media (max-width: 640px) {
  /*#acw-trigger {
    bottom: 16px;
    left:   16px;
    width:  46px;
    height: 46px;
  }*/
}