/* Barrierefreiheit: Skip-Link, Fokus, Einstellungs-Knopf/-Fenster und die Darstellungs-Modi (js/barrierefrei.js) */

/* Sprunglink: erscheint beim ersten Tab */
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:3000;padding:.7rem 1.2rem;border-radius:0 0 .8rem .8rem;background:#073f69;color:#fff!important;font-weight:800;text-decoration:none;box-shadow:0 .5rem 1.4rem rgba(0,0,0,.3);transition:top .2s}
.skip-link:focus{top:0;outline:3px solid #d8bd78;outline-offset:2px}
main#inhalt:focus{outline:none}

/* Sichtbarer Fokus überall (Tastatur) */
:focus-visible{outline:3px solid #0a6db5;outline-offset:3px}
.sec.dark :focus-visible,.inner-hero :focus-visible,footer.fuss :focus-visible,.site-header.bg-black :focus-visible{outline-color:#d8bd78}

/* Knopf unten links */
.a11y-knopf{position:fixed;left:1rem;bottom:1rem;z-index:1900;display:grid;place-items:center;width:3.2rem;height:3.2rem;padding:0;border:2px solid #fff;border-radius:50%;background:#073f69;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 .5rem 1.4rem rgba(0,0,0,.32);transition:transform .2s,background .2s}
.a11y-knopf:hover{transform:scale(1.08);background:#0a5a94}
.a11y-knopf:focus-visible{outline:3px solid #d8bd78;outline-offset:3px}

/* Fenster */
.a11y-fenster{position:fixed;left:1rem;bottom:5rem;z-index:1901;width:min(22rem,calc(100vw - 2rem));max-height:calc(100dvh - 7rem);overflow:auto;padding:1rem 1.1rem;border:1px solid #cdd9e2;border-radius:1.1rem;background:#fff;color:#111820;box-shadow:0 1.4rem 3.2rem rgba(7,30,50,.32);font-size:16px;line-height:1.4}
.a11y-fenster[hidden]{display:none}
.a11y-fenster *{font-family:inherit}
.a11y-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.a11y-kopf h2{margin:0;font:700 1.5rem/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#073f69}
.a11y-zu{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid #cdd9e2;border-radius:50%;background:#fff;color:#111820;cursor:pointer}
.a11y-gruppe{display:grid;gap:.45rem;padding:.7rem 0;border-top:1px solid #e3ebf1}
.a11y-gruppe>b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#4a6272}
.a11y-reihe{display:grid;grid-template-columns:3rem 1fr 3rem;gap:.5rem;align-items:center}
.a11y-wert{text-align:center;font-weight:800}
.a11y-fenster button{min-height:2.6rem;padding:.4rem .8rem;border:2px solid #cdd9e2;border-radius:.7rem;background:#f5f9fc;color:#111820;font-weight:700;font-size:.92rem;cursor:pointer;text-align:left}
.a11y-fenster button:hover:not(:disabled){border-color:#0a5a94}
.a11y-fenster button:disabled{opacity:.4;cursor:not-allowed}
.a11y-fenster button[aria-pressed="true"]{border-color:#073f69;background:#073f69;color:#fff}
.a11y-reihe button{text-align:center;font-size:1.05rem}
.a11y-raster{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.a11y-raster button{display:flex;align-items:center;gap:.5rem}
.a11y-muster{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid #8aa0b0;background:#fff}
.m-kontrast .a11y-muster{background:#000;border-color:#ff0}.m-grau .a11y-muster{background:linear-gradient(90deg,#fff 50%,#777 50%)}
.a11y-fuss p{margin:.5rem 0 0;font-size:.76rem;color:#4a6272}
.a11y-reset{width:100%;text-align:center!important}

/* ── Schriftgröße (alle Größen in rem skalieren mit) ── */
html.a11y-t1{font-size:115%}
html.a11y-t2{font-size:130%}
html.a11y-t3{font-size:150%}
html.a11y-t1 .a11y-fenster,html.a11y-t2 .a11y-fenster,html.a11y-t3 .a11y-fenster{font-size:16px}

/* ── Farbmodi ── */
html.a11y-grau{filter:grayscale(1)}


/* Hoher Kontrast: schwarz, weiß, gelbe Links */
html.a11y-kontrast,html.a11y-kontrast body{background:#000!important;color:#fff!important}
html.a11y-kontrast *:not(img):not(video):not(iframe):not(svg):not(path):not(.bi){background-color:#000!important;background-image:none!important;color:#fff!important;border-color:#fff!important;box-shadow:none!important;text-shadow:none!important}
html.a11y-kontrast *::before,html.a11y-kontrast *::after{background-image:none!important;text-shadow:none!important}
html.a11y-kontrast a,html.a11y-kontrast a *{color:#ff0!important;text-decoration:underline!important}
html.a11y-kontrast :is(button,.btn,input,select,textarea,.chip,.link-knopf){border:2px solid #fff!important}
html.a11y-kontrast :is(button,.btn):hover,html.a11y-kontrast a:hover{background-color:#222!important}
html.a11y-kontrast :focus-visible{outline:4px solid #ff0!important;outline-offset:3px}
html.a11y-kontrast .a11y-fenster button[aria-pressed="true"]{background-color:#ff0!important;color:#000!important}
html.a11y-kontrast .a11y-knopf{border-color:#ff0!important}
html.a11y-kontrast img{opacity:1}

/* ── Hilfen ── */
html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:.14em!important;text-underline-offset:.2em!important;font-weight:800!important}
/* Gut lesbare Schrift: nur Fließtext und Bedienelemente – Überschriften und Hero-Titel bleiben unverändert, damit nichts abgeschnitten wird */
html.a11y-lesbar :is(p,li,dd,dt,td,th,label,small,summary,figcaption,blockquote,button,input,select,textarea,.nav-link,.dropdown-item):not(.bi):not([class^="bi-"]),html.a11y-lesbar :is(p,li) :is(a,b,strong,em,span){font-family:Verdana,Tahoma,Arial,Helvetica,sans-serif!important;letter-spacing:.02em;word-spacing:.06em;overflow-wrap:anywhere}
/* Mehr Zeilenabstand: nur Fließtext, nie Überschriften oder Hero-Texte */
html.a11y-zeile :is(p,li,dd,dt,td,th,label,small,figcaption,blockquote){line-height:1.8!important}
html.a11y-zeile p{margin-bottom:1.1em}
html.a11y-ruhe *,html.a11y-ruhe *::before,html.a11y-ruhe *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-ruhe .marquee-track{transform:none!important}

@media(max-width:575.98px){.a11y-knopf{left:.6rem;bottom:.6rem;width:2.9rem;height:2.9rem;font-size:1.5rem}.a11y-fenster{left:.6rem;bottom:4.2rem}}
@media print{.a11y-knopf,.a11y-fenster,.skip-link{display:none!important}}
html.vorschau .a11y-knopf,html.vorschau .a11y-fenster,html.vorschau .skip-link{display:none!important}
/* Hoher Kontrast: Symbole, die als Hintergrundbild gezeichnet sind, bleiben sichtbar (weiß) */
html.a11y-kontrast .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")!important}
html.a11y-kontrast .chip-select select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")!important}
html.a11y-kontrast .btn-close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E")!important;filter:none!important}
