:root{
  --a11y-bg:#0b1016; --a11y-card:#141a22; --a11y-card-2:#1b212c;
  --a11y-brd:#2e3644; --a11y-text:#e6edf3; --a11y-muted:#9fb0c2;
  --a11y-accent:#E9620B; --a11y-accent-hover:#c85105; --a11y-rad:18px; --a11y-gap:14px;
  --a11y-z:2147483647; --a11y-shadow:0 12px 35px rgba(0,0,0,.35);
}

/* FAB (white icon, centered) */
#a11y-fab{ position:fixed; right:calc(env(safe-area-inset-right) + 16px);
  bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:var(--a11y-z);
  display:grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:var(--a11y-accent); border:none; cursor:pointer; box-shadow:var(--a11y-shadow);
  transition:background-color .15s ease, transform .05s ease;
}
#a11y-fab .ico{ width:22px; height:22px; display:block; background:#fff;
  -webkit-mask-position:50% 50%; mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  transform: translate(var(--fab-off-x,0), var(--fab-off-y,0));
}

/* Panel */
#a11y-panel{ position:fixed; right:16px; bottom:88px; width:min(640px,96vw);
  background:var(--a11y-bg); border:1px solid var(--a11y-brd); border-radius:22px;
  box-shadow:var(--a11y-shadow); color:var(--a11y-text); display:none; z-index:var(--a11y-z);
  max-height:min(68vh,560px); overflow:auto}
#a11y-panel.open{ display:block }
#a11y-panel .hdr{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px; gap:8px; border-bottom:1px solid var(--a11y-brd)}
#a11y-panel .hdr strong{ font-weight:700 }
#a11y-panel .hdr .actions{ display:flex; gap:8px }
#a11y-panel .btn{ background:#222a36; color:var(--a11y-text); border:1px solid var(--a11y-brd); border-radius:12px; padding:8px 10px; cursor:pointer }
#a11y-panel .btn:focus-visible{ outline:2px solid var(--a11y-accent); outline-offset:2px }
#a11y-panel .btn.icon{ width:36px; height:36px; display:grid; place-items:center; padding:0; border-radius:10px }
#a11y-panel .btn.icon .ico{ width:16px; height:16px; display:block; background:#e6edf3;
  -webkit-mask-position:50% 50%; mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
#a11y-panel .btn.icon:hover{ border-color: rgba(233,98,11,.45) }
#a11y-panel .body{ padding:12px }
#a11y-panel .grid{ display:grid; gap:var(--a11y-gap); grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  #a11y-panel{ right:12px; bottom:78px; width:92vw; max-height:58vh }
  #a11y-panel .grid{ grid-template-columns:1fr 1fr; gap:12px }
}

/* Widget-neutral */
#a11y-fab, #a11y-panel{ filter:none !important }
#a11y-panel, #a11y-panel *{ font-size:15px !important; line-height:1.35 !important }

/* Cards: fixed equal height; icon top centered; hover border; active keeps orange icon bg */
.a11y-card{ background:var(--a11y-card); border:1px solid var(--a11y-brd); border-radius:var(--a11y-rad);
  padding:12px; display:grid; grid-template-rows:auto 1fr auto; align-content:start; gap:6px; cursor:pointer; height:130px }
.a11y-card:hover{ background:var(--a11y-card-2); border-color:rgba(233,98,11,.45) }
.a11y-card .ico-wrap{ width:44px; height:44px; border-radius:9999px;
  background:#202736; margin:2px auto 6px; display:grid; place-items:center;
  box-sizing:border-box; padding:13px;
}
.a11y-card[aria-pressed="true"] .ico-wrap{ background:var(--a11y-accent) }
.a11y-card .ico{ width:100%; height:100%; display:block; background:#fff;
  -webkit-mask-position:50% 50%; mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.a11y-card .label{ display:flex; align-items:center; justify-content:center; text-align:center }
.a11y-card .label span:first-child{ font-size:.85rem }
.a11y-card .value{ font-weight:700; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis  text-align:center  text-align:center }
.a11y-card[aria-pressed="true"]{ box-shadow: inset 0 0 0 2px var(--a11y-accent), var(--a11y-shadow) }
.a11y-card:focus-visible{ outline:2px solid var(--a11y-accent); outline-offset:2px }

.dots{ display:flex; gap:6px } .dot{ width:8px; height:8px; border-radius:999px; background:#3a4555; opacity:.6 } .dot.active{ background:var(--a11y-accent); opacity:1 }

/* SR only */
.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 }

/* --- Effects ------------------------------------------------------- */
/* Großer Text: skaliert alle Textgrößen außer H1 */
html.a11y-fs-1 :is(main,[role="main"],#main,.site-main,.content-area,.entry-content) :not(h1){ font-size:calc(1em * 1.04)!important }
html.a11y-fs-2 :is(main,[role="main"],#main,.site-main,.content-area,.entry-content) :not(h1){ font-size:calc(1em * 1.08)!important }
html.a11y-fs-3 :is(main,[role="main"],#main,.site-main,.content-area,.entry-content) :not(h1){ font-size:calc(1em * 1.12)!important }

/* Zeilenhöhe & Wortabstand */
html.a11y-lh-1 body{ line-height:1.8 } html.a11y-lh-2 body{ line-height:2.0 }
html.a11y-ws-1 body{ word-spacing:.08em; letter-spacing:.01em } html.a11y-ws-2 body{ word-spacing:.15em; letter-spacing:.02em }

/* Textausrichtung: überall außer Header/Footer */
html.a11y-align-left body :not(header):not(footer) p, 
html.a11y-align-left body :not(header):not(footer) li, 
html.a11y-align-left body :not(header):not(footer) h2, 
html.a11y-align-left body :not(header):not(footer) h3, 
html.a11y-align-left body :not(header):not(footer) h4, 
html.a11y-align-left body :not(header):not(footer) h5, 
html.a11y-align-left body :not(header):not(footer) h6,
html.a11y-align-left body :not(header):not(footer) blockquote,
html.a11y-align-left body :not(header):not(footer) figcaption { text-align:left !important }
html.a11y-align-center body :not(header):not(footer) p, 
html.a11y-align-center body :not(header):not(footer) li, 
html.a11y-align-center body :not(header):not(footer) h2,
html.a11y-align-center body :not(header):not(footer) h3,
html.a11y-align-center body :not(header):not(footer) h4,
html.a11y-align-center body :not(header):not(footer) h5,
html.a11y-align-center body :not(header):not(footer) h6,
html.a11y-align-center body :not(header):not(footer) blockquote,
html.a11y-align-center body :not(header):not(footer) figcaption { text-align:center !important }
html.a11y-align-justify body :not(header):not(footer) p, 
html.a11y-align-justify body :not(header):not(footer) li { text-align:justify !important; hyphens:auto }

/* Links */
html.a11y-links-underline body a{ text-decoration: underline }
html.a11y-links-highlight body a{ background: rgba(233,98,11,.18); padding:.05em .2em; border-radius:.2em }
html.a11y-links-outline body a{ outline: 2px solid var(--a11y-accent); outline-offset: 2px; border-radius:.2em }

/* Bilder & Animationen */
html.a11y-hide-img body img, html.a11y-hide-img body picture{ display:none !important }
@media (prefers-reduced-motion:no-preference){
  html.a11y-stop-anim *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* Dark Mode: Seite invertieren, Header/Footer und Medien reinvertieren */
html.a11y-dark{ filter: invert(1) hue-rotate(180deg) saturate(.95) contrast(.9) }
html.a11y-dark header, html.a11y-dark header *,
html.a11y-dark footer, html.a11y-dark footer *,
html.a11y-dark img, html.a11y-dark video, html.a11y-dark canvas, html.a11y-dark iframe{
  filter: invert(1) hue-rotate(180deg) saturate(1) contrast(1)
}

/* White Mode */
html.a11y-white, html.a11y-white body{ background:#fff !important; color:#111 !important }
html.a11y-white header, html.a11y-white footer{ background:#fff !important; color:#111 !important; filter:none !important }
html.a11y-white body *{ color:#111 !important; border-color:rgba(0,0,0,.25) !important }
html.a11y-white a{ color:#000 !important; text-decoration:underline }

#a11y-fab:hover{ background:var(--a11y-accent-hover); }

#a11y-restore{
  position:fixed; right:calc(env(safe-area-inset-right) + 16px);
  bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:var(--a11y-z);
  display:none; place-items:center; width:44px; height:44px;
  border:none; border-radius:9999px; background:var(--a11y-accent);
  box-shadow:var(--a11y-shadow); cursor:pointer;
  transition:background-color .15s ease, transform .05s ease;
}
#a11y-restore:hover{ background:var(--a11y-accent-hover); }
#a11y-restore .ico{
  width:22px; height:22px; background:#fff;
  -webkit-mask-position:50% 50%; mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

@media (max-width: 700px){
  #a11y-panel .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 320px){
  #a11y-panel .grid{ grid-template-columns: 1fr; }
}


/* --- JHB custom tweaks 2025-10-15 ---------------------------------
   - Move the level dots to the bottom of the card
   - Clean label line so it's just the text (left-aligned)
   - Make the panel header sticky while the panel scrolls
-------------------------------------------------------------------- */

/* Panel header sticks to the top while scrolling the panel */
#a11y-panel .hdr{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--a11y-bg);
}

/* Card layout improvements */
.a11y-card{
  position: relative;
  text-align: center;             /* so the absolute dots are anchored */
  padding-bottom: 34px;           /* space for bottom dots row */
}

/* Label line: left-align, no space reserved for dots */
.a11y-card .label{ display:flex; align-items:center; justify-content:center; text-align:center }

/* Place dots centered at the bottom of the card */
.a11y-card .label .dots{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  pointer-events: none;           /* don't steal clicks from the card */
}

/* Optional: tighten icon spacing a touch */
.a11y-card .ico-wrap{
  margin: 2px auto 2px;
}


/* --- JHB: make FAB round + gradient brand colors --- */
#a11y-fab{
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #E9620B 0%, #FF9C57 100%) !important;
  color: #fff;
}
#a11y-fab:hover, #a11y-fab:focus-visible{
  filter: brightness(1.06);
  outline: 3px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}


/* --- 1.4.10b: lock center for restore icon --- */
#a11y-restore{ 
  display:grid; place-items:center; 
  width:40px; height:40px; border-radius:9999px; 
  padding:0; line-height:1; 
}
#a11y-restore .ico{ 
  position: static; 
  width:16px; height:16px; 
  margin:0; transform: translateZ(0); 
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%; 
  -webkit-mask-size: contain; mask-size: contain; 
}


/* --- 1.4.10d: Mobile centering + safe wrapping for enlarged text --- */
@media (max-width: 640px){
  /* Center core text elements on small screens */
  h1, h2, h3, h4, h5, h6,
  p, li, .entry-content, .wp-block-group, .wp-block-columns,
  .kb-row-layout-wrap, .kt-inside-inner-col{
    text-align: center;
  }
  /* Center Gutenberg buttons/links rows */
  .wp-block-buttons{ justify-content: center; }
  /* Prevent horizontal overflow when fs-increase is enabled */
  html.a11y-fs-1 *, html.a11y-fs-2 *, html.a11y-fs-3 *{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  /* Images/media remain responsive */
  img, video, iframe{ max-width: 100%; height: auto; }
  /* Avoid page-wide horizontal scroll */
  html{ overflow-x: hidden; }
}


/* --- 1.5.1: Handy-Optimierungen für Karten --- */
@media (max-width:640px){
  #a11y-panel .grid{ grid-template-columns:1fr 1fr gap: 12px; }
  #a11y-panel .a11y-card .label{ display:flex; align-items:center; justify-content:center; text-align:center }
  #a11y-panel .a11y-card .label > span:first-child{
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }
  #a11y-panel .a11y-card .label .dots{
    justify-self: end;
    text-align: right;
  }
  #a11y-panel .a11y-card .value{
    min-width: 9ch;
    text-align: center;
   text-align:center  text-align:center }
  html.a11y-fs-1 #a11y-panel .a11y-card,
  html.a11y-fs-2 #a11y-panel .a11y-card,
  html.a11y-fs-3 #a11y-panel .a11y-card{
    word-break: break-word;
    hyphens: auto;
  }
}
@media (max-width: 420px){
  #a11y-panel .grid{ grid-template-columns: 1fr 1fr; }
}