/* static/css/a11y_widget.css
   Scharr A11y Widget – modern, responsiv, isoliert
*/

/* -----------------------------
   State-Variablen (vom JS gesetzt)
------------------------------ */
:root {
  --scharra11y-font-scale: 1;
  --scharra11y-line-height: normal;

  /* Widget Design Tokens */
  --scharra11y-radius: 16px;
  --scharra11y-radius-sm: 12px;
  --scharra11y-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  --scharra11y-border: 1px solid rgba(0, 0, 0, 0.14);

  --scharra11y-bg: #ffffff;
  --scharra11y-fg: #111111;
  --scharra11y-muted: rgba(0, 0, 0, 0.65);

  --scharra11y-btn-bg: #ffffff;
  --scharra11y-btn-fg: #111111;
  --scharra11y-btn-border: 1px solid rgba(0, 0, 0, 0.18);

  --scharra11y-focus: 0 0 0 3px rgba(0, 0, 0, 0.28);

  /* Sizing */
  --scharra11y-gap: 10px;
  --scharra11y-pad: 12px;
  --scharra11y-pad-lg: 14px;
  --scharra11y-fab: 54px;
}

/* Zeilenabstand global (nur wenn im JS aktiviert) */
body {
  line-height: var(--scharra11y-line-height);
}

/* Fokus-Boost nur bei Aktivierung */
html[data-scharra11y-focus="1"] :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Kontrast-Modi (globaler Filter) */
html[data-scharra11y-contrast="high"] {
  filter: contrast(1.25);
}

html[data-scharra11y-contrast="invert"] {
  filter: invert(1) hue-rotate(180deg);
}

html[data-scharra11y-contrast="dark"] {
  color-scheme: dark;
  background: #0f1115;
}

html[data-scharra11y-contrast="dark"] body {
  background: #0f1115 !important;
  color: #e5e7eb !important;
}

html[data-scharra11y-contrast="dark"] a {
  color: #8fd3a8 !important;
}

html[data-scharra11y-contrast="dark"] a:hover,
html[data-scharra11y-contrast="dark"] a:focus-visible {
  color: #b7ebc8 !important;
}

html[data-scharra11y-contrast="dark"] h1,
html[data-scharra11y-contrast="dark"] h2,
html[data-scharra11y-contrast="dark"] h3,
html[data-scharra11y-contrast="dark"] h4,
html[data-scharra11y-contrast="dark"] h5,
html[data-scharra11y-contrast="dark"] h6,
html[data-scharra11y-contrast="dark"] strong,
html[data-scharra11y-contrast="dark"] b,
html[data-scharra11y-contrast="dark"] label,
html[data-scharra11y-contrast="dark"] th {
  color: #f8fafc !important;
}

html[data-scharra11y-contrast="dark"] header,
html[data-scharra11y-contrast="dark"] main,
html[data-scharra11y-contrast="dark"] section,
html[data-scharra11y-contrast="dark"] article,
html[data-scharra11y-contrast="dark"] aside,
html[data-scharra11y-contrast="dark"] nav,
html[data-scharra11y-contrast="dark"] footer,
html[data-scharra11y-contrast="dark"] form,
html[data-scharra11y-contrast="dark"] fieldset,
html[data-scharra11y-contrast="dark"] details,
html[data-scharra11y-contrast="dark"] table,
html[data-scharra11y-contrast="dark"] thead,
html[data-scharra11y-contrast="dark"] tbody,
html[data-scharra11y-contrast="dark"] tr,
html[data-scharra11y-contrast="dark"] td,
html[data-scharra11y-contrast="dark"] [class*="card"],
html[data-scharra11y-contrast="dark"] [class*="panel"],
html[data-scharra11y-contrast="dark"] [class*="box"],
html[data-scharra11y-contrast="dark"] [class*="sidebar"],
html[data-scharra11y-contrast="dark"] [class*="filter"],
html[data-scharra11y-contrast="dark"] [class*="facet"],
html[data-scharra11y-contrast="dark"] [class*="dropdown"],
html[data-scharra11y-contrast="dark"] [class*="menu"],
html[data-scharra11y-contrast="dark"] [class*="modal"],
html[data-scharra11y-contrast="dark"] [class*="drawer"] {
  background-color: #151a21 !important;
  color: #e5e7eb !important;
}

html[data-scharra11y-contrast="dark"] input,
html[data-scharra11y-contrast="dark"] select,
html[data-scharra11y-contrast="dark"] textarea,
html[data-scharra11y-contrast="dark"] button {
  background: #1b2330 !important;
  color: #f8fafc !important;
  border-color: rgba(226, 232, 240, 0.2) !important;
}

html[data-scharra11y-contrast="dark"] hr,
html[data-scharra11y-contrast="dark"] table,
html[data-scharra11y-contrast="dark"] th,
html[data-scharra11y-contrast="dark"] td,
html[data-scharra11y-contrast="dark"] fieldset,
html[data-scharra11y-contrast="dark"] input,
html[data-scharra11y-contrast="dark"] select,
html[data-scharra11y-contrast="dark"] textarea,
html[data-scharra11y-contrast="dark"] button {
  border-color: rgba(226, 232, 240, 0.18) !important;
}

html[data-scharra11y-contrast="dark"] img,
html[data-scharra11y-contrast="dark"] picture,
html[data-scharra11y-contrast="dark"] video,
html[data-scharra11y-contrast="dark"] canvas,
html[data-scharra11y-contrast="dark"] iframe,
html[data-scharra11y-contrast="dark"] svg {
  filter: none !important;
}

html[data-scharra11y-contrast="dark"] .scharra11y {
  --scharra11y-bg: #151a21;
  --scharra11y-fg: #f8fafc;
  --scharra11y-muted: rgba(226, 232, 240, 0.72);
  --scharra11y-border: 1px solid rgba(226, 232, 240, 0.16);
  --scharra11y-btn-bg: #1b2330;
  --scharra11y-btn-fg: #f8fafc;
  --scharra11y-btn-border: 1px solid rgba(226, 232, 240, 0.18);
  --scharra11y-focus: 0 0 0 3px rgba(143, 211, 168, 0.32);
}

html[data-scharra11y-contrast="dark"] .scharrcat-container {
  --cat-text: #f8fafc;
  --cat-muted: #d5dee9;
  --cat-brand: #f8fafc;
  --cat-brand-2: #f8fafc;
  --cat-border: rgba(226, 232, 240, 0.18);
  --cat-surface: #151a21;
  --cat-surface-2: #1b2330;
}

html[data-scharra11y-contrast="dark"] .scharrsr-container {
  --sr-text: #f8fafc;
  --sr-muted: #d5dee9;
  --sr-line: rgba(226, 232, 240, 0.18);
  --sr-brand: #8fd3a8;
  --sr-brand-2: #b7ebc8;
}

html[data-scharra11y-contrast="dark"] .pd-wrap {
  --pd-text: #f8fafc;
  --pd-muted: #d5dee9;
  --pd-muted-2: #c2cfdd;
  --pd-bg: #151a21;
  --pd-bg-soft: #1b2330;
  --pd-bg-soft-2: #202938;
  --pd-border: rgba(226, 232, 240, 0.18);
  --pd-border-strong: rgba(226, 232, 240, 0.24);
  --pd-accent: #8fd3a8;
  --pd-accent-strong: #b7ebc8;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich {
  --sn-accent: #8fd3a8;
  --sn-accent-dark: #d7f5e2;
  --sn-accent-soft: rgba(143, 211, 168, 0.12);
  --sn-surface: #1b2330;
  --sn-text: #f8fafc;
  --sn-muted: #d5dee9;
  --sn-muted-soft: #c2cfdd;
  --sn-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  color: var(--sn-text) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-fabric-section {
  background:
    radial-gradient(circle at top right, rgba(143, 211, 168, 0.14), transparent 28%),
    linear-gradient(180deg, #1b2330, #151a21) !important;
  box-shadow: var(--sn-shadow) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-kicker,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-badge,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-ico {
  background: rgba(143, 211, 168, 0.14) !important;
  color: var(--sn-accent) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-text,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-lead,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-faq-a,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-h4,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-specs li,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-caption,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-note {
  color: var(--sn-muted) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-h2,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-h3,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn h2,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn h3,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn h4,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-faq-q {
  color: var(--sn-text) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-link,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-link:hover,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-link:focus-visible {
  color: var(--sn-accent) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-btn {
  background: var(--sn-accent) !important;
  color: #0f1115 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-btn:hover,
html[data-scharra11y-contrast="dark"] .pd-longdesc.sn.sn-rich .sn-btn:focus-visible {
  background: #b7ebc8 !important;
  color: #0f1115 !important;
}

html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-inline-link,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-inline-link:hover,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-guide-link,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-guide-link:hover,
html[data-scharra11y-contrast="dark"] .scharrsr-inline-link,
html[data-scharra11y-contrast="dark"] .scharrsr-inline-link:hover {
  color: #f8fafc !important;
}

html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-guide-link-type {
  color: #f8fafc !important;
  border-color: rgba(226, 232, 240, 0.22) !important;
  background: rgba(226, 232, 240, 0.08) !important;
}

html[data-scharra11y-contrast="dark"] .pd-sale-price,
html[data-scharra11y-contrast="dark"] .pdcf-buybox-card .pd-sale-price,
html[data-scharra11y-contrast="dark"] .pdcf-buybox-shell .pd-sale-price,
html[data-scharra11y-contrast="dark"] .pd-crosssell__summary .pd-sale-price {
  color: #b7ebc8 !important;
}

html[data-scharra11y-contrast="dark"] .pd-uvp-row,
html[data-scharra11y-contrast="dark"] .pd-uvp-label,
html[data-scharra11y-contrast="dark"] .pd-uvp-price,
html[data-scharra11y-contrast="dark"] .pd-meta,
html[data-scharra11y-contrast="dark"] .pd-reviews-count,
html[data-scharra11y-contrast="dark"] .pd-reviews-cta-hint,
html[data-scharra11y-contrast="dark"] .pd-reviews-copy,
html[data-scharra11y-contrast="dark"] .pd-reviews-empty,
html[data-scharra11y-contrast="dark"] .pdcf-buybox-card .pdcf-price-note,
html[data-scharra11y-contrast="dark"] .pdcf-buybox-shell .pdcf-price-note,
html[data-scharra11y-contrast="dark"] .pd-crosssell__summary .pd-uvp-label,
html[data-scharra11y-contrast="dark"] .pd-crosssell__summary .pd-uvp-price,
html[data-scharra11y-contrast="dark"] .pd-crosssell__summary .pd-meta {
  color: #d5dee9 !important;
}

html[data-scharra11y-contrast="dark"] .scharrsr-prod-title,
html[data-scharra11y-contrast="dark"] .pd-also-viewed .scharrsr-prod-title,
html[data-scharra11y-contrast="dark"] .pd-also-viewed .scharrsr-title-link:hover .scharrsr-prod-title,
html[data-scharra11y-contrast="dark"] .pd-also-viewed .scharrsr-title-link:focus-visible .scharrsr-prod-title {
  color: #f8fafc !important;
}

html[data-scharra11y-contrast="dark"] .scharrsr-brand,
html[data-scharra11y-contrast="dark"] .scharrsr-uvp,
html[data-scharra11y-contrast="dark"] .scharrsr-uvp-label,
html[data-scharra11y-contrast="dark"] .scharrsr-strike {
  color: #d5dee9 !important;
}

html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-taxnote,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-taxnote-line,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-delivery,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-short,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-brand,
html[data-scharra11y-contrast="dark"] .scharrcat-container .scharrcat-guide-link-desc,
html[data-scharra11y-contrast="dark"] .scharrsr-taxnote,
html[data-scharra11y-contrast="dark"] .scharrsr-delivery,
html[data-scharra11y-contrast="dark"] .scharrsr-short,
html[data-scharra11y-contrast="dark"] .scharrsr-count,
html[data-scharra11y-contrast="dark"] .scharrsr-subtitle {
  color: #d5dee9 !important;
}

/* -----------------------------
   Widget Layout (isoliert)
------------------------------ */
.scharra11y {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
  top: auto;
  z-index: 9999;
  font-size: 16px; /* Unabhängig von body zoom, bleibt lesbar */
  line-height: 1.25;
  color: var(--scharra11y-fg);
  max-width: calc(100vw - 32px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.scharra11y[data-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.scharrbase-backtotop {
  right: 16px;
  bottom: calc(16px + var(--scharra11y-fab) + 16px);
}

/* Safe areas (iOS) */
@supports (padding: max(0px)) {
  .scharra11y {
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    top: auto;
  }

  .scharrbase-backtotop {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--scharra11y-fab) + 16px);
  }
}

/* Floating Button */
.scharra11y__fab {
  width: var(--scharra11y-fab);
  height: var(--scharra11y-fab);
  border-radius: 999px;
  border: var(--scharra11y-border);
  background: var(--scharra11y-bg);
  color: var(--scharra11y-fg);
  cursor: pointer;
  box-shadow: var(--scharra11y-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scharra11y__fab-icon{
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.scharra11y__fab:focus-visible {
  outline: none;
  box-shadow: var(--scharra11y-shadow), var(--scharra11y-focus);
}

/* Panel */
.scharra11y__panel {
  width: min(360px, calc(100vw - 32px));
  margin-bottom: 10px;
  border-radius: var(--scharra11y-radius);
  border: var(--scharra11y-border);
  background: var(--scharra11y-bg);
  box-shadow: var(--scharra11y-shadow);
  padding: var(--scharra11y-pad-lg);
}

/* Header */
.scharra11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.scharra11y__title {
  font-weight: 700;
  font-size: 1.05rem;
}

.scharra11y__close {
  border: 0;
  background: transparent;
  color: var(--scharra11y-fg);
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

.scharra11y__close:focus-visible {
  outline: none;
  box-shadow: var(--scharra11y-focus);
}

/* Status / Live region (visuell dezent) */
.scharra11y__status {
  font-size: 0.92rem;
  color: var(--scharra11y-muted);
  margin: 0 0 10px;
  min-height: 1.2em;
}

/* Groups */
.scharra11y__group {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.scharra11y__head + .scharra11y__status + .scharra11y__group{
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.scharra11y__label {
  font-weight: 650;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

/* Rows */
.scharra11y__row {
  display: flex;
  gap: var(--scharra11y-gap);
  align-items: center;
}

.scharra11y__row + .scharra11y__row {
  margin-top: 10px;
}

.scharra11y__row--wrap {
  flex-wrap: wrap;
}

.scharra11y__row--meta {
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--scharra11y-muted);
}

.scharra11y__meta strong {
  color: var(--scharra11y-fg);
  font-weight: 700;
}

/* Buttons inside panel */
.scharra11y__panel button {
  border: var(--scharra11y-btn-border);
  background: var(--scharra11y-btn-bg);
  color: var(--scharra11y-btn-fg);
  border-radius: var(--scharra11y-radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.scharra11y__panel button:hover {
  transform: translateY(-1px);
}

.scharra11y__panel button:active {
  transform: translateY(0px);
}

.scharra11y__panel button:focus-visible {
  outline: none;
  box-shadow: var(--scharra11y-focus);
}

/* pressed state hint */
.scharra11y__panel button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22);
}

/* Hint text */
.scharra11y__hint {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--scharra11y-muted);
}

/* Footer */
.scharra11y__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* kbd styling */
.scharra11y kbd {
  font: inherit;
  font-size: 0.92em;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
}

/* -----------------------------
   Mobile / small screens
------------------------------ */
@media (max-width: 480px) {
  .scharra11y {
    left: 12px;
    right: auto;
    bottom: 12px;
    top: auto;
  }

  @supports (padding: max(0px)) {
    .scharra11y {
      left: max(12px, env(safe-area-inset-left));
      right: auto;
      bottom: max(12px, env(safe-area-inset-bottom));
      top: auto;
    }
  }

  .scharrbase-backtotop {
    right: 12px;
    bottom: 12px;
  }

  .scharra11y__panel {
    width: min(360px, calc(100vw - 24px));
    padding: 12px;
  }

  .scharra11y__panel button {
    padding: 11px 12px;
  }

  .scharra11y__row--meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

}

/* -----------------------------
   Reduced motion
------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .scharra11y {
    transition: none;
  }

  .scharra11y__panel button {
    transition: none;
  }
  .scharra11y__panel button:hover {
    transform: none;
  }
}

/* -----------------------------
   Print: Widget nicht drucken
------------------------------ */
@media print {
  .scharra11y {
    display: none !important;
  }
}