/* =========================================================
   Gehring Media – Barrierefreiheits-Widget (gm-a11y)
   Für ja-so.com / phpWCMS. Selbstständig, ohne Abhängigkeiten.
   Marke: JASO-Gold #c2ae79
   ========================================================= */

:root {
  --gm-gold: #c2ae79;
  --gm-gold-dark: #a8945f;
  --gm-ink: #1c1c1a;
}

/* ---------- Skip-Link „Zum Inhalt springen" (WCAG 2.4.1) ---------- */
.gm-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  background: var(--gm-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.gm-skip:focus {
  transform: translateY(0);
  outline: 3px solid var(--gm-gold);
  outline-offset: 2px;
}
#gm-main { scroll-margin-top: 110px; } /* Ziel nicht unter dem Sticky-Header */
#gm-main:focus { outline: none; }

/* ---------- Auslöser-Button (unten rechts) ---------- */
#gm-a11y-btn {
  position: fixed;
  right: 34px;
  bottom: 210px; /* rechts, mit Abstand ÜBER der Telefon/Mail-Gruppe */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gm-gold);
  color: var(--gm-ink);
  cursor: pointer;
  z-index: 99990;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
#gm-a11y-btn:hover { background: var(--gm-gold-dark); transform: scale(1.06); }
#gm-a11y-btn svg { width: 24px; height: 24px; }

/* ---------- Panel ---------- */
#gm-a11y-panel {
  position: fixed;
  right: 24px;
  bottom: 270px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background: #fff;
  color: var(--gm-ink);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  padding: 22px 20px;
  z-index: 99991;
  font-family: inherit;
  display: none;
}
#gm-a11y-panel.gm-open { display: block; }

#gm-a11y-panel h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--gm-ink);
  line-height: 1.2;
}

#gm-a11y-panel .gm-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6a6a66;
  margin: 4px 0 8px;
}

/* Schriftgröße-Zeile */
.gm-font-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}
.gm-font-row button {
  width: 52px;
  height: 46px;
  border: 2px solid var(--gm-gold);
  background: #fff;
  color: var(--gm-ink);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.gm-font-row button:hover { background: #f4efe3; }
.gm-font-row .gm-font-val {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

/* Umschalt-Zeilen */
.gm-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid #e3ddcf;
  background: #fff;
  border-radius: 10px;
  padding: 13px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-ink);
  text-align: left;
  transition: border-color .2s, background .2s;
}
.gm-toggle:hover { border-color: var(--gm-gold); }
.gm-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.gm-toggle .gm-state {
  margin-left: auto;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d5d0c4;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.gm-toggle .gm-state::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.gm-toggle[aria-pressed="true"] { border-color: var(--gm-gold); background: #faf6ec; }
.gm-toggle[aria-pressed="true"] .gm-state { background: var(--gm-gold); }
.gm-toggle[aria-pressed="true"] .gm-state::after { left: 18px; }

/* Reset */
#gm-a11y-reset {
  width: 100%;
  border: none;
  background: var(--gm-ink);
  color: #fff;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background .2s;
}
#gm-a11y-reset:hover { background: #000; }

#gm-a11y-panel .gm-note {
  font-size: 12px;
  color: #8a8a86;
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.4;
}

/* Sichtbarer Fokus im Widget */
#gm-a11y-btn:focus-visible,
#gm-a11y-panel button:focus-visible {
  outline: 3px solid var(--gm-ink);
  outline-offset: 2px;
}

/* =========================================================
   FUNKTIONS-MODI (per <html>-Klasse)
   ========================================================= */

/* --- Links hervorheben --- */
html.gm-hl a:not(#gm-a11y-btn):not(.gm-toggle) {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  background: #fff2a8 !important;
  color: #1c1c1a !important;
  outline: 1px solid #1c1c1a !important;
}

/* --- Hoher Kontrast: konsequent Schwarz-auf-Weiss --- */
/* 1) Alle Flaechen weiss, Hintergrundbilder raus */
html.gm-hc,
html.gm-hc body,
html.gm-hc [class*="bg"],
html.gm-hc [style*="background"],
html.gm-hc section,
html.gm-hc .container,
html.gm-hc .single-service-area-one,
html.gm-hc .single-working-prcess-one .inner,
html.gm-hc .sigle-testimonials-one,
html.gm-hc .single-left-banner-swiper-start,
html.gm-hc .rts-footer-area,
html.gm-hc .side-bar {
  background-image: none !important;
  background-color: #fff !important;
}
/* 2) Aller Text schwarz – auch Outline-Zahlen ("04") und Marquee */
html.gm-hc * {
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}
/* 3) Links deutlich */
html.gm-hc a { color: #00408f !important; text-decoration: underline !important; }
html.gm-hc a:hover { color: #0b57d0 !important; }
/* 4) Buttons: schwarz mit weisser Schrift */
html.gm-hc .rts-btn,
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus) {
  background: #000 !important;
  border: 2px solid #000 !important;
}
html.gm-hc .rts-btn,
html.gm-hc .rts-btn *,
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus),
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus) * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* 5) Bilder unangetastet lassen */
html.gm-hc img { filter: none !important; }

/* 5b) Karten mit dunklem Hover-Overlay: Overlay solide schwarz, Text weiss */
html.gm-hc .single-working-prcess-one .inner::after,
html.gm-hc .single-service-area-one::after,
html.gm-hc .single-service-style-four::after,
html.gm-hc .signgle-service-list-two::after,
html.gm-hc .single-product-one::after {
  background-image: none !important;
  background: #000 !important;
}
html.gm-hc .single-working-prcess-one:hover *,
html.gm-hc .single-working-prcess-one.active *,
html.gm-hc .single-service-area-one:hover *,
html.gm-hc .single-service-area-one.active *,
html.gm-hc .single-service-style-four:hover *,
html.gm-hc .signgle-service-list-two:hover *,
html.gm-hc .single-product-one:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html.gm-hc .single-service-area-one:hover .icon svg path { fill: #fff !important; }

/* 6) Widget im HC-Modus normal darstellen */
html.gm-hc #gm-a11y-btn { background: var(--gm-gold) !important; }
html.gm-hc #gm-a11y-btn, html.gm-hc #gm-a11y-btn * { color: var(--gm-ink) !important; -webkit-text-fill-color: var(--gm-ink) !important; }
html.gm-hc #gm-a11y-panel { background: #fff !important; }
html.gm-hc #gm-a11y-reset { background: var(--gm-ink) !important; }
html.gm-hc #gm-a11y-reset, html.gm-hc #gm-a11y-reset * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.gm-hc .gm-toggle[aria-pressed="true"] .gm-state { background: var(--gm-gold) !important; }

/* --- Dunkelmodus (klassische Invert-Technik) --- */
html.gm-dark {
  background: #fff;
  filter: invert(1) hue-rotate(180deg);
}
html.gm-dark img,
html.gm-dark video,
html.gm-dark iframe,
html.gm-dark .bg_image,
html.gm-dark [class*="bg_image"],
html.gm-dark .logo img,
html.gm-dark .single-brand img {
  filter: invert(1) hue-rotate(180deg);
}
/* Widget selbst zurueck-invertieren, damit es normal aussieht */
html.gm-dark #gm-a11y-btn,
html.gm-dark #gm-a11y-panel,
html.gm-dark #gm-mask {
  filter: invert(1) hue-rotate(180deg);
}

/* --- Lesemaske --- */
#gm-mask {
  position: fixed;
  inset: 0;
  z-index: 99980;
  pointer-events: none;
  display: none;
}
#gm-mask.gm-on { display: block; }
#gm-mask .gm-band {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, .55);
}
#gm-mask .gm-top { top: 0; }
#gm-mask .gm-bottom { bottom: 0; }

@media (max-width: 575px) {
  #gm-a11y-panel { right: 12px; bottom: 150px; }
  #gm-a11y-btn { right: 20px; bottom: 90px; }
  .progress-wrap { right: 20px !important; }
}