/* ============================================================
   BeWo Telehealthcare – Barrierefreiheit-Widget CSS
   Externe Datei (style-src 'self' CSP-konform)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   HOCHKONTRAST-MODUS
   Setzt alle Design-Tokens und hartcodierten Farben zurück.
   ══════════════════════════════════════════════════════════ */

/* CSS-Variablen (Design-Tokens) */
html.a11y-contrast {
  --warm-white:  #0f0f0f !important;
  --warm-grey:   #1a1a1a !important;
  --mid-grey:    #3a3a3a !important;
  --text:        #f0f0f0 !important;
  --text-mid:    #cccccc !important;
  --text-light:  #999999 !important;
  --red:         #ff7070 !important;
  --red-light:   #2a0808 !important;
  --red-mid:     #5a1a1a !important;
  --green:       #5de65d !important;
  --green-light: #082008 !important;
  --green-mid:   #1a4a1a !important;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.5) !important;
  --shadow-md:   0 6px 24px rgba(0,0,0,0.6) !important;
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.7) !important;
}

/* Basis */
html.a11y-contrast body {
  background: #0f0f0f !important;
  color: #f0f0f0 !important;
}

/* ── Navigation ── */
html.a11y-contrast .nav {
  background: #141414 !important;
  border-bottom: 1px solid #333 !important;
}
html.a11y-contrast .nav.scrolled {
  background: rgba(20,20,20,0.97) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.6) !important;
}
html.a11y-contrast .nav__links a {
  color: #d0d0d0 !important;
}
html.a11y-contrast .nav__links a:hover {
  color: #ff9090 !important;
  background: #2a0808 !important;
}
html.a11y-contrast .nav__btn-partner {
  background: #252525 !important;
  color: #d0d0d0 !important;
}
html.a11y-contrast .nav__btn-partner:hover {
  background: #333 !important;
}
html.a11y-contrast .nav__mobile {
  background: #141414 !important;
  border-top-color: #333 !important;
}
html.a11y-contrast .nav__mobile a {
  color: #d0d0d0 !important;
  border-bottom-color: #333 !important;
}

/* ── Hero ── */
html.a11y-contrast .hero {
  background: #0f0f0f !important;
}
html.a11y-contrast .btn-outline {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}
html.a11y-contrast .btn-outline:hover {
  border-color: #ff7070 !important;
  color: #ff9090 !important;
}
html.a11y-contrast .hero__trust-icon {
  background: #252525 !important;
}
html.a11y-contrast .hero__demo-popup {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #ff7070 !important;
}
html.a11y-contrast .hero__demo-popup .popup-title {
  color: #ff9090 !important;
}
html.a11y-contrast .hero__demo-popup.success {
  border-color: #5de65d !important;
}
html.a11y-contrast .hero__demo-popup.success .popup-title {
  color: #5de65d !important;
}
html.a11y-contrast .hero__demo-popup .popup-sub {
  color: #aaa !important;
}

/* ── Sektionen ── */
html.a11y-contrast .section--grey {
  background: #141414 !important;
}
html.a11y-contrast .section--dark-green {
  background: linear-gradient(135deg, #0a1f10 0%, #12321a 100%) !important;
}
html.a11y-contrast .section-lead {
  color: #c0c0c0 !important;
}

/* ── How it works ── */
html.a11y-contrast .howitworks__card {
  background: #1a1a1a !important;
  border-color: #333 !important;
}
html.a11y-contrast .howitworks__stat-desc {
  color: #b0b0b0 !important;
}

/* ── Produkte ── */
html.a11y-contrast .products__tab {
  background: #222 !important;
  color: #b0b0b0 !important;
}
html.a11y-contrast .products__panel {
  background: #1a1a1a !important;
}
html.a11y-contrast .products__desc {
  color: #c0c0c0 !important;
}

/* ── Leistungen ── */
html.a11y-contrast .services__card {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}
html.a11y-contrast .services__card p {
  color: #b8b8b8 !important;
}
html.a11y-contrast .services__icon--red {
  background: #2a0808 !important;
}
html.a11y-contrast .services__icon--green {
  background: #082008 !important;
}

/* ── Preise ── */
html.a11y-contrast .pricing__toggle {
  background: #222 !important;
}
html.a11y-contrast .pricing__toggle-btn {
  color: #888 !important;
}
html.a11y-contrast .pricing__toggle-btn.active {
  background: #333 !important;
  color: #f0f0f0 !important;
}
html.a11y-contrast .pricing__card {
  background: #1a1a1a !important;
  border-color: #333 !important;
}
html.a11y-contrast .pricing__card--highlight {
  background: #1e0505 !important;
  border: 2px solid #ff7070 !important;
  box-shadow: 0 8px 40px rgba(255,112,112,0.2) !important;
}
html.a11y-contrast .pricing__card--highlight .pricing__name {
  color: #ffaaaa !important;
}
html.a11y-contrast .pricing__card--highlight .pricing__price-amount {
  color: #ffaaaa !important;
}
html.a11y-contrast .pricing__card--highlight .pricing__desc,
html.a11y-contrast .pricing__card--highlight .pricing__price-unit {
  color: #cc9090 !important;
}
html.a11y-contrast .pricing__card--highlight .pricing__features li {
  color: #dddddd !important;
}
html.a11y-contrast .pricing__card--highlight .pricing__check {
  background: rgba(255,112,112,0.2) !important;
}
html.a11y-contrast .pricing__badge {
  background: #1e1e1e !important;
  color: #ff9090 !important;
}
html.a11y-contrast .pricing__card--highlight .btn-plan {
  background: #ff7070 !important;
  color: #000 !important;
}
html.a11y-contrast .pricing__check {
  background: #082008 !important;
}
html.a11y-contrast .pricing__features li {
  color: #c0c0c0 !important;
}
html.a11y-contrast .pricing__footnote {
  color: #888 !important;
}

/* ── Partner-Sektion (bereits dunkel, nur Anpassungen) ── */
html.a11y-contrast .partner__stat-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html.a11y-contrast .partner__lead {
  color: rgba(255,255,255,0.85) !important;
}

/* ── Über uns ── */
html.a11y-contrast .about__stat-card {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}
html.a11y-contrast .about__team-card {
  background: #1a1a1a !important;
}
html.a11y-contrast .about__team-avatar {
  background: rgba(255,255,255,0.1) !important;
}
html.a11y-contrast .about__lead {
  color: #c0c0c0 !important;
}

/* ── Testimonials ── */
html.a11y-contrast .testimonials__card {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}
html.a11y-contrast .testimonials__text {
  color: #c0c0c0 !important;
}

/* ── Kontaktformular ── */
html.a11y-contrast .contact__form-wrap {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}
html.a11y-contrast .contact__form-wrap h3 {
  color: #f0f0f0 !important;
}
html.a11y-contrast .contact__lead {
  color: #c0c0c0 !important;
}
html.a11y-contrast .form-input {
  background: #111 !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}
html.a11y-contrast .form-input:focus {
  border-color: #ff7070 !important;
}
html.a11y-contrast .form-input::placeholder {
  color: #666 !important;
}
html.a11y-contrast .form-label {
  color: #d0d0d0 !important;
}
html.a11y-contrast .form-reason-btn {
  background: #1a1a1a !important;
  color: #c0c0c0 !important;
  border-color: #444 !important;
}
html.a11y-contrast .form-reason-btn.active {
  background: #2a0808 !important;
  border-color: #ff7070 !important;
  color: #ff9090 !important;
}
html.a11y-contrast .form-privacy {
  color: #888 !important;
}
html.a11y-contrast input[type="checkbox"] {
  accent-color: #ff7070 !important;
}

/* ── Modals ── */
html.a11y-contrast .modal {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
}
html.a11y-contrast .modal__close {
  background: #2a2a2a !important;
  color: #ccc !important;
}
html.a11y-contrast .modal__close:hover {
  background: #3a3a3a !important;
  color: #fff !important;
}
html.a11y-contrast .modal h2,
html.a11y-contrast .modal h3 {
  color: #f0f0f0 !important;
}
html.a11y-contrast .modal p {
  color: #c0c0c0 !important;
}

/* ── Footer (bereits dunkel, kleinere Anpassungen) ── */
html.a11y-contrast .footer {
  background: #080808 !important;
  border-top: 1px solid #333 !important;
}

/* ── Links hervorheben-Modus ── */
html.a11y-links a {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
  border-radius: 2px !important;
}

/* ══════════════════════════════════════════════════════════
   TEXT VERGRÖßERN – 3 Stufen (zoom skaliert ALLES: Fonts,
   Layouts, Buttons – wie Browser-Zoom, ohne px zu überschreiben)
   ══════════════════════════════════════════════════════════ */
html.a11y-ts1 { zoom: 1.15; }
html.a11y-ts2 { zoom: 1.30; }
html.a11y-ts3 { zoom: 1.50; }

/* ── Textabstand – 3 Stufen ── */
html.a11y-sp1 * { letter-spacing: 0.06em !important; word-spacing: 0.10em !important; }
html.a11y-sp2 * { letter-spacing: 0.12em !important; word-spacing: 0.20em !important; }
html.a11y-sp3 * { letter-spacing: 0.20em !important; word-spacing: 0.32em !important; }

/* ── Zeilenhöhe – 3 Stufen ── */
html.a11y-lh1 p, html.a11y-lh1 li, html.a11y-lh1 label, html.a11y-lh1 td { line-height: 1.8 !important; }
html.a11y-lh2 p, html.a11y-lh2 li, html.a11y-lh2 label, html.a11y-lh2 td { line-height: 2.1 !important; }
html.a11y-lh3 p, html.a11y-lh3 li, html.a11y-lh3 label, html.a11y-lh3 td { line-height: 2.5 !important; }

/* ── Blocksatz ── */
html.a11y-justify p,
html.a11y-justify li { text-align: justify !important; hyphens: auto !important; }

/* ── Bilder ausblenden ── */
html.a11y-noimages img { visibility: hidden !important; }

/* ── Animationen stoppen ── */
html.a11y-noanims *,
html.a11y-noanims *::before,
html.a11y-noanims *::after {
  animation-duration:        0.001ms !important;
  animation-iteration-count: 1       !important;
  transition-duration:       0.001ms !important;
  transition-delay:          0ms     !important;
  scroll-behavior:           auto    !important;
}

/* ── Großer Zeiger ── */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M6 2 L6 28 L12 21 L17 33 L21 31 L16 19 L26 19 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 2, auto !important;
}


/* ══════════════════════════════════════════════════════════
   WIDGET-KOMPONENTEN
   ══════════════════════════════════════════════════════════ */

#a11y-widget {
  font-family: system-ui, -apple-system, sans-serif;
}

/* FAB-Button */
#a11y-fab {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 9990;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2c2c2c;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s, background 0.18s;
}
#a11y-fab:hover  { background: #444; transform: scale(1.08); }
#a11y-fab:focus-visible { outline: 3px solid #D92B2B; outline-offset: 3px; }

/* Overlay */
#a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9991;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
#a11y-overlay.a11y-open { opacity: 1; pointer-events: auto; }

/* Panel – immer hell, damit es in allen Modi lesbar bleibt */
#a11y-panel {
  position: fixed;
  bottom: 90px;
  left: 28px;
  z-index: 9992;
  width: 292px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  transform: translateY(10px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
  overflow: hidden;
  /* Kontrast-Modus darf Panel-Farben NICHT überschreiben */
  color: #111111 !important;
}
#a11y-panel.a11y-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Kontrast-Modus: Panel explizit hell halten */
html.a11y-contrast #a11y-panel {
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid #333 !important;
}
html.a11y-contrast #a11y-fab {
  background: #111111 !important;
  border: 2px solid #555 !important;
}

/* Header */
.a11y-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #ebebeb;
}
.a11y-hdr-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
}
.a11y-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.a11y-close-btn:hover { background: #f2f2f2; color: #000; }
.a11y-close-btn:focus-visible { outline: 2px solid #D92B2B; outline-offset: 2px; }

/* Karten-Grid */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

/* Einzelne Karte */
.a11y-card {
  background: none;
  border: 1.5px solid #e2e2e2;
  border-radius: 10px;
  padding: 11px 6px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #444;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  font-family: inherit;
  min-height: 82px;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.a11y-card:hover { border-color: #aaa; background: #f8f8f8; }
.a11y-card:focus-visible { outline: 2px solid #D92B2B; outline-offset: 2px; }
.a11y-card.a11y-active {
  background: #1f1f1f;
  border-color: #1f1f1f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Stufen-Punkte */
.a11y-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-top: 2px;
}
.a11y-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0d0d0;
  transition: background 0.15s;
}
.a11y-dot.a11y-dot-on              { background: #333; }
.a11y-card.a11y-active .a11y-dot   { background: rgba(255, 255, 255, 0.3); }
.a11y-card.a11y-active .a11y-dot.a11y-dot-on { background: #fff; }

/* Reset-Button */
.a11y-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 12px;
  background: #3a3a3a;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: inherit;
  transition: background 0.15s;
}
.a11y-reset-btn:hover { background: #1a1a1a; }
.a11y-reset-btn:focus-visible { outline: 2px solid #D92B2B; outline-offset: 2px; }

/* Mobile */
@media (max-width: 400px) {
  #a11y-panel { left: 8px; right: 8px; width: auto; bottom: 84px; }
  #a11y-fab   { left: 16px; bottom: 20px; }
}