/* Font scaling: */
html {
	--bf-font-scale: 1;
}

/* High Contrast: */
html[data-bf-contrast="1"] {
  --hc-bg:    #000;
  --hc-text:  #fff;
  --hc-ui-bg: #111;
  --hc-link:  #0ff;
  --hc-brd:   #fff;
  --hc-focus: #ff0;
}

html[data-bf-sr='1'] html::before {
  content: "📢";
  margin-left: 0.5em;
  font-size: 1em;
}

/* --- Minimal styling, easy to integrate --- */
.bf {
	position: fixed;
	top: 12rem;
	right: .5rem;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
    transition: .3s ease-in;
}

.bf:hover {
	right: .5rem;
}

.bf__toggle {
	padding: .5rem;
	border-radius: .5rem;
}

.bf__toggle[aria-expanded="true"] {
	padding: .5rem;
	border-radius: .5rem .5rem 0 0;
}

.bf__panel {
	padding: .75rem;
	width: calc(100vw - .75rem);
	border-radius: 1rem 0 1rem 1rem;
	background: #fff;
	color: #111;
  font-size: 1.4rem;
}

.bf__row,
.bf__label {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.bf__row {
	justify-content: space-between;
	margin: .5rem 0;
}

.bf__legend {
	font-weight: 600;
	margin-bottom: .25rem;
}

.bf__font {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	gap: .5rem;
	align-items: center;
}

.bf__keyboard {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.bf__btn {
	padding: .35rem .6rem;
	border: 1px solid #ccc;
	background: #f6f6f6;
	border-radius: .5rem;
}

.bf__out {
	text-align: center;
	min-width: 3.5rem;
}

.bg-panel-seperator {
	border: 1px solid;
}


@media (prefers-color-scheme: dark) {
	.bf__panel,
	.bf__toggle {
		background: #1e1e1e;
		color: #f3f3f3;
	}
}


html[style*="--bf-font-scale"]
:where(body):not(#barriereFreiheit) :where(
  p, li, a, small, strong, em, code, pre, kbd, samp,
  h1, h2, h3, h4, h5, h6,
  blockquote, dd, dt, figcaption, caption,
  th, td, label, button, input, select, textarea
):not(#barriereFreiheit, #barriereFreiheit *) {
  font-size: calc(1em * var(--bf-font-scale)) !important;
}
img, picture, svg, video, canvas {
  font-size: initial; 
}


/* 2) High contrast mode: provide a strong default; you can expand these rules to fit your design system. */
html[data-bf-contrast="1"] body {
  background: var(--hc-bg) !important;
  color: var(--hc-text) !important;
}
html[data-bf-contrast="1"] a {
  color: var(--hc-link) !important;
  text-decoration: underline !important;
}
html[data-bf-contrast="1"] :is(button, input, select, textarea) {
  background: var(--hc-ui-bg) !important;
  color: var(--hc-text) !important;
  border: 1px solid var(--hc-brd) !important;
}
html[data-bf-contrast="1"] label {
  background: var(--hc-text) !important;
  color: var(--hc-bg) !important;
  font-weight: 700;
}
html[data-bf-contrast="1"] .info {
  color: var(--hc-text) !important;
}
html[data-bf-contrast="1"] *:focus {
  outline: 3px solid var(--hc-focus) !important;
  outline-offset: 2px;
}







/* 3) Hide images/media (keeps layout simpler than placeholders). */
html[data-bf-hideimg='1'] img,
html[data-bf-hideimg='1'] picture,
html[data-bf-hideimg='1'] video,
html[data-bf-hideimg='1'] figure,
html[data-bf-hideimg='1'] .image {
	display: none !important;
}

/* 4) Larger cursor using an embedded SVG data-URL (fallbacks to auto). */
html[data-bf-cursor='1'],
html[data-bf-cursor='1'] * {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><circle cx='20' cy='20' r='20' fill='black'/><circle cx='20' cy='20' r='10' fill='white'/></svg>") 20 20, auto !important;
}



.isSpeaking{
    border: 1px solid yellow;
    background-color: yellow !important;
    color: var(--hc-ui-bg) !important;
    caret-color: black;
    caret-width: 4px;
    caret-color: black;
    font-size: 1.4em;
    font-family: monospace;
}





#bf__mobileJump {
  position: fixed;
    top: 7rem;
    right: .5rem;
    padding: .2rem;
    font-size: 1.2rem;
    z-index: 99999;
    background: yellow;
    border: 2px solid black;
    width: 50px;
    height: 50px;
    text-align: center;
}


@media (min-width: 768px) {

    .bf__panel {
        
        width: 18rem;
    }

  #bf__mobileJump {
    display: none !important;
  }
}