/* ══════════════════════════════════════════════════════════════════════
   JP Webstudio — Barrierefreiheits-Korrekturen (WCAG 2.1 AA, Kontrast)
   ──────────────────────────────────────────────────────────────────────
   WARUM DIESE DATEI:
   --gold (#c8a84b) ist auf dunklem Grund gut lesbar (5,42:1), erreicht auf
   den hellen Flaechen (--cream #fafaf8 / --cream-dark #f4f3ef) aber nur
   2,07-2,19:1. WCAG AA verlangt 4,5:1 (kleine Schrift) bzw. 3:1 (ab 24px).

   WARUM ZULETZT GELADEN:
   Die Seiten definieren diese Klassen in ihren eigenen <style>-Bloecken,
   die NACH main.css stehen. Bei gleicher Spezifitaet gewinnt die spaeter
   geladene Regel — darum wird diese Datei als letztes Stylesheet
   eingebunden (direkt vor </head>).

   Enthalten sind nur Klassen, die site-weit ausschliesslich auf HELLEN
   Flaechen vorkommen (geprueft). Klassen mit gemischtem Kontext
   (z. B. .section-eyebrow) werden pro Element im HTML korrigiert.
   ══════════════════════════════════════════════════════════════════════ */

/* Die Selektoren sind mit `body` praefigiert (Spezifitaet 0,1,1).
   Grund: einige Seiten definieren diese Klassen in einem <style>-Block im
   BODY — der laedt nach dem <head> und wuerde eine reine Klassenregel (0,1,0)
   ueberschreiben. 0,1,1 gewinnt unabhaengig von der Quell-Reihenfolge. */

/* Kicker/Eyebrow-Label auf hellen Sektionen: 2,19:1 -> 5,14:1 */
body .mobile-quick-kicker,
body .mobile-project-kicker,
body .cluster-kicker,
body .modal-eyebrow {
  color: var(--gold-ink);
}

/* .pillar-label steht auf --cream-dark (2,07:1 -> 4,83:1).
   .pillar-card-highlight .pillar-label (0,2,0) hat hoehere Spezifitaet und
   bleibt damit bewusst cream — dort ist die Karte dunkel. */
body .pillar-label {
  color: var(--gold-ink);
}

/* ══ Heading-Reihenfolge (WCAG 1.3.1) ══
   Diese Ueberschriften folgten direkt auf ein <h2> und waren als <h4>
   ausgezeichnet (Sprung h2 -> h4). Sie sind jetzt <h3>; die folgenden Regeln
   erhalten das bisherige Aussehen exakt (vorher: .form-success h4 /
   .n8n-point-text h4). Spezifitaet 0,1,2 schlaegt die generischen h3-Regeln. */
body .form-success h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--forest-deep);
  margin-bottom: 8px;
}
body .n8n-point-text h3 {
  color: var(--cream);
  font-size: 16px;
  margin-bottom: 4px;
}

/* ══ Hover-Effekt aus Inline-Handlern nach CSS ══
   Ersetzt 296 inline onmouseover/onmouseout-Attribute
   ("this.style.borderColor=…") verlustfrei. Weniger Inline-Code,
   gleiche Optik, und der Effekt funktioniert auch ohne JavaScript. */
body .jp-hover-gold {
  transition: border-color 0.2s ease;
}
body .jp-hover-gold:hover,
body .jp-hover-gold:focus-visible {
  border-color: #c8a84b;
}
body .jp-hover-badge-light { transition: border-color .2s ease, box-shadow .2s ease; }
body .jp-hover-badge-light:hover, body .jp-hover-badge-light:focus-visible {
  border-color: rgba(200,168,75,0.5); box-shadow: 0 4px 20px rgba(200,168,75,0.12);
}
body .jp-hover-badge-dark { transition: border-color .2s ease, background .2s ease; }
body .jp-hover-badge-dark:hover, body .jp-hover-badge-dark:focus-visible {
  border-color: rgba(200,168,75,0.5); background: rgba(250,250,248,0.1);
}
body .jp-hover-pill { transition: border-color .2s ease, background .2s ease; }
body .jp-hover-pill:hover, body .jp-hover-pill:focus-visible {
  border-color: #c8a84b; background: rgba(200,168,75,0.08);
}
body .jp-hover-fade { transition: opacity .2s ease; }
body .jp-hover-fade:hover, body .jp-hover-fade:focus-visible { opacity: 1; }
body .jp-hover-cta { transition: background .2s ease, transform .2s ease; }
body .jp-hover-cta:hover, body .jp-hover-cta:focus-visible {
  background: #d4b45a; transform: translateY(-2px);
}

/* Nur fuer Screenreader: gibt Stern-Bewertungen einen Textwert.
   Die Sterne selbst sind aria-hidden (dekoratives Icon) — so bleibt das
   goldene Design erhalten und der Wert ist trotzdem zugaenglich. */
.jp-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;
}
