/* ============================================================
   Learn Battle: display settings ("Ansicht anpassen")
   Button + panel from js/a11y-settings.js and the modes
   switched by data-a11y-* attributes on <html>.
   ============================================================ */

/* ── BUTTON ── */
.a11y-wrap { display: inline-flex; align-items: center; }
.a11y-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid rgba(79,152,202,.45); background: rgba(255,255,255,.04); color: #eaf1fb; cursor: pointer; transition: background .2s, border-color .2s, color .2s; appearance: none; -webkit-appearance: none; }
.a11y-toggle:hover { border-color: #F4B400; color: #F4B400; }
.a11y-toggle[aria-expanded="true"] { background: #F4B400; border-color: #F4B400; color: #23395B; }
.a11y-toggle svg { width: 21px; height: 21px; }
body.lt .a11y-toggle { border-color: #d4dae6; background: rgba(35,57,91,.04); color: #23395B; }
body.lt .a11y-toggle:hover { border-color: #23395B; color: #23395B; }
body.lt .a11y-toggle[aria-expanded="true"] { background: #23395B; border-color: #23395B; color: #fff; }

/* ── PANEL ── (anchored to the sticky header) */
.a11y-panel { position: absolute; top: calc(100% + 8px); right: max(16px, calc((100% - 1280px) / 2 + 28px)); z-index: 130; width: min(23rem, calc(100vw - 32px)); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; background: #101d34; color: #eaf1fb; border: 1px solid rgba(79,152,202,.35); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.45; text-align: left; letter-spacing: normal; }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .25rem; }
.a11y-title { margin: 0; font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff; }
.a11y-close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-right: -.4rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.a11y-close:hover { background: rgba(255,255,255,.08); }
.a11y-intro { margin: 0 0 1rem; font-size: 0.875rem; color: #d3deee; }

.a11y-sizes { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.a11y-legend { padding: 0; margin-bottom: .5rem; font-size: 0.8125rem; font-weight: 700; color: #fff; }
.a11y-size-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a11y-size { position: relative; cursor: pointer; }
.a11y-size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a11y-size__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.5rem; padding: .4rem .25rem; border: 1.5px solid rgba(158,203,232,.4); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; text-align: center; }
.a11y-size__a { font-weight: 700; line-height: 1; }
.a11y-size--normal .a11y-size__a { font-size: 0.9375rem; }
.a11y-size--large .a11y-size__a { font-size: 1.1875rem; }
.a11y-size--xlarge .a11y-size__a { font-size: 1.4375rem; }
.a11y-size__label { font-size: 0.75rem; }
.a11y-size input:checked + .a11y-size__box { background: #F4B400; border-color: #F4B400; color: #23395B; }

.a11y-switches { display: flex; flex-direction: column; gap: 6px; }
.a11y-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: .65rem .75rem; border: 1.5px solid rgba(158,203,232,.3); border-radius: 12px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.a11y-switch:hover { background: rgba(255,255,255,.05); }
.a11y-switch[aria-pressed="true"] { border-color: #F4B400; background: rgba(244,180,0,.1); }
.a11y-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a11y-switch__name { font-size: 0.9375rem; font-weight: 700; }
.a11y-switch__hint { font-size: 0.8125rem; color: #c5d2e6; }
.a11y-switch__track { position: relative; flex-shrink: 0; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: #33445f; border: 1.5px solid #9ecbe8; transition: background .2s; }
.a11y-switch__knob { position: absolute; top: 50%; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transform: translateY(-50%); transition: left .2s; }
.a11y-switch[aria-pressed="true"] .a11y-switch__track { background: #F4B400; border-color: #F4B400; }
.a11y-switch[aria-pressed="true"] .a11y-switch__knob { left: calc(100% - 1.2rem); background: #23395B; }

.a11y-reset { display: block; width: 100%; margin-top: 1rem; padding: .7rem 1rem; border: 1.5px solid #9ecbe8; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.a11y-reset:hover { border-color: #F4B400; color: #F4B400; }
.a11y-note { margin: .75rem 0 0; font-size: 0.75rem; color: #c5d2e6; text-align: center; }
.a11y-more { display: block; margin-top: .5rem; font-size: 0.8125rem; font-weight: 700; color: #F4B400; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.a11y-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.a11y-toggle:focus-visible,
.a11y-panel :is(button, a):focus-visible,
.a11y-size input:focus-visible + .a11y-size__box { outline: 3px solid #F4B400; outline-offset: 2px; }

/* Light pages: white panel */
body.lt .a11y-panel { background: #fff; color: #23395B; border-color: #d4dae6; box-shadow: 0 24px 60px rgba(35,57,91,.2); }
body.lt :is(.a11y-title, .a11y-legend, .a11y-close) { color: #0F1E36; }
body.lt .a11y-close:hover { background: #eef2f8; }
body.lt :is(.a11y-intro, .a11y-switch__hint, .a11y-note) { color: #3c4d68; }
body.lt .a11y-size__box { border-color: #c3ccdb; background: #f7f8fb; color: #0F1E36; }
body.lt .a11y-size input:checked + .a11y-size__box { background: #23395B; border-color: #23395B; color: #fff; }
body.lt .a11y-switch { border-color: #d4dae6; color: #0F1E36; }
body.lt .a11y-switch:hover { background: #f7f8fb; }
body.lt .a11y-switch[aria-pressed="true"] { border-color: #23395B; background: #eef2f8; }
body.lt .a11y-switch__track { background: #dfe5ee; border-color: #56657f; }
body.lt .a11y-switch[aria-pressed="true"] .a11y-switch__track { background: #23395B; border-color: #23395B; }
body.lt .a11y-switch[aria-pressed="true"] .a11y-switch__knob { background: #fff; }
body.lt .a11y-reset { border-color: #23395B; color: #23395B; }
body.lt .a11y-reset:hover { background: #eef2f8; color: #23395B; }
body.lt .a11y-more { color: #23395B; }
body.lt .a11y-toggle:focus-visible,
body.lt .a11y-panel :is(button, a):focus-visible,
body.lt .a11y-size input:focus-visible + .a11y-size__box { outline-color: #23395B; }

/* Small screens: the rest of .header-actions lives in the drawer, only this button stays. */
@media (max-width: 900px) {
  .header-inner > .header-actions { display: flex; margin-left: auto; }
  .header-inner > .header-actions > :not(.a11y-wrap) { display: none; }
  .header-inner > .header-actions + .nav-toggle { margin-left: 0; }
  .a11y-toggle { width: 40px; height: 40px; border-radius: 10px; }
}
@media (max-width: 640px) {
  .a11y-panel { left: 12px; right: 12px; width: auto; }
}

/* ── TEXT SIZE ── (all font sizes are in rem, so this scales the whole page) */
html[data-a11y-text="large"] { font-size: 125%; }
html[data-a11y-text="xlarge"] { font-size: 150%; }
/* Long German words and URLs may break instead of pushing the page sideways. */
html:is([data-a11y-text], [data-a11y-spacing]) body { overflow-wrap: anywhere; }
html[data-a11y-text] :is(header, .a11y-panel, .mobile-nav) { overflow-wrap: normal; }
@media (max-width: 640px) {
  html[data-a11y-text] .header-inner .logo-text { display: none; }
}
/* Big text needs more room: switch to the drawer menu earlier, like on small screens. */
@media (max-width: 1440px) {
  html[data-a11y-text] .header-inner > nav { display: none; }
  html[data-a11y-text] .header-inner > .header-actions > :not(.a11y-wrap) { display: none; }
  html[data-a11y-text] .header-inner > .nav-toggle { display: flex; }
}
@media (max-width: 1760px) {
  html[data-a11y-text="xlarge"] .header-inner > nav { display: none; }
  html[data-a11y-text="xlarge"] .header-inner > .header-actions > :not(.a11y-wrap) { display: none; }
  html[data-a11y-text="xlarge"] .header-inner > .nav-toggle { display: flex; }
}
/* Size choices stack on narrow phones with big text. */
@media (max-width: 420px) {
  html[data-a11y-text] .a11y-size-row { grid-template-columns: 1fr; }
  html[data-a11y-text] .a11y-size__box { flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: 0; padding: .55rem .9rem; }
}

/* ── STOP ANIMATIONS ── (JS effects listen for lb:a11ychange, see js/motion.js and the cursor scripts) */
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html[data-a11y-motion="off"] { scroll-behavior: auto !important; }
html[data-a11y-motion="off"] .motion-reveal { opacity: 1 !important; translate: none !important; }
html[data-a11y-motion="off"] :is(#galaxy-fixed, #hero-stars, #nebula-fixed, #scroll-planet) { transform: none !important; }
html[data-a11y-motion="off"] .shooting-star { display: none; }
html[data-a11y-motion="off"] .uni-banner-track { animation: none !important; }
html[data-a11y-motion="off"] .uni-banner-marquee { overflow-x: auto; }
html[data-a11y-motion="off"] :is(#stardust-cursor, #lio-cursor-dust, #lio-cursor-trail, #lio-cursor-bubble, .planet-cursor) { display: none !important; }
html[data-a11y-motion="off"] body.planet-cursor-active,
html[data-a11y-motion="off"] body.planet-cursor-active :where(a, button, [role="button"], summary) { cursor: auto; }
html[data-a11y-motion="off"] body.planet-cursor-active :where(a, button, [role="button"], summary) { cursor: pointer; }

/* ── HIGH CONTRAST ── */
/* Dark theme: calm flat background, translucent text becomes solid. */
html[data-a11y-contrast="high"] body:not(.lt) { background: #0B1426; }
html[data-a11y-contrast="high"] :is(#nebula-fixed, .shooting-star, #hero-stars) { display: none; }
html[data-a11y-contrast="high"] #galaxy-fixed { opacity: .35; }
html[data-a11y-contrast="high"] header { background: #0B1426; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #9ecbe8; }
html[data-a11y-contrast="high"] body.lt header { background: #fff; border-bottom-color: #23395B; }
html[data-a11y-contrast="high"] :is(.alltag-p, .anki-p, .anki-step-body, .bullet-text, .card-p, .challenge-desc-dark, .community-p, .cookie-banner-text, .crew-p, .crew-pts, .crew-rank, .crew-sample-tag, .cta-p, .faq-answer, .faq-cta-inner p, .faq-hero-sub, .footer-brand p, .footer-col-links a, .footer-copy, .founder-cta-p, .hero-p, .lang-toggle a.inactive, .legal-hero p, .lerntyp-p, .lio-p, .live-battle-benefit-lt p, .live-battle-intro-lt, .mastery-name, .mastery-pct, .mastery-title, .mg-note, .mg-p, .mobile-nav-links a, .mode-desc, .moment-desc, .moment-time, .mv-sub, .nav-dropdown-menu a, .nav-dropdown-trigger, .newsletter-consent, .newsletter-label, .newsletter-p, .painpoint-item span:last-child, .painpoint-p, .partner-logo-dark, .progress-check span:last-child, .progress-stat-lab, .section-lt.bg-navy .section-head-p, .section-sub, .social-btn, .stat-label, .step-desc, .team-bio, .trust-badge p, .trust-header p, .uni-banner-item, .uni-banner-note, nav a) { color: #fff; }
html[data-a11y-contrast="high"] :is(.newsletter-input, .cookie-banner) { border-color: #9ecbe8; }
html[data-a11y-contrast="high"] .newsletter-input::placeholder { color: #c5d2e6; opacity: 1; }
html[data-a11y-contrast="high"] :is(.lang-toggle, .btn-quiz, .btn-outline, .btn-cta-outline, .btn-store.outline, .nav-toggle, .nav-close, .a11y-toggle, .social-btn) { border-color: #9ecbe8; }
html[data-a11y-contrast="high"] :is(.value-card, .mode-card, .step-card, .moment-card, .challenge-card-dark, .team-card, .faq-item) { border-color: rgba(158,203,232,.6); }
html[data-a11y-contrast="high"] .cookie-banner { background: #0B1426; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Light theme: pure white, darker grey text. Written after the dark list so it wins on light pages. */
html[data-a11y-contrast="high"] body.lt { background: #fff; color: #0F1E36; }
html[data-a11y-contrast="high"] :is(.af-desc-lt, .audience-card p, .benefit-text-desc, .billing-toggle button.inactive, .case-study-logo, .case-study-metric-label, .challenge-desc, .contact-consent, .cs-p, .faq-lt .faq-answer, .faq-noresults p, .faq-tab, .feature-card-overview-lt p, .feature-intro-lt, .founder-split-p, .hero-lt .hero-p, .hero-step-lt p, .ki-stat-label, .legal-contact-card p, .partners-sub, .pricing-institute-note p, .pricing-sub, .section-sub-lt, .stat-bar-label, .step-card-lt p, .story-desc, .timeline-step-desc, .timeline-step-list li, .trust-item, .usecase-desc-inst, .usecase-text-lt p, .value-desc-lt, body.lt .lang-toggle a.inactive, body.lt .nav-dropdown-menu a, body.lt .nav-dropdown-trigger, body.lt nav a, body.lt .mobile-nav-links a) { color: #1F2D45; }
html[data-a11y-contrast="high"] body.lt :is(.lang-toggle, .btn-quiz, .nav-toggle, .nav-close, .a11y-toggle, .contact-input, .contact-select, .contact-textarea, .faq-item) { border-color: #56657f; }
html[data-a11y-contrast="high"] body.lt ::placeholder { color: #56657f; opacity: 1; }

/* Active nav state: underline instead of colour only. */
html[data-a11y-contrast="high"] :is(nav a.active, .nav-dropdown-trigger.active, .footer-col-links a.active) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── HIGHLIGHT LINKS ── */
html[data-a11y-links] a:not(:is(.btn-primary, .btn-outline, .btn-app, .btn-quiz, .btn-store, .btn-cta, .btn-cta-outline, .logo, .skip-link, .social-btn, .lang-toggle a, .a11y-more)) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; font-weight: 700; }
html[data-a11y-links] a:is(.btn-primary, .btn-outline, .btn-app, .btn-quiz, .btn-store, .btn-cta, .btn-cta-outline, .social-btn) { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── TEXT SPACING ── (WCAG 1.4.12 values) */
html[data-a11y-spacing] body :is(p, li, dd, dt, blockquote, label, figcaption, td, th, summary) { line-height: 1.8 !important; letter-spacing: .05em !important; word-spacing: .1em !important; }
html[data-a11y-spacing] body p:has(+ p) { margin-bottom: 1.5em; }

/* ── PLAIN FONT ── (Orbitron and monospace labels become Montserrat) */
html[data-a11y-font="plain"] body,
html[data-a11y-font="plain"] body *:not(svg):not(svg *) { font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-style: normal !important; }

/* High contrast on light pages: darker gold in the logo lettering too */
html[data-a11y-contrast="high"] body.lt .logo-text span { color: #8A6200; }

/* Drawer with big text: wider, icon-only logo so the close button keeps its place */
html[data-a11y-text] .mobile-nav { width: min(420px, 92vw); }
html[data-a11y-text] .mobile-nav .logo-text { display: none; }
html[data-a11y-text] .mobile-nav-top .nav-close { flex-shrink: 0; }