/* bfwp – Symbol-Leiste für Barriere-Freiheit
   Keine externen Schriften, kein CDN. Verdana / System-Schriften. */

:root {
	--bfwp-accent: #1a4d8f;
	--bfwp-btn-size: 56px;
	--bfwp-offset-v: 24px;
	--bfwp-offset-h: 24px;
	--bfwp-c-bg: #000000;
	--bfwp-c-text: #ffffff;
	--bfwp-c-link: #ffff00;
	--bfwp-readable: Verdana, Geneva, sans-serif;
	--bfwp-mark: #fff3b0;
	--bfwp-focus: #ffbf00;
}

/* ---------- Wurzel & schwebende Taste ---------- */

#bfwp-root,
#bfwp-root * {
	box-sizing: border-box;
	font-family: Verdana, Geneva, sans-serif !important;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

#bfwp-root {
	position: fixed !important;
	z-index: 2147483000 !important;
	width: var(--bfwp-btn-size) !important;
	height: var(--bfwp-btn-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
	pointer-events: auto !important;
	font-size: 16px;
	color: #111;
}

#bfwp-root,
#bfwp-root * {
	pointer-events: auto !important;
}

#bfwp-root .bfwp-ico {
	pointer-events: none !important;
}

#bfwp-root.bfwp-side-rechts { right: var(--bfwp-offset-h); }
#bfwp-root.bfwp-side-links  { left: var(--bfwp-offset-h); }
#bfwp-root.bfwp-v-unten     { bottom: var(--bfwp-offset-v); }
#bfwp-root.bfwp-v-oben      { top: var(--bfwp-offset-v); }

#bfwp-root.bfwp-dragged {
	right: auto;
	bottom: auto;
}

.bfwp-toggle {
	display: flex !important;
	position: relative !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	align-items: center;
	justify-content: center;
	width: var(--bfwp-btn-size);
	height: var(--bfwp-btn-size);
	padding: 0;
	margin: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--bfwp-accent);
	color: #fff;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	touch-action: none;
}

.bfwp-toggle .bfwp-ico {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

.bfwp-toggle:hover { filter: brightness(1.15); }

#bfwp-root.bfwp-no-button .bfwp-toggle { display: none !important; }
#bfwp-root.bfwp-no-button { width: 0 !important; height: 0 !important; }

@media (max-width: 767px) {
	#bfwp-root.bfwp-hide-mobile .bfwp-toggle { display: none; }
}

/* ---------- Fenster ---------- */

.bfwp-panel {
	position: fixed !important;
	z-index: 2147483001;
	width: 320px;
	max-width: calc(100vw - 16px);
	max-height: calc(100vh - 32px);
	margin: 0 !important;
	overflow-y: auto;
	background: #fff;
	color: #111;
	border: 2px solid var(--bfwp-accent);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
	transform: none !important;
	opacity: 1;
	visibility: visible !important;
}

#bfwp-root { display: block !important; visibility: visible !important; opacity: 1 !important; }
#bfwp-root .bfwp-panel:not([hidden]) { display: block !important; }
#bfwp-root .bfwp-panel[hidden] { display: none !important; }

.bfwp-panel.bfwp-anim-in {
	animation: bfwp-pop .18s ease-out;
}

@keyframes bfwp-pop {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#bfwp-root.bfwp-no-anim .bfwp-panel.bfwp-anim-in { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.bfwp-panel.bfwp-anim-in { animation: none; }
}

.bfwp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 10px 10px 16px;
	background: var(--bfwp-accent);
	color: #fff;
}

.bfwp-title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.bfwp-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.bfwp-close .bfwp-ico { fill: currentColor; width: 22px; height: 22px; }
.bfwp-close:hover { background: rgba(255, 255, 255, .2); }

.bfwp-list {
	list-style: none;
	margin: 0;
	padding: 8px;
}

.bfwp-list li {
	margin: 0;
	padding: 0;
}

.bfwp-btn,
.bfwp-reset {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	margin: 0 0 6px;
	padding: 10px 12px;
	border: 2px solid #cfd6e0;
	border-radius: 8px;
	background: #f6f8fb;
	color: #111;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}

.bfwp-btn:hover,
.bfwp-reset:hover { background: #e8eef7; }

.bfwp-btn .bfwp-ico,
.bfwp-fs .bfwp-ico,
.bfwp-reset .bfwp-ico {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: var(--bfwp-accent);
}

.bfwp-btn .bfwp-txt,
.bfwp-fs .bfwp-txt,
.bfwp-reset .bfwp-txt {
	flex: 1 1 auto;
}

.bfwp-btn .bfwp-state {
	flex: 0 0 auto;
	min-width: 34px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #d8dde5;
	color: #111;
	font-size: 13px;
	text-align: center;
}

.bfwp-btn .bfwp-state::after { content: "aus"; }
.bfwp-btn[aria-pressed="true"] { background: var(--bfwp-accent); color: #fff; border-color: var(--bfwp-accent); }
.bfwp-btn[aria-pressed="true"] .bfwp-ico { fill: #fff; }
.bfwp-btn[aria-pressed="true"] .bfwp-state { background: #fff; color: var(--bfwp-accent); font-weight: bold; }
.bfwp-btn[aria-pressed="true"] .bfwp-state::after { content: "an"; }

#bfwp-root.bfwp-no-icons .bfwp-ico { display: none; }
#bfwp-root.bfwp-no-icons .bfwp-toggle .bfwp-ico { display: block; }
#bfwp-root.bfwp-no-icons .bfwp-close .bfwp-ico { display: block; }

/* Schrift-Größe */

.bfwp-fs {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	margin: 0 0 6px;
	padding: 6px 12px;
	border: 2px solid #cfd6e0;
	border-radius: 8px;
	background: #f6f8fb;
}

.bfwp-fs-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bfwp-fs-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--bfwp-accent);
	border-radius: 8px;
	background: #fff;
	color: var(--bfwp-accent);
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

.bfwp-fs-btn .bfwp-ico { width: 16px; height: 16px; }
.bfwp-fs-btn:hover { background: var(--bfwp-accent); color: #fff; }
.bfwp-fs-btn:hover .bfwp-ico { fill: #fff; }
.bfwp-fs-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.bfwp-fs-value {
	min-width: 52px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

.bfwp-reset {
	width: calc(100% - 16px);
	margin: 0 8px 8px;
	border-color: var(--bfwp-accent);
	background: #fff;
	color: var(--bfwp-accent);
	font-weight: bold;
}

.bfwp-extra-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 8px 12px;
	border-top: 1px solid #cfd6e0;
}

.bfwp-extra {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--bfwp-accent) !important;
	font-size: 15px;
	text-decoration: underline !important;
}

.bfwp-extra:hover { background: #e8eef7; }

.bfwp-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Dunkles Aussehen */

#bfwp-root.bfwp-skin-dunkel .bfwp-panel { background: #161616; color: #fff; border-color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn,
#bfwp-root.bfwp-skin-dunkel .bfwp-fs { background: #262626; color: #fff; border-color: #555; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn:hover { background: #333; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn .bfwp-ico,
#bfwp-root.bfwp-skin-dunkel .bfwp-fs .bfwp-ico,
#bfwp-root.bfwp-skin-dunkel .bfwp-reset .bfwp-ico { fill: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn .bfwp-state { background: #555; color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn[aria-pressed="true"] .bfwp-ico { fill: #111; }
#bfwp-root.bfwp-skin-dunkel .bfwp-btn[aria-pressed="true"] .bfwp-state { background: #111; color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-fs-btn { background: #161616; color: #fff; border-color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-fs-btn:hover { background: #fff; color: #111; }
#bfwp-root.bfwp-skin-dunkel .bfwp-fs-btn .bfwp-ico { fill: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-fs-btn:hover .bfwp-ico { fill: #111; }
#bfwp-root.bfwp-skin-dunkel .bfwp-reset { background: #161616; color: #fff; border-color: #fff; }
#bfwp-root.bfwp-skin-dunkel .bfwp-reset:hover { background: #333; }
#bfwp-root.bfwp-skin-dunkel .bfwp-extra { color: #fff !important; }
#bfwp-root.bfwp-skin-dunkel .bfwp-extra:hover { background: #333; }
#bfwp-root.bfwp-skin-dunkel .bfwp-extra-links { border-color: #555; }

/* Fokus in der Leiste selbst */

#bfwp-root button:focus-visible,
#bfwp-root a:focus-visible {
	outline: 3px solid var(--bfwp-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #000 !important;
}

/* ---------- Inline-Taste (Kurz-Code) ---------- */

.bfwp-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 2px solid var(--bfwp-accent);
	border-radius: 8px;
	background: var(--bfwp-accent);
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	cursor: pointer;
}

.bfwp-inline-btn .bfwp-ico { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Sprung-Links ---------- */

.bfwp-skiplinks {
	position: absolute;
	top: 0;
	z-index: 2147483001;
}

.bfwp-skip-links  { left: 0; }
.bfwp-skip-rechts { right: 0; }

.bfwp-skip {
	position: absolute;
	top: -200px;
	left: 0;
	display: block;
	width: max-content;
	padding: 12px 18px;
	background: #111;
	color: #fff !important;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	white-space: nowrap;
}

.bfwp-skip-rechts .bfwp-skip { left: auto; right: 0; }

.bfwp-skip:focus {
	position: fixed;
	top: 8px;
	outline: 3px solid var(--bfwp-focus);
	outline-offset: 2px;
}

.bfwp-skip-links .bfwp-skip:focus  { left: 8px; }
.bfwp-skip-rechts .bfwp-skip:focus { right: 8px; }

/* ---------- Modus: Tastatur-Navigation ---------- */

html.bfwp-keyboard *:focus {
	outline: 4px solid var(--bfwp-focus) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px #000 !important;
}

/* ---------- Modus: Bewegung stoppen ---------- */

html.bfwp-animation *,
html.bfwp-animation *::before,
html.bfwp-animation *::after {
	animation-play-state: paused !important;
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
	scroll-behavior: auto !important;
}

html.bfwp-animation marquee { display: block !important; overflow: visible !important; }

/* ---------- Modus: Dunkler Kontrast ---------- */

html.bfwp-contrast,
html.bfwp-contrast body {
	background: var(--bfwp-c-bg) !important;
	color: var(--bfwp-c-text) !important;
}

html.bfwp-contrast body :where(*:not(#bfwp-root, #bfwp-root *, .bfwp-no-contrast, .bfwp-no-contrast *, img, video, svg, svg *, picture, iframe, canvas, object, embed, .bfwp-skip, .bfwp-inline-btn, .bfwp-inline-btn *)) {
	background-color: var(--bfwp-c-bg) !important;
	background-image: none !important;
	color: var(--bfwp-c-text) !important;
	border-color: var(--bfwp-c-text) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.bfwp-contrast body a:where(:not(#bfwp-root a, .bfwp-no-contrast a, .bfwp-no-contrast, .bfwp-skip, .bfwp-inline-btn)) {
	color: var(--bfwp-c-link) !important;
	text-decoration: underline !important;
}

html.bfwp-contrast body :where(button, input[type="submit"], input[type="button"], [role="button"]):where(:not(#bfwp-root *, .bfwp-no-contrast, .bfwp-no-contrast *, .bfwp-inline-btn)) {
	border: 2px solid var(--bfwp-c-text) !important;
}

html.bfwp-contrast body :where(h1, h2, h3, h4, h5, h6):where(:not(#bfwp-root *, .bfwp-no-contrast, .bfwp-no-contrast *)) {
	color: var(--bfwp-c-link) !important;
}

html.bfwp-contrast body :where(img, video, picture, svg):where(:not(#bfwp-root *)) {
	filter: brightness(.9) contrast(1.1);
}

/* ---------- Modus: Lesbare Schrift ---------- */

html.bfwp-readable body :where(*:not(#bfwp-root, #bfwp-root *, .bfwp-no-readable, .bfwp-no-readable *, svg, svg *, i[class*="icon"], span[class*="icon"], [class*="fa-"], [class*="dashicons"])) {
	font-family: var(--bfwp-readable) !important;
	letter-spacing: .02em !important;
	word-spacing: .08em !important;
}

/* ---------- Modus: Überschriften markieren ---------- */

html.bfwp-headings body :is(h1, h2, h3, h4, h5, h6):not(#bfwp-root *) {
	background: var(--bfwp-mark) !important;
	color: #111 !important;
	outline: 3px solid #111 !important;
	outline-offset: 2px;
	padding: 2px 6px !important;
}

html.bfwp-headings body :is(h1, h2, h3, h4, h5, h6):not(#bfwp-root *)::before {
	content: attr(data-bfwp-level) " ";
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .7em;
	font-weight: bold;
}

/* ---------- Modus: Links hervorheben ---------- */

html.bfwp-links body a:not(#bfwp-root a):not(.bfwp-skip) {
	background: var(--bfwp-mark) !important;
	color: #111 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	outline: 2px solid #111 !important;
	outline-offset: 1px;
}

html.bfwp-links body a:not(#bfwp-root a) img {
	outline: 4px solid #111 !important;
}