/**
 * Barrierefreiheits-Stylesheet für die Gemeinde Güllesheim Website
 * Implementiert Farbthemen, Dyslexie-freundliche Schrift und weitere Barrierefreiheitsoptionen
 */

/* ---------- Barrierefreiheits-Panel Styling ---------- */
#a11y-open.a11y-btn {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  background-color: #2a8d8f !important;
  color: white !important;
  border: none !important;
  border-radius: 30px !important;
  width: 200px !important;
  height: 55px !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  padding: 0 15px !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

#a11y-open.a11y-btn:hover,
#a11y-open.a11y-btn:focus {
  background-color: #207275 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4) !important;
  outline: 3px solid rgba(255, 255, 255, 0.5) !important;
}

#a11y-panel {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 320px;
  max-width: 90vw;
  background-color: white;
  border-radius: var(--card-border-radius);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  z-index: 99998;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #2b2b2b;
  border: 2px solid #d8d3d0;
}

.a11y-panel-inner {
  padding: 1.5rem;
  max-height: 80vh;
  overflow-y: auto;
}

#a11y-panel h2 {
  margin-top: 0;
  padding-right: 30px;
  font-size: 1.5rem;
}

#a11y-panel h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.2rem;
  border-bottom: 1px solid var(--mid-gray);
  padding-bottom: 0.5rem;
}

#a11y-panel section:first-of-type h3 {
  margin-top: 0;
}

.a11y-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.a11y-close:hover,
.a11y-close:focus {
  background-color: var(--light-gray);
}

.row {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.row label {
  flex: 1;
  min-width: 120px;
  margin-right: 0.5rem;
}

.row .btns {
  display: flex;
  gap: 0.25rem;
}

.row .btns button {
  padding: 0.25rem 0.5rem;
  background-color: var(--light-gray);
  border: 1px solid var(--mid-gray);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.row .btns button:hover,
.row .btns button:focus {
  background-color: var(--mid-gray);
}

.row select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--mid-gray);
  border-radius: var(--border-radius);
  background-color: white;
}

.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.switch input {
  margin-right: 0.5rem;
}

.hint {
  font-size: 0.875rem;
  color: var(--dark-gray);
  margin-top: 0.5rem;
  font-style: italic;
}

.meta {
  font-size: 0.75rem;
  color: var(--dark-gray);
  margin-top: 1.5rem;
  text-align: center;
}

/* ---------- Farbthemen ---------- */

/* Standard-Theme (bereits in styles.css definiert) */
/* Explizite Definitionen für das Barrierefreiheits-Panel im Standard-Theme */
#a11y-panel h2,
#a11y-panel h3,
#a11y-panel label,
#a11y-panel .switch span,
#a11y-panel .meta,
#a11y-panel .hint,
#a11y-panel p,
#a11y-panel .row {
  color: #2b2b2b !important;
}

#a11y-panel .row .btns button {
  background-color: #f5f2f0;
  color: #2b2b2b !important;
  border: 1px solid #d8d3d0;
  font-weight: 500;
}

#a11y-panel .row .btns button:hover,
#a11y-panel .row .btns button:focus {
  background-color: #d8d3d0;
}

#a11y-panel select {
  background-color: white;
  color: #2b2b2b;
  border: 1px solid #d8d3d0;
}

/* Dunkles Theme */
[data-theme="dark"] {
  --bg: #222222;
  --fg: #f0f0f0;
  --light-gray: #444444;
  --mid-gray: #666666;
  --dark-gray: #aaaaaa;
  --primary: #4db6bd;
  --primary-dark: #3a9da3;
  --secondary: #f0a04b;
  --secondary-dark: #d88c37;
  --accent: #a58d82;
  --link: #6ecbd3;
  --link-hover: #8dd8dd;
  --header-bg: #1a1a1a;
  --header-fg: #ffffff;
  --footer-bg: #333333;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* High-Contrast Theme */
[data-theme="hc"] {
  --bg: #000000;
  --fg: #ffffff;
  --light-gray: #333333;
  --mid-gray: #666666;
  --dark-gray: #999999;
  --primary: #00ddff;
  --primary-dark: #00bbdd;
  --secondary: #ffcc00;
  --secondary-dark: #ddaa00;
  --accent: #ff9900;
  --link: #00ddff;
  --link-hover: #88eeff;
  --header-bg: #000000;
  --header-fg: #ffffff;
  --footer-bg: #000000;
  --border-radius: 0;
  --card-border-radius: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* Spezielle Anpassungen für das Barrierefreiheits-Panel im High-Contrast-Modus */
[data-theme="hc"] .a11y-btn {
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #000000;
}

[data-theme="hc"] #a11y-panel {
  background-color: #000000;
  border: 2px solid #ffffff;
}

[data-theme="hc"] #a11y-panel h2,
[data-theme="hc"] #a11y-panel h3,
[data-theme="hc"] #a11y-panel label,
[data-theme="hc"] #a11y-panel .switch span,
[data-theme="hc"] #a11y-panel .meta,
[data-theme="hc"] #a11y-panel .hint,
[data-theme="hc"] #a11y-panel p {
  color: #ffffff !important;
}

[data-theme="hc"] #a11y-panel .row .btns button {
  background-color: #333333;
  color: #ffffff;
  border: 1px solid #ffffff;
}

[data-theme="hc"] #a11y-panel .row .btns button:hover,
[data-theme="hc"] #a11y-panel .row .btns button:focus {
  background-color: #666666;
}

[data-theme="hc"] #a11y-panel select {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
}

[data-theme="hc"] #a11y-panel .a11y-close {
  color: #ffffff;
}

/* Sepia Theme */
[data-theme="sepia"] {
  --bg: #f8f0e0;
  --fg: #5b4636;
  --light-gray: #e8d8c0;
  --mid-gray: #c0b0a0;
  --dark-gray: #8a7a6a;
  --primary: #6b8e23;
  --primary-dark: #556b2f;
  --secondary: #b87333;
  --secondary-dark: #8b4513;
  --accent: #a0522d;
  --link: #2f4f4f;
  --link-hover: #4a766e;
  --header-bg: #d2b48c;
  --header-fg: #5b4636;
  --footer-bg: #e8d8c0;
}

/* Colorblind-Safe Theme */
[data-theme="cb"] {
  --bg: #ffffff;
  --fg: #333333;
  --light-gray: #f0f0f0;
  --mid-gray: #cccccc;
  --dark-gray: #777777;
  --primary: #0072b2;
  --primary-dark: #005682;
  --secondary: #e69f00;
  --secondary-dark: #b67f00;
  --accent: #009e73;
  --link: #0072b2;
  --link-hover: #005682;
  --header-bg: #0072b2;
  --header-fg: #ffffff;
  --footer-bg: #f0f0f0;
}

/* ---------- Dyslexie-freundliche Schrift ---------- */
.dyslexia {
  --font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8;
}

.dyslexia h1,
.dyslexia h2,
.dyslexia h3,
.dyslexia h4,
.dyslexia h5,
.dyslexia h6 {
  letter-spacing: 0.03em;
  word-spacing: 0.05em;
}

.dyslexia p,
.dyslexia li,
.dyslexia dt,
.dyslexia dd,
.dyslexia blockquote {
  font-weight: 400;
  max-width: 70ch;
}

/* ---------- Links deutlicher unterstreichen ---------- */
.links-underline a {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.1em !important;
}

.links-underline a:hover,
.links-underline a:focus {
  text-decoration-thickness: 0.15em !important;
}

/* ---------- Reduzierte Bewegung ---------- */
.reduced-motion * {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

/* ---------- Responsive Anpassungen für den Barrierefreiheits-Button ---------- */
@media (max-width: 768px) {
  .a11y-btn {
    width: 160px;
    height: 45px;
    font-size: 0.9rem;
    bottom: 15px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  .a11y-btn {
    width: 140px;
    height: 40px;
    font-size: 0.85rem;
    bottom: 10px;
    right: 10px;
  }
}