/* MyRetinaGene - Accessibility Styles */

/* ── Screen-Reader Only ───────────────────────────────── */
.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; }

/* ── Accessibility Widget ─────────────────────────────── */
#a11yWidget { position: fixed; bottom: 20px; left: 20px; z-index: 9999; }

#a11yToggle {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--primary, #1a73e8); color: #fff; font-size: 1.4rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
#a11yToggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#a11yToggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#a11yPanel {
  position: absolute; bottom: 64px; left: 0;
  background: #fff; border-radius: 16px; width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); border: 1px solid #e2e8f0;
  overflow: hidden; max-height: 80vh; overflow-y: auto;
}

.a11y-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
  background: var(--primary, #1a73e8); color: #fff;
}
.a11y-panel-header strong { font-size: .95rem; }
.a11y-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; }

.a11y-panel-body { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.a11y-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border: 2px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .15s;
  font-size: .78rem; color: #475569; text-align: center; min-height: 80px;
  justify-content: center;
}
.a11y-item i { font-size: 1.2rem; color: #94a3b8; transition: color .15s; }
.a11y-item:hover { border-color: var(--primary, #1a73e8); background: #f8fafc; }
.a11y-item:hover i { color: var(--primary, #1a73e8); }
.a11y-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.a11y-item-active { border-color: var(--primary, #1a73e8); background: #eff6ff; }
.a11y-item-active i { color: var(--primary, #1a73e8); }
.a11y-val { font-weight: 800; color: var(--primary); }

.a11y-panel-footer { padding: 10px 14px; border-top: 1px solid #e2e8f0; text-align: center; }
.a11y-reset {
  background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 16px; cursor: pointer; font-size: .8rem; color: #64748b;
  transition: all .15s;
}
.a11y-reset:hover { background: #fee2e2; color: #dc2626; border-color: #fecdd3; }

/* ── Leselineal ───────────────────────────────────────── */
#a11yReadingGuide {
  position: fixed; left: 0; right: 0; height: 4px;
  background: rgba(26, 115, 232, .4); pointer-events: none; z-index: 9998;
  box-shadow: 0 8px 0 rgba(26, 115, 232, .06), 0 -8px 0 rgba(26, 115, 232, .06);
}

/* ═══════════════════════════════════════════════════════ */
/* Accessibility-Klassen (von Widget/System gesetzt)      */
/* ═══════════════════════════════════════════════════════ */

/* ── Schriftgrößen ────────────────────────────────────── */
.a11y-font-large { font-size: 120% !important; }
.a11y-font-large h1 { font-size: 2.4rem !important; }
.a11y-font-large h2 { font-size: 1.8rem !important; }
.a11y-font-large h3 { font-size: 1.4rem !important; }
.a11y-font-large p, .a11y-font-large li, .a11y-font-large td { font-size: 1.1rem !important; }
.a11y-font-large .btn { font-size: 1rem !important; padding: 12px 20px !important; }
.a11y-font-large input, .a11y-font-large select, .a11y-font-large textarea { font-size: 1.1rem !important; }

.a11y-font-xlarge { font-size: 140% !important; }
.a11y-font-xlarge h1 { font-size: 2.8rem !important; }
.a11y-font-xlarge h2 { font-size: 2.1rem !important; }
.a11y-font-xlarge h3 { font-size: 1.6rem !important; }
.a11y-font-xlarge p, .a11y-font-xlarge li, .a11y-font-xlarge td { font-size: 1.25rem !important; }
.a11y-font-xlarge .btn { font-size: 1.15rem !important; padding: 14px 24px !important; }
.a11y-font-xlarge input, .a11y-font-xlarge select, .a11y-font-xlarge textarea { font-size: 1.25rem !important; }

/* ── Hoher Kontrast ───────────────────────────────────── */
.a11y-high-contrast { --bg: #000 !important; --text: #fff !important; background: #000 !important; color: #fff !important; }
.a11y-high-contrast .ag-navbar, .a11y-high-contrast nav { background: #000 !important; border-bottom: 2px solid #fff !important; }
.a11y-high-contrast .hero-medical { background: #000 !important; }
.a11y-high-contrast .site-footer, .a11y-high-contrast footer { background: #000 !important; color: #fff !important; border-top: 2px solid #fff !important; }
.a11y-high-contrast a { color: #0066ff !important; text-decoration: underline !important; }
.a11y-high-contrast .btn, .a11y-high-contrast button { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; }
.a11y-high-contrast .btn:hover { background: #ffff00 !important; }
.a11y-high-contrast .card, .a11y-high-contrast .step-card { background: #111 !important; border-color: #fff !important; color: #fff !important; }
.a11y-high-contrast h1, .a11y-high-contrast h2, .a11y-high-contrast h3, .a11y-high-contrast h4 { color: #fff !important; }
.a11y-high-contrast p, .a11y-high-contrast li, .a11y-high-contrast span { color: #eee !important; }
.a11y-high-contrast input, .a11y-high-contrast select, .a11y-high-contrast textarea { background: #111 !important; color: #fff !important; border: 2px solid #fff !important; }
.a11y-high-contrast .disclaimer-box { background: #111 !important; border-color: #ffff00 !important; }
.a11y-high-contrast .disclaimer-content strong, .a11y-high-contrast .disclaimer-content p { color: #ffff00 !important; }
.a11y-high-contrast #a11yToggle { background: #fff !important; color: #000 !important; }
.a11y-high-contrast #a11yPanel { background: #111 !important; border-color: #fff !important; }
.a11y-high-contrast .a11y-item { background: #000 !important; border-color: #444 !important; color: #fff !important; }
.a11y-high-contrast .a11y-item-active { border-color: #ffff00 !important; }

/* ── Links hervorheben ────────────────────────────────── */
.a11y-link-highlight a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; }
.a11y-link-highlight a:hover { background: rgba(26,115,232,.15) !important; }

/* ── Großer Cursor ────────────────────────────────────── */
.a11y-big-cursor, .a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 2l18 14-10 2 6 12-4 2-6-12-4 10z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 5 2, auto !important; }

/* ── Bilder ausblenden ────────────────────────────────── */
.a11y-hide-images img:not(.a11y-keep) { opacity: .05 !important; }
.a11y-hide-images [style*="background-image"] { background-image: none !important; }

/* ── Zeilenabstand ────────────────────────────────────── */
.a11y-line-spacing p, .a11y-line-spacing li, .a11y-line-spacing td, .a11y-line-spacing div { line-height: 2 !important; }

/* ── Wortabstand ──────────────────────────────────────── */
.a11y-word-spacing p, .a11y-word-spacing li, .a11y-word-spacing td, .a11y-word-spacing span { word-spacing: .25em !important; letter-spacing: .03em !important; }

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

/* ── Dark Mode ────────────────────────────────────────── */
.a11y-dark-mode {
  background: #1a1a1a;
  color: #e8e8e8;
}

.a11y-dark-mode body {
  background: #1a1a1a;
  color: #e8e8e8;
}

.a11y-dark-mode .ag-navbar {
  background: #0d1117 !important;
  border-bottom: 1px solid #30363d;
}

.a11y-dark-mode .site-footer,
.a11y-dark-mode footer {
  background: #0d1117 !important;
  color: #8b949e !important;
  border-top: 1px solid #30363d;
}

.a11y-dark-mode .hero-medical {
  background: linear-gradient(135deg, #2d5a8c 0%, #1c3a5f 100%);
  color: #f0f6fc;
}

.a11y-dark-mode .page-content,
.a11y-dark-mode .container {
  background: #1a1a1a;
  color: #e8e8e8;
}

.a11y-dark-mode .step-card,
.a11y-dark-mode .card {
  background: #242424 !important;
  border-color: #333333 !important;
  color: #e8e8e8 !important;
}

.a11y-dark-mode h1,
.a11y-dark-mode h2,
.a11y-dark-mode h3,
.a11y-dark-mode h4,
.a11y-dark-mode h5,
.a11y-dark-mode h6 {
  color: #f0f6fc;
}

.a11y-dark-mode p,
.a11y-dark-mode li,
.a11y-dark-mode span {
  color: #e8e8e8;
}

.a11y-dark-mode a {
  color: #4a9eff;
}

.a11y-dark-mode a:hover {
  color: #79c0ff;
}

.a11y-dark-mode button,
.a11y-dark-mode .btn {
  background: #238636 !important;
  color: #f0f6fc !important;
  border: 1px solid #1f6feb !important;
}

.a11y-dark-mode button:hover,
.a11y-dark-mode .btn:hover {
  background: #2ea043 !important;
}

.a11y-dark-mode input,
.a11y-dark-mode select,
.a11y-dark-mode textarea {
  background: #0d1117 !important;
  color: #e8e8e8 !important;
  border: 1px solid #30363d !important;
}

.a11y-dark-mode #a11yToggle {
  background: #238636 !important;
  color: #f0f6fc !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.a11y-dark-mode #a11yPanel {
  background: #242424 !important;
  border-color: #333333 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  color: #e8e8e8;
}

.a11y-dark-mode .a11y-panel-header {
  background: #0d1117 !important;
  border-color: #333333 !important;
  color: #f0f6fc !important;
}

.a11y-dark-mode .a11y-item {
  background: #1a1a1a !important;
  border-color: #30363d !important;
  color: #e8e8e8 !important;
}

.a11y-dark-mode .a11y-item:hover {
  background: #161b22 !important;
  border-color: #4a9eff !important;
}

.a11y-dark-mode .a11y-item-active {
  background: #1f2d3d !important;
  border-color: #4a9eff !important;
}

.a11y-dark-mode .a11y-item i {
  color: #8b949e;
}

.a11y-dark-mode .a11y-item-active i {
  color: #4a9eff;
}

.a11y-dark-mode .a11y-reset {
  background: transparent !important;
  border: 1px solid #30363d !important;
  color: #8b949e !important;
}

.a11y-dark-mode .a11y-reset:hover {
  background: #1f2d3d !important;
  border-color: #4a9eff !important;
  color: #4a9eff !important;
}

.a11y-dark-mode .disclaimer-box {
  background: #1f2d3d !important;
  border-color: #388bfd !important;
}

.a11y-dark-mode .breadcrumbs a {
  color: #4a9eff;
}

.a11y-dark-mode .related-pages h3 {
  color: #4a9eff;
}

.a11y-dark-mode .related-pages a {
  color: #4a9eff;
}

/* ── Global Focus Indicators ──────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--primary, #1a73e8);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--primary, #1a73e8);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Enhanced visibility for all interactive elements in focus ── */
.ag-navbar a:focus-visible, .ag-navbar__menu a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.card a:focus-visible, .step-card a:focus-visible { outline: 3px solid var(--primary, #1a73e8); outline-offset: 2px; }

/* ── Skip Link (visible on focus) ───────────────────────── */
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 10000; background: var(--primary); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 0; }

/* ── Responsive Widget ────────────────────────────────── */
@media (max-width: 400px) {
  #a11yPanel { width: calc(100vw - 40px); left: -10px; }
}

/* === Erweiterte Schriftgroessen Mai 2026 === */
.a11y-font-xxlarge { font-size: 160% !important; }
.a11y-font-xxlarge h1 { font-size: 3.2rem !important; }
.a11y-font-xxlarge h2 { font-size: 2.4rem !important; }
.a11y-font-xxlarge h3 { font-size: 1.85rem !important; }
.a11y-font-xxlarge h4 { font-size: 1.5rem !important; }
.a11y-font-xxlarge p, .a11y-font-xxlarge li, .a11y-font-xxlarge td, .a11y-font-xxlarge label, .a11y-font-xxlarge a { font-size: 1.4rem !important; }
.a11y-font-xxlarge .btn, .a11y-font-xxlarge button { font-size: 1.3rem !important; padding: 16px 28px !important; }
.a11y-font-xxlarge input, .a11y-font-xxlarge select, .a11y-font-xxlarge textarea { font-size: 1.4rem !important; padding: 16px 18px !important; }

.a11y-font-huge { font-size: 180% !important; }
.a11y-font-huge h1 { font-size: 3.6rem !important; }
.a11y-font-huge h2 { font-size: 2.7rem !important; }
.a11y-font-huge h3 { font-size: 2.1rem !important; }
.a11y-font-huge h4 { font-size: 1.65rem !important; }
.a11y-font-huge p, .a11y-font-huge li, .a11y-font-huge td, .a11y-font-huge label, .a11y-font-huge a { font-size: 1.55rem !important; }
.a11y-font-huge .btn, .a11y-font-huge button { font-size: 1.45rem !important; padding: 18px 30px !important; }
.a11y-font-huge input, .a11y-font-huge select, .a11y-font-huge textarea { font-size: 1.55rem !important; padding: 18px 20px !important; }

.a11y-font-mega { font-size: 200% !important; }
.a11y-font-mega h1 { font-size: 4rem !important; }
.a11y-font-mega h2 { font-size: 3rem !important; }
.a11y-font-mega h3 { font-size: 2.3rem !important; }
.a11y-font-mega h4 { font-size: 1.85rem !important; }
.a11y-font-mega p, .a11y-font-mega li, .a11y-font-mega td, .a11y-font-mega label, .a11y-font-mega a { font-size: 1.7rem !important; }
.a11y-font-mega .btn, .a11y-font-mega button { font-size: 1.6rem !important; padding: 20px 32px !important; }
.a11y-font-mega input, .a11y-font-mega select, .a11y-font-mega textarea { font-size: 1.7rem !important; padding: 20px 22px !important; }

/* Force-Override für Inline-Styles auf H1/H2 (Hero-Compact etc.) */
body[class*="a11y-font-"] h1[style*="font-size"],
body[class*="a11y-font-"] h2[style*="font-size"],
body[class*="a11y-font-"] h3[style*="font-size"] { font-size: inherit !important; }

/* Sichtbare Aenderungs-Animation beim Klick */
body[class*="a11y-font-"] { transition: font-size .15s ease-out; }

/* Link-Hervorhebung auch fuer ag-navbar, faq summaries */
.a11y-link-highlight a, .a11y-link-highlight summary { outline: 1px dashed currentColor !important; outline-offset: 2px !important; }
.a11y-link-highlight .auto-link, .a11y-link-highlight .ag-navbar a { background: rgba(26,115,232,.12) !important; }

/* === Erweiterte High-Contrast-Coverage Mai 2026 === */
/* Alle hellen Bereiche und farbigen Header werden DUNKEL mit weißer Umrandung */

/* Hero-Sections */
.a11y-high-contrast .hero-medical,
.a11y-high-contrast .hero-compact,
.a11y-high-contrast section.hero-compact,
.a11y-high-contrast .auth-cta-section {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}
.a11y-high-contrast .hero-compact h1,
.a11y-high-contrast .hero-medical h1 { color: #fff !important; }
.a11y-high-contrast .hero-compact p,
.a11y-high-contrast .hero-medical p { color: #fff !important; opacity: 1 !important; }

/* Navbar */
.a11y-high-contrast .ag-navbar { background: #000 !important; border-bottom: 2px solid #fff !important; }
.a11y-high-contrast .ag-navbar a { color: #fff !important; border: 1px solid transparent !important; }
.a11y-high-contrast .ag-navbar a:hover, .a11y-high-contrast .ag-navbar a.active { background: #fff !important; color: #000 !important; }
.a11y-high-contrast .ag-navbar__burger { background: #fff !important; border: 2px solid #fff !important; }
.a11y-high-contrast .burger-line { background: #000 !important; }

/* Mobile Burger-Overlay im HC-Mode */
.a11y-high-contrast .ag-navbar__collapse.open {
  background: #000 !important;
  border-left: 2px solid #fff !important;
}
.a11y-high-contrast .ag-navbar__collapse.open .ag-navbar__menu a {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.a11y-high-contrast .ag-navbar__collapse.open .ag-navbar__login-btn {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

/* Karten allgemein - alle *-card-Varianten */
.a11y-high-contrast .news-card,
.a11y-high-contrast .report-card,
.a11y-high-contrast .auth-info-card,
.a11y-high-contrast .auth-form-card,
.a11y-high-contrast .step-card,
.a11y-high-contrast .info-card,
.a11y-high-contrast .stat-card,
.a11y-high-contrast .feature-card,
.a11y-high-contrast .gene-card,
.a11y-high-contrast .study-card,
.a11y-high-contrast .clinic-card,
.a11y-high-contrast .ag-pct,
.a11y-high-contrast [class*="-card"]:not([class*="card__"]) {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Karten-Header (farbige Streifen) auch dunkel mit weißer Trennlinie */
.a11y-high-contrast .report-card__header,
.a11y-high-contrast .news-card__top {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
}
.a11y-high-contrast .report-card__header h2,
.a11y-high-contrast .report-card__header span,
.a11y-high-contrast .news-card__title { color: #fff !important; }
.a11y-high-contrast .report-card__badge {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}
.a11y-high-contrast .news-card__tag {
  background: #fff !important;
  color: #000 !important;
}

/* Buttons - alle Varianten */
.a11y-high-contrast .btn,
.a11y-high-contrast .auth-form-submit,
.a11y-high-contrast .auth-cta-btn,
.a11y-high-contrast .news-filter-btn,
.a11y-high-contrast .rc-btn,
.a11y-high-contrast button:not(.a11y-item):not(.a11y-close):not(.a11y-reset):not(.ag-navbar__burger) {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
.a11y-high-contrast .btn:hover,
.a11y-high-contrast .auth-form-submit:hover,
.a11y-high-contrast .auth-cta-btn:hover,
.a11y-high-contrast .news-filter-btn:hover,
.a11y-high-contrast .rc-btn:hover {
  background: #ffff00 !important;
  color: #000 !important;
  border-color: #ffff00 !important;
}
.a11y-high-contrast .auth-cta-btn[aria-pressed="true"],
.a11y-high-contrast .news-filter-btn.is-active {
  background: #fff !important;
  color: #000 !important;
}

/* Form-Inputs */
.a11y-high-contrast input,
.a11y-high-contrast select,
.a11y-high-contrast textarea,
.a11y-high-contrast .form-input {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.a11y-high-contrast input:focus,
.a11y-high-contrast select:focus,
.a11y-high-contrast textarea:focus,
.a11y-high-contrast .form-input:focus {
  outline: 3px solid #ffff00 !important;
  border-color: #ffff00 !important;
}

/* OTP-Code-Block */
.a11y-high-contrast .otp-block { background: #000 !important; border: 2px dashed #fff !important; }
.a11y-high-contrast .otp-input { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; }

/* Faq, Details, Auth-Info */
.a11y-high-contrast details,
.a11y-high-contrast .auth-faq details {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.a11y-high-contrast summary { color: #fff !important; }

/* Trust-Bar, Boxen mit Tönen */
.a11y-high-contrast .auth-trust { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; }
.a11y-high-contrast .auth-trust span { color: #fff !important; }

/* News-Filter-Bar */
.a11y-high-contrast .news-filter-bar { background: #000 !important; border: 2px solid #fff !important; }
.a11y-high-contrast .news-filter-count { background: #fff !important; color: #000 !important; }

/* Breadcrumb */
.a11y-high-contrast .mrg-breadcrumb { color: #fff !important; }
.a11y-high-contrast .mrg-breadcrumb a { color: #fff !important; text-decoration: underline !important; }
.a11y-high-contrast .mrg-breadcrumb li:last-child,
.a11y-high-contrast .mrg-breadcrumb li:last-child span { color: #fff !important; }

/* Container Page-Body */
.a11y-high-contrast .container,
.a11y-high-contrast .ag-container,
.a11y-high-contrast .page-body { background: transparent !important; color: #fff !important; }

/* Section-Cards (Studien-Detailseiten) */
.a11y-high-contrast .section-card { background: #000 !important; border: 2px solid #fff !important; }

/* Field-Status (gruene/rote Bestaetigungen) lesbar machen */
.a11y-high-contrast .field-status.is-ok { color: #00ff00 !important; }
.a11y-high-contrast .field-status.is-error { color: #ffff00 !important; }
.a11y-high-contrast .auth-msg.is-ok { background: #000 !important; color: #00ff00 !important; border: 2px solid #00ff00 !important; }
.a11y-high-contrast .auth-msg.is-error { background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; }

/* Gradient-Texte oder Highlights */
.a11y-high-contrast .mrg-wordmark__bold { color: #fff !important; }
.a11y-high-contrast h2, .a11y-high-contrast h3 { color: #fff !important; }