/* Barrierefreiheit (WCAG 2.1 AA / EN 301 549) — 15.10.2026
   Wird nach stil.css/artikel.css geladen und überschreibt nur, was die
   Prüfung beanstandet hat. Gestaltung bleibt sonst unverändert. */

/* ---- Farben: Kontrast mind. 4,5:1 für Fließ- und Kleinschrift ---------- */
:root{
  --tx-3:#6b6b6b;            /* vorher #8b8b8b = 3,4:1 auf Weiß            */
  --kupfer-tx:#9c5a36;       /* Kupfer für Kleinschrift auf hellem Grund   */
  --kupfer-knopf:#a5613c;    /* Kupfer-Knopf mit weißer Schrift (4,8:1)    */
  --kupfer-knopf-2:#8c4f2e;  /* Hover/aktiv                                */
}
.knopf.haupt{background:var(--kupfer-knopf);box-shadow:0 12px 26px -14px rgba(165,97,60,.9)}
.knopf.haupt:hover{background:var(--kupfer-knopf-2)}
.drop-alle .kreis,.knopf.dunkel .kreis,.folge:hover .folge-nr,
.pj-karte:hover .pj-mehr .kreis,.sig-beleg:hover .sig-beleg-pf{background:var(--kupfer-knopf)}
.nav-links a.jetzt{color:var(--kupfer-tx)}
.nav.oben .nav-links a.jetzt{color:var(--kupfer-2)}
.a-krumen span{opacity:1}
.a-krumen a:hover{color:var(--kupfer-tx)}
.a-text a{color:var(--kupfer-tx)}
.dl-chip{color:#8c4f2e}
.dg-eyebrow{color:var(--kupfer-tx)!important}

/* ---- „Zum Inhalt springen“ ------------------------------------------- */
.skip-link{position:absolute;left:12px;top:-200px;z-index:10000;
  padding:12px 18px;border-radius:12px;background:#14233b;color:#fff;
  font:600 15px/1.2 'Inter',system-ui,sans-serif;letter-spacing:0;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);text-decoration:none}
.skip-link:focus{top:12px}
.skip-link+.skip-link:focus{top:62px}

/* Nur für Screenreader sichtbar */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-fokus:not(:focus):not(:focus-within){position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Sichtbarer Tastatur-Fokus (Doppelring: auf hell UND dunkel sichtbar) */
:focus-visible{outline:3px solid #14233b;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.knopf:focus-visible,.nav-cta:focus-visible{outline-offset:3px}
main:focus,#inhalt:focus{outline:none;box-shadow:none}
.sig-regler input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:6px}

/* ---- Dropdown „Wissen“ auch per Tastatur; Escape schließt ------------ */
.hat-drop:focus-within .drop{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);transition-delay:0s}
.hat-drop:focus-within>a::after{transform:rotate(225deg) translateY(-2px)}
.hat-drop.zu .drop{opacity:0!important;visibility:hidden!important}

/* ---- Überschriften, die nur der Gliederung wegen eine Stufe höher sind,
        sehen aus wie vorher -------------------------------------------- */
.fuss-spalte h2{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.08em;
  line-height:normal;text-transform:uppercase;color:var(--tx-3)}
.a-text .art-tldr :is(h2,h3),.a-text .checklist :is(h2,h3){margin:0 0 12px;font-size:11px;
  font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.a-text .banker-box :is(h2,h3){display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kupfer-2)}
.a-text .banker-box :is(h2,h3) svg{width:16px;height:16px;flex:none}

/* ---- Laufbänder halten bei Maus/Fokus an ------------------------------ */
.pb-lauf:hover,.partnerband:hover .pb-lauf,.partnerband:focus-within .pb-lauf{animation-play-state:paused}

/* ---- Schalter „Bewegung reduzieren“ (Fußzeile) ------------------------ */
.bf-ruhe{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;
  color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html.bf-ruhig *,html.bf-ruhig *::before,html.bf-ruhig *::after{
  scroll-behavior:auto!important}

/* Videosteuerung (Projekt-Seite May Power CRM) */
.lp-ctl button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#111318}
.lp-ctl button svg{pointer-events:none}
.lp-ctl .bf-cc{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;color:#fff}
.lp-ctl .bf-cc[aria-pressed="true"]{color:#111318}
video::cue{font-size:clamp(11px,1.6vw,19px);background:rgba(10,12,16,.82);color:#fff}

/* ---- Nachprüfung 15.10.: restliche Kontraste ------------------------- */
.fuss-b2b{opacity:1}
.preise .kicker{color:rgba(255,255,255,.6)}
.karte-mehr{color:var(--kupfer-tx)}
.a-text .tip-box b{color:var(--kupfer-tx)}
.may-buehne .may-chat .mc-send:not(.on){color:#a8a8a8}
.mp-funnel .mp-funnel-txt .mp-kicker{color:var(--kupfer-tx)!important}
.fuss-b2b a,a[data-mc-footer]{text-decoration:underline;text-underline-offset:2px}
.bf-ruhe{min-height:24px;display:inline-flex;align-items:center;vertical-align:middle}
/* Umbruch bei 320 px (Vergrößerung 400 %): lange Wörter trennen statt seitlich zu scrollen */
@media (max-width:400px){
  h1,h2,h3,.zeile-titel{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .zeile-kopf{gap:10px;padding-left:16px;padding-right:16px}
}
.zeile-titel{min-width:0}

/* Fachbeiträge auf dem Handy: Spalte darf schmaler werden als das längste Wort,
   Tabellen scrollen in ihrem Rahmen statt die ganze Seite zu verbreitern. */
@media(max-width:980px){ .a-satz{grid-template-columns:minmax(0,1fr)} }
.a-text{overflow-wrap:break-word}
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll:focus-visible{outline-offset:4px}