/* Modern Glassmorphism Design */
body.a11y-contrast .a11y-text-dark {
  color: #000 !important;
}

body.a11y-contrast .a11y-text-light {
  color: #fff !important;
}

[data-a11y-low-contrast] {
  outline: 2px solid #ff3b30 !important;
}

[data-a11y-unlabeled] {
  outline: 2px dashed #ff9500 !important;
  background-color: rgba(255, 204, 0, 0.1);
}

/* Modern Floating Button mit Fokus-Fix */
#a11y-toggle {
  position: fixed !important;
  bottom: 1.5rem !important;
  left: 1.5rem !important;
  z-index: 10000 !important;
  background: var(--a11y-button-color, #4A90E2) !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  padding: 0.8rem !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  user-select: none !important;
  border: none !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#a11y-toggle.a11y-pos-bottom-left {
  left: 1.5rem !important;
  right: auto !important;
}

#a11y-toggle.a11y-pos-bottom-right {
  left: auto !important;
  right: 1.5rem !important;
}

#a11y-toggle .a11y-icon {
  font-size: 28px !important;
}

#a11y-toggle:hover {
  background: var(--a11y-button-hover, #4A90E2) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Starker Fokus-Indikator für Button */
#a11y-toggle:focus {
  transform: scale(1.1) !important;
}

/* Glassmorphism Panel */
#a11y-panel {
  position: fixed;
  width: initial;
  bottom: 91px;
  z-index: 9998;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem;
  border-radius: 1.2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#a11y-panel.a11y-pos-bottom-left {
  left: 6px;
  right: auto;
}

#a11y-panel.a11y-pos-bottom-right {
  left: auto;
  right: 6px;
}

#a11y-panel.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#a11y-panel .a11y-btn {
  font-size: 16px;
  padding: 0.6rem;
  background: rgb(255, 255, 255);
  color: #333;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#a11y-panel .a11y-icon {
  font-size: 22px;
}

#a11y-panel .a11y-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#a11y-panel .a11y-btn::after {
  content: attr(title);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#a11y-panel .a11y-btn:hover::after {
  opacity: 1;
}

#a11y-panel .a11y-close:hover {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
}

/* Modern focus styles */
:focus-visible {
  outline: 3px solid var(--a11y-focus-color) !important;
  box-shadow: var(--a11y-focus-glow) !important;
  transition: 
      outline 0.2s ease,
      box-shadow 0.3s ease !important;
}

/* Skip link styling */
[data-a11y-skip] {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #a11y-toggle {
    width: 54px !important;
    height: 54px !important;
  }
  
  #a11y-panel .a11y-btn {
    width: 54px;
    height: 54px;
    font-size: 15px;
  }
  
  #a11y-panel {
    padding: 0.8rem;
    gap: 0.3rem;
  }
}

/* Scoped icon classes */
#a11y-toggle .a11y-icon,
#a11y-panel .a11y-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Icons */
#a11y-toggle .a11y-icon--accessible,
#a11y-panel .a11y-icon--accessible {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m14 16l1.32 1.76C14.32 19.68 12.31 21 10 21c-3.31 0-6-2.69-6-6c0-2.43 1.46-4.5 3.55-5.45l.21 2.17C6.71 12.44 6 13.63 6 15c0 2.21 1.79 4 4 4c1.86 0 3.41-1.28 3.86-3zm5.55.11l-1.25.62L15.5 13h-4.59l-.2-2H14V9h-3.5l-.3-3c1.01-.12 1.8-.96 1.8-2a2 2 0 1 0-4 0v.1L9.1 15h5.4l3.2 4.27l2.75-1.37z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--font-increase,
#a11y-panel .a11y-icon--font-increase {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.12 14L7.5 7.67L9.87 14M6.5 5L1 19h2.25l1.12-3h6.25l1.13 3H14L8.5 5zM18 7l-5 5.07l1.41 1.43L17 10.9V17h2v-6.1l2.59 2.6L23 12.07z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--font-decrease,
#a11y-panel .a11y-icon--font-decrease {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.12 14L7.5 7.67L9.87 14M6.5 5L1 19h2.25l1.12-3h6.25l1.13 3H14L8.5 5zM18 17l5-5.07l-1.41-1.43L19 13.1V7h-2v6.1l-2.59-2.6L13 11.93z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--contrast,
#a11y-panel .a11y-icon--contrast {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20c-2.21 0-4.21-.9-5.66-2.34L17.66 6.34A8 8 0 0 1 20 12a8 8 0 0 1-8 8M6 8h2V6h1.5v2h2v1.5h-2v2H8v-2H6M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 14h5v-1.5h-5z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--reset,
#a11y-panel .a11y-icon--reset {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 7a6.5 6.5 0 0 1 6.5 6.5a6.5 6.5 0 0 1-6.5 6.5H10v-2h3.5c2.5 0 4.5-2 4.5-4.5S16 9 13.5 9H7.83l3.08 3.09L9.5 13.5L4 8l5.5-5.5l1.42 1.41L7.83 7zM6 18h2v2H6z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--skip,
#a11y-panel .a11y-icon--skip {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.92 12.08L12 20l-7.92-7.92l1.42-1.41l5.5 5.5V2h2v14.17l5.5-5.51zM12 20H2v2h20v-2z'/%3E%3C/svg%3E");
}

#a11y-toggle .a11y-icon--close,
#a11y-panel .a11y-icon--close {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");
}