/* Imployo, Barrierefreiheit Paket 1 (C3, 28.10.2026): nur CSS, kein Markup.
   Gehört zu seo-a11y.js. Wird NACH imployo.css geladen; die Regeln sind trotzdem so spezifisch gebaut
   ("body .imp ..."), dass die Ladereihenfolge keine Rolle spielt. Design bleibt unverändert, außer wo ein
   Kontrast korrigiert werden musste (dann nur der Farbwert, nie das Layout).
   Befund-Nummern (B2, B4 ...) verweisen auf berichte/03_barrierefreiheit.md.

   Abschnitte:
   1  Farbvariablen und Kontraste       (B2, B10, B11, B16, Platzhalter aus B1)
   2  Kopfzeile                         (B4 Klickfläche, B9 Kontrast über dunklen Abschnitten)
   3  Fokus und Einblendung             (B4 scroll-padding, B5 Fokus auf nicht eingeblendeten Elementen, Kontakt-Kacheln aus B1)
   4  Sprunglink                        (B3, per JS eingefügt)
   5  Bewegung                          (B8 prefers-reduced-motion, Pause-Knopf)
   6  Zielgrößen                        (B14)
   7  Hero-Karten und KI-Hinweis        (B11, 320 bis 360 px)
*/

/* ========== 1. Farbvariablen und Kontraste ========== */

/* Fließtext-Grau (war 240 3.8% 46.1% = #71717a). Auf getönten Flächen (#f6f2fd, #f1e7fc) lag er bei 4,0 bis 4,4:1,
   mit 43 % liegt er überall bei mindestens 4,55:1 (Weiß 5,43:1). Eine Stufe dunkler, Farbton unverändert. */
html body,
html body .imp {
  --muted-foreground: 240 3.8% 43%;
}

/* B2/B11: Fußzeile (Copyright, Impressum, Datenschutz, Überschriften), Beschriftungen und Kleingedrucktes.
   Vorher: Grau mit 50, 60 oder 70 % Deckkraft = 1,95 bis 2,7:1. Jetzt volles Fließtext-Grau (mindestens 4,5:1),
   Größe, Gewicht und Abstände bleiben. */
body .imp .text-muted-foreground\/50,
body .imp .text-muted-foreground\/60,
body .imp .text-muted-foreground\/70,
body .imp .text-muted-foreground\/80 {
  color: hsl(var(--muted-foreground));
}

/* B11: Hinweiszeilen unter Beispielansichten ("Beispielansicht ...", "Schematische Darstellung ...", KI-Hinweis)
   standen mit 11 px und 2,1 bis 2,7:1. Die Farbe steht teils auf dem violetten Schatten der Beispielansicht; dort reichte
   das Fließtext-Grau knapp nicht, deshalb ein dunkleres Grau (hier ca. 7:1). Ab 400 px Breite zusätzlich 12 px;
   darunter bleibt es bei 11 px, weil die Zeile sonst auf 360 px umbricht und die schwebende Karte 3 verdeckt. */
body .imp p.text-center.text-\[11px\] {
  color: hsl(240 3.8% 38%);
}
@media (min-width: 400px) {
  body .imp p.text-center.text-\[11px\] {
    font-size: 12px;
  }
}

/* B1 (nur der CSS-Teil): Platzhaltertext in den Formularfeldern, vorher 1,7:1. */
body .imp .placeholder\:text-muted-foreground\/40::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}
body .imp .placeholder\:text-muted-foreground\/40::-moz-placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

/* B10: Primärknopf und alle Flächen mit weißer Schrift auf dem Verlauf.
   Verlaufsende #b447eb -> #a943e2: weißer Text 4,58:1 statt 4,17:1 (Anfang #7c3bed bleibt, 5,67:1). Farbton bleibt Violett. */
body .imp .bg-gradient-primary {
  background-image: linear-gradient(135deg, #7c3bed, #a943e2);
}

/* B10: Überschriftenteile mit Farbverlauf (Großschrift, Soll 3:1).
   Verlaufsende #a87cf3 -> #9a6cf1: 3,63:1 auf Weiß und 3,29:1 auf dem getönten Heldenhintergrund (vorher 3,07 und 2,78). */
body .imp .text-gradient-primary {
  background-image: linear-gradient(135deg, #7c3bed, #9a6cf1);
}

/* B10: Ziffern 01 bis 04 (14 px, vorher 40 % Deckkraft = 1,88:1). 90 % Deckkraft = 4,6:1. Nur Text-Spans, keine Icons. */
body .imp span.text-primary\/40 {
  color: hsl(var(--primary) / .9);
}
/* B10: Kurzbeschriftungen "Schritt 1" (12 px, vorher 70 % = 3,3:1). Nur Text-Spans. */
body .imp span.text-primary\/70 {
  color: hsl(var(--primary) / .92);
}

/* B11/B16: weißer Text mit 30, 35 oder 40 % Deckkraft auf den dunklen TeamPlayer-Flächen ("Scrollen Sie weiter" 2,67:1,
   Kennzeichnung "TeamPlayer" 3,76:1). 50 % ergibt mindestens 5,1:1. Icons (svg) bleiben unverändert. */
body .imp .text-primary-foreground\/30:not(svg),
body .imp .text-primary-foreground\/35:not(svg),
body .imp .text-primary-foreground\/40:not(svg) {
  color: hsl(var(--primary-foreground) / .5);
}
/* B16: Kennzeichnung "Der TeamPlayer" (Violett auf fast Schwarz, 3,23:1): die vorhandene hellere Markenfarbe --primary-glow
   (5,0:1). Nur im dunklen Filmstrip-Intro. */
body .imp-filmstrip .imp-fs-intro span.text-primary {
  color: hsl(var(--primary-glow));
}

/* B16/B11: Grau in den Beispielansichten (Telefon, Portal; "Laufende Kampagnen", Adresszeile, Beschriftungen).
   #7b7490 -> #6b6480: 5,59:1 auf Weiß, 4,67:1 auf dem dunkelsten Tönungston (#f1e7fc). */
body .imp .pt {
  --pt-grau: #6b6480;
}
/* B16: Begrüßung im Portal-Nachbau ("Hallo, Julia", 21 bis 25 px fett, vorher 2,4:1). Großschrift braucht 3:1: #a39bb8 -> #857d9c (3,25 bis 3,52:1). */
body .imp .pt-gruss h4 span {
  color: #857d9c;
}
/* B16: weißes Kürzel im grünen Kreis des Beispielkunden ("SP", 11 px, vorher bis 3,62:1). Verlaufsende #4aa77d -> #348260 (4,66:1). */
body .imp .pt-logo-kreis {
  background: linear-gradient(135deg, #2f7d5b, #348260);
}
/* B16: aktiver Reiter im TeamPlayer-Nachbau (weiße 8,5-px-Schrift auf --tp-akzent, 4,4:1): Reiterfläche um 8 % abdunkeln (5,1:1). */
body .imp-filmstrip .imp-fs-tab.imp-an,
body .imp-teamplayer-kompakt .imp-fs-tab.imp-an {
  background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}
/* B11: Zeitleiste "Woche 1 bis 3" in der Kampagnen-Darstellung. Woche 2 und 3 waren per opacity .8 und .6 verblasst
   (weiße Schrift 2,86:1 und 1,81:1). Das Verblassen steckt jetzt nur noch in der Füllfarbe, die Schrift ist dunkel (4,9 bis 7,9:1). */
body .imp-kampagnen-ablauf-arbeitgeber .kaa-wochen div:nth-child(2) {
  opacity: 1;
  background: linear-gradient(135deg, rgba(124, 59, 237, .8), rgba(169, 67, 226, .8));
}
body .imp-kampagnen-ablauf-arbeitgeber .kaa-wochen div:nth-child(3) {
  opacity: 1;
  background: linear-gradient(135deg, rgba(124, 59, 237, .6), rgba(169, 67, 226, .6));
}
body .imp-kampagnen-ablauf-arbeitgeber .kaa-wochen div:nth-child(2) span,
body .imp-kampagnen-ablauf-arbeitgeber .kaa-wochen div:nth-child(3) span {
  color: #12062b;
}

/* ========== 2. Kopfzeile ========== */

/* B4 (Zusatzbefund): Die feste Kopfzeile ist samt unsichtbarem Mega-Menü rund 430 px hoch und fing im Ruhezustand
   Klicks auf die Inhalte darunter ab (z. B. die oberen Felder im Kontaktformular, Messung: elementFromPoint ergab
   den Kopf-Container). Nur die sichtbare Pille und die geöffneten Menüs bleiben anklickbar
   (.imp-kopf-mega.imp-offen und .imp-kopf-mobil.imp-offen setzen pointer-events:auto bereits selbst). */
body .imp-kopf-leiste {
  pointer-events: none;
}
body .imp-kopf-leiste .imp-kopf-pille {
  pointer-events: auto;
}

/* B9: Pille über dunklen oder getönten Abschnitten: fast deckend statt 80 %, damit der Navigationstext
   (14 px, Grau) nicht auf einem durchscheinenden dunklen Untergrund steht. Aussehen (Glasoptik, Weichzeichner) bleibt. */
body .imp .imp-kopf-pille {
  background-color: hsl(var(--background) / .96);
}

/* ========== 3. Fokus und Einblendung ========== */

/* B4: Beim Tabben nach oben landet ein Element sonst hinter der festen Kopfzeile. Der Wert wird von seo-a11y.js
   auf die echte Höhe der Kopfzeile gesetzt; dies ist der Rückfallwert (Pille 16 + 66 px, dazu Luft). */
html {
  scroll-padding-top: 6.5rem;
}

/* B5: Elemente, die den Fokus tragen, sind sofort sichtbar (die Einblendung per Scroll startet erst bei 15 % im Bild,
   der Browser scrollt beim Tabben aber nur minimal). */
body .imp .imp-reveal:focus-within,
body .imp .imp-reveal:has(:focus-visible) {
  opacity: 1;
  transform: none;
}

/* B1 (nur der CSS-Teil): Interesse-Kacheln im Kontaktformular hatten keinen sichtbaren Fokus (Checkbox ist sr-only). */
body .imp .peer:focus-visible ~ span {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Der feste Cookie-Banner (consent.js, #imp-consent) verdeckte beim Tabben Elemente am unteren Rand (Messung: FAQ-Knöpfe,
   Vanced-Link). Solange er sichtbar ist, scrollt der Browser Fokusziele darüber hinaus (WCAG 2.4.11). */
html:has(#imp-consent:not([hidden])) {
  scroll-padding-bottom: 14rem;
}
/* Am Seitenende (Impressum, Datenschutz im Fuß) kann nicht weiter gescrollt werden; solange der Banner offen ist,
   bekommt die Seite unten Luft, damit die letzten Links frei liegen. Mit der Entscheidung verschwindet das wieder. */
html:has(#imp-consent:not([hidden])) body {
  padding-bottom: 14rem;
}

/* Sprungziel main: programmatischer Fokus (tabindex=-1) braucht keinen Ring. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* ========== 4. Sprunglink (B3) ========== */

body a.seo-skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100001;
  transform: translateY(-200%);
  padding: 12px 18px;
  border: 2px solid #7c3bed;
  border-radius: 12px;
  background: #fff;
  color: #18181b;
  font: 600 15px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 10, 60, .25);
}
body a.seo-skip:focus,
body a.seo-skip:focus-visible {
  transform: none;
  outline: 3px solid #7c3bed;
  outline-offset: 2px;
}

/* ========== 5. Bewegung (B8) ========== */

/* Pause-Knopf am Bewerberweg (wird von seo-a11y.js eingefügt). */
.seo-pause-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
body .seo-pause.seo-pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid #a1a1aa;
  border-radius: 999px;
  background: #fff;
  color: #3f3f46;
  font: 600 13px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
body .seo-pause.seo-pause:hover {
  border-color: #7c3bed;
  color: #18181b;
}
body .seo-pause.seo-pause:focus-visible {
  outline: 2px solid #7c3bed;
  outline-offset: 2px;
}
body .seo-pause.seo-pause[aria-pressed="true"] {
  border-color: #7c3bed;
  background: #f1e7fc;
  color: #5b21b6;
}
body .seo-pause.seo-pause svg {
  flex-shrink: 0;
}
body .seo-pause.seo-pause .seo-pause-play {
  display: none;
}
body .seo-pause.seo-pause[aria-pressed="true"] .seo-pause-bars {
  display: none;
}
body .seo-pause.seo-pause[aria-pressed="true"] .seo-pause-play {
  display: block;
}

/* Alle Endlosanimationen aus imployo.css, die bei prefers-reduced-motion noch liefen
   (Messung 28.10.2026: CTA-Lichter auf 15 von 18 Seiten, Filmlinie, TeamPlayer-Balken, Schimmer, Logo-Band).
   Weitere, erst zur Laufzeit angelegte Endlosanimationen und Videos stoppt seo-a11y.js. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body .imp .imp-cta-orb-a,
  body .imp .imp-cta-orb-b,
  body .imp .imp-cta-glanz,
  body .imp .imp-fs-linie,
  body .imp .imp-fs-lauf,
  body .imp .imp-hs-balken span,
  body .imp .kaa-status i,
  body .imp .kf-schimmer,
  body .imp .kt-schimmer,
  body .imp .imp-logos-spur,
  body .imp .imp-tk-lauf,
  body .imp .tp-balken,
  body .imp [class*="animate-"] {
    animation: none !important;
  }
  body a.seo-skip {
    transition: none;
  }
}

/* ========== 6. Zielgrößen (B14) ========== */

/* Karussellpunkte am Bewerberweg: vorher 11 x 11 px (aktiv 30 x 11), Abstand 8 px, Trefferfläche nur per Pseudo-Element.
   Jetzt echte 24 x 24 px große Schaltflächen (aktiv 43 x 24); der sichtbare Punkt bleibt 11 px bzw. 30 x 11 px und
   wird über background-clip:content-box gezeichnet. Der Abstand der Punkte wächst dadurch von 8 auf 13 px (24-px-Raster). */
body .imp .bw-punkte {
  gap: 0;
}
body .imp .bw-punkte button {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 6.5px;
  border-radius: 12.5px;
  -webkit-background-clip: content-box;
  background-clip: content-box;
}
body .imp .bw-punkte button:after {
  inset: 0;
}
body .imp .bw-punkte button.imp-aktiv {
  width: 43px;
  border-radius: 12.5px;
  -webkit-background-clip: content-box; /* die Originalregel setzt background als Kurzschreibweise und setzt den Clip sonst zurück */
  background-clip: content-box;
}

/* Karussellpunkte der Karriereseiten-Vorschau: vorher 6 x 6 px (aktiv 32 x 6), Abstand 8 px.
   Jetzt 24 x 24 px (aktiv 50 x 24), sichtbarer Punkt unverändert. Die Klassen w-8 / w-1.5 wechselt das Skript selbst. */
body .imp button[data-ks-punkt] {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 9px;
  border-radius: 12px;
  -webkit-background-clip: content-box;
  background-clip: content-box;
}
body .imp button[data-ks-punkt].w-8 {
  width: 50px;
}
body .imp div:has(> button[data-ks-punkt]) {
  gap: 0;
}

/* ========== 7. Hero-Karten und KI-Hinweis (B11) ========== */

/* Der Hinweis "Bild mit KI erstellt." liegt im Foto, die schwebenden Karten liegen darüber und verdeckten ihn
   bei 320 bis 360 px (Messung: 950 bzw. 247 px² Überdeckung) sowie bei 320 px die Bildunterschrift (3.700 px²).
   Der Hinweis liegt jetzt über den Karten; Karte 1 rückt unter 400 px etwas nach unten, damit sie ihn nicht berührt;
   unter 360 px entfällt die dritte (rein illustrative) Karte, weil sie sonst die Bildunterschrift mit dem KI-Hinweis verdeckt. */
body .imp-hero-system .imp-hs-foto > span {
  z-index: 3;
}
@media (max-width: 399px) {
  body .imp-hero-system .imp-hs-k1 {
    top: calc(4% + 1.9rem);
  }
}
@media (max-width: 359px) {
  body .imp-hero-system .imp-hs-k3 {
    display: none;
  }
}