/* =========================================================
   Gehring Media – Barrierefreiheits-Widget (gm-a11y)
   Für cadeck.de (Relaunch 2026). Selbstständig, ohne Abhängigkeiten.
   Marke: BvR-Blau #004881 / Hellblau #00AEEA
   ========================================================= */

:root {
  --gm-gold: #00aeea;
  --gm-gold-dark: #0090c4;
  --gm-ink: #0b1f3a;
}

/* ---------- 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: 24px;
  bottom: 84px; /* über dem Back-to-top-Button */
  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: 144px;
  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 .topbar, html.gm-hc .site-header, html.gm-hc .site-footer, html.gm-hc .cta-band,
html.gm-hc .page-header, html.gm-hc .counter-section, html.gm-hc .hero .swiper-slide,
html.gm-hc .service-card, html.gm-hc .card-feature, html.gm-hc .case-card, html.gm-hc .testimonial,
html.gm-hc .news-card, html.gm-hc .sidebar .widget, html.gm-hc .dropdown-menu, html.gm-hc .offcanvas,
html.gm-hc .accordion-button, html.gm-hc .map-placeholder, html.gm-hc .upload-box, html.gm-hc .step .no {
  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 .btn,
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus):not(.accordion-button):not(.navbar-toggler):not(.btn-close):not(.nav-link) {
  background: #000 !important;
  border: 2px solid #000 !important;
}
html.gm-hc .btn,
html.gm-hc .btn *,
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus):not(.accordion-button):not(.navbar-toggler):not(.btn-close):not(.nav-link),
html.gm-hc button:not(.gm-toggle):not(#gm-a11y-reset):not(#gm-a11y-btn):not(#gm-font-minus):not(#gm-font-plus):not(.accordion-button):not(.navbar-toggler):not(.btn-close):not(.nav-link) * {
  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 .hero .slide-bg::after, html.gm-hc .page-header .bg::after, html.gm-hc .cta-band::after,
html.gm-hc .industry-card::after, html.gm-hc .service-card::before {
  background-image: none !important;
  background: #000 !important;
}
html.gm-hc .hero .slide-content *, html.gm-hc .page-header .container *, html.gm-hc .cta-band .container *,
html.gm-hc .industry-card .body *, html.gm-hc .service-card:hover * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Hero/Page-Header/CTA: Bild raus, Overlay solide schwarz → weisser Text darauf */
html.gm-hc .hero .slide-bg, html.gm-hc .page-header .bg, html.gm-hc .cta-band .bg { background-image: none !important; background-color: #000 !important; }
html.gm-hc .text-outline { -webkit-text-stroke: 0 !important; }
html.gm-hc .hero .text-outline, html.gm-hc .page-header .text-outline { -webkit-text-fill-color: #fff !important; }
html.gm-hc .industry-card img { filter: grayscale(1) contrast(1.2) !important; }
html.gm-hc .swiper-pagination-bullet { background: #000 !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 .hero .slide-bg,
html.gm-dark .page-header .bg,
html.gm-dark .cta-band .bg,
html.gm-dark .navbar-brand img,
html.gm-dark .site-footer .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: 144px; }
  #gm-a11y-btn { right: 24px; bottom: 84px; }
}

/* Blaue CTA-Kachel im Branchen-Grid ebenfalls Schwarz-auf-Weiss */
html.gm-hc .industry-card.is-cta { background: #fff !important; border: 2px solid #000; }
html.gm-hc .industry-card.is-cta * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
html.gm-hc .industry-card.is-cta .btn, html.gm-hc .industry-card.is-cta .btn * { background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }