/* ============================================
   Nützliche Barrierefreiheit – Widget Styles
   ============================================ */

/* --- OpenDyslexic Font --- */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Widget Container --- */
.nb-widget {
    position: fixed;
    bottom: var(--nb-offset, 20px);
    z-index: var(--nb-z, 99999);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.nb-widget.nb-pos-right {
    right: 20px;
}

.nb-widget.nb-pos-left {
    left: 20px;
}

/* --- Toggle Button --- */
.nb-toggle {
    width: var(--nb-size, 56px);
    height: var(--nb-size, 56px);
    border-radius: 50%;
    background: var(--nb-color, #C7D245);
    color: var(--nb-icon-color, #ffffff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    position: relative;
}

.nb-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.nb-toggle:focus-visible {
    outline: 3px solid var(--nb-color, #C7D245);
    outline-offset: 3px;
}

.nb-toggle-icon {
    width: 72%;
    height: 72%;
}

.nb-toggle[aria-expanded="true"] {
    transform: scale(0.9);
}

/* --- Panel --- */
.nb-panel {
    position: absolute;
    bottom: calc(var(--nb-size, 56px) + 12px);
    width: 320px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nb-pos-right .nb-panel {
    right: 0;
}

.nb-pos-left .nb-panel {
    left: 0;
}

.nb-panel.nb-panel-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* --- Panel Header --- */
.nb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--nb-color, #C7D245);
    color: var(--nb-text-color, #1d2327);
}

.nb-panel-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--nb-text-color, #1d2327);
}

.nb-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    color: var(--nb-text-color, #1d2327);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}

.nb-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

.nb-close:focus-visible {
    outline: 2px solid #1d2327;
    outline-offset: 2px;
}

.nb-close svg {
    width: 16px;
    height: 16px;
}

/* --- Panel Body --- */
.nb-panel-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

/* --- Kategorien --- */
.nb-category {
    margin-bottom: 16px;
}

.nb-category:last-child {
    margin-bottom: 0;
}

.nb-category-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #50575e;
    margin: 0 0 8px 4px;
    padding: 0;
}

/* --- Feature Items --- */
.nb-feature {
    margin-bottom: 4px;
}

.nb-feature-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f4f5f7;
    cursor: pointer;
    font-size: 14px;
    color: #1d2327;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.nb-feature-toggle:hover {
    background: #ebedf0;
}

.nb-feature-toggle:focus-visible {
    outline: none;
    border-color: var(--nb-color, #C7D245);
    box-shadow: 0 0 0 2px rgba(199, 210, 69, 0.35);
}

.nb-feature-toggle[aria-pressed="true"] {
    background: var(--nb-color, #C7D245);
    color: var(--nb-text-color, #1d2327);
    border-color: var(--nb-color, #C7D245);
}

.nb-feature-toggle[aria-pressed="true"] .nb-feature-icon {
    stroke: var(--nb-text-color, #1d2327);
}

.nb-feature-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #555;
    transition: stroke 0.15s;
}

.nb-feature-label {
    font-weight: 500;
}

/* --- Font Size Controls --- */
.nb-feature[data-feature="font_size"] {
    background: #f4f5f7;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

.nb-feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.nb-feature-header .nb-feature-icon {
    stroke: #555;
}

.nb-feature-header .nb-feature-label {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
}

.nb-feature-controls {
    display: flex;
    gap: 6px;
}

.nb-btn-control {
    flex: 1;
    padding: 8px 4px;
    border: 2px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}

.nb-btn-control:hover {
    border-color: var(--nb-color, #C7D245);
    background: #f8f9e8;
}

.nb-btn-control:focus-visible {
    outline: none;
    border-color: var(--nb-color, #C7D245);
    box-shadow: 0 0 0 2px rgba(199, 210, 69, 0.35);
}

.nb-btn-control.active {
    background: var(--nb-color, #C7D245);
    color: var(--nb-text-color, #1d2327);
    border-color: var(--nb-color, #C7D245);
}

.nb-zoom-display,
.nb-step-display {
    font-size: 12px;
    font-weight: 700;
    min-width: 50px;
    font-variant-numeric: tabular-nums;
}

.nb-feature-steps {
    background: #f4f5f7;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

/* --- Panel Footer --- */
.nb-panel-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #eee;
}

.nb-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 2px solid #dcdcde;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #646970;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.nb-reset:hover {
    border-color: #d63638;
    color: #d63638;
    background: #fef1f1;
}

.nb-reset:focus-visible {
    outline: none;
    border-color: #d63638;
    box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.25);
}

.nb-reset-icon {
    width: 16px;
    height: 16px;
}

/* --- Reading Guide --- */
.nb-reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 12px;
    background: rgba(199, 210, 69, 0.2);
    border-top: 2px solid rgba(199, 210, 69, 0.6);
    border-bottom: 2px solid rgba(199, 210, 69, 0.6);
    pointer-events: none;
    z-index: 999998;
    display: none;
    transition: top 0.05s linear;
}

.nb-reading-guide.active {
    display: block;
}


/* ============================================
   Barrierefreiheits-Overrides
   
   Strategie: Alle Overrides zielen NUR auf
   body > *:not(.nb-widget):not(.nb-reading-guide)
   damit das Widget IMMER unberührt bleibt.
   ============================================ */

/* Kurzform: "Seiten-Inhalt" = alles außer Widget */

/* --- Schriftgröße (zoom skaliert ALLES: Text, Überschriften, Buttons etc.) --- */
body.bf-font-size-1 > *:not(.nb-widget):not(.nb-reading-guide) {
    zoom: 1.1 !important;
}

body.bf-font-size-2 > *:not(.nb-widget):not(.nb-reading-guide) {
    zoom: 1.25 !important;
}

body.bf-font-size-3 > *:not(.nb-widget):not(.nb-reading-guide) {
    zoom: 1.5 !important;
}

/* --- Dunkler Kontrast --- */
body.bf-dark-contrast {
    background: #1a1a2e !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    color: #e0e0e0 !important;
    border-color: #444 !important;
    background-color: transparent !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) a,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) a * {
    color: #7eb8ff !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background-image"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background:"] {
    background-color: rgba(26, 26, 46, 0.85) !important;
    background-blend-mode: darken !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) header,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) nav,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) footer,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) aside,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="navigation"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="banner"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="header"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="footer"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="menu"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nav"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="dropdown"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="popup"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="modal"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="sidebar"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="toolbar"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="topbar"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="side-button"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nm-"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) select,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) table,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) th,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) td {
    background-color: #1a1a2e !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) select {
    border: 1px solid #666 !important;
    color: #e0e0e0 !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input::placeholder,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea::placeholder {
    color: #888 !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input:focus,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea:focus,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) select:focus {
    outline: 2px solid #7eb8ff !important;
    border-color: #7eb8ff !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="checkbox"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="radio"] {
    accent-color: #7eb8ff !important;
    width: 18px !important;
    height: 18px !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) button:not(.nb-widget *):not([class*="nav"]):not([class*="menu"]):not([class*="hamburger"]),
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="submit"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="button"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="button"],
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) a.w-btn {
    border: 2px solid #7eb8ff !important;
    color: #7eb8ff !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) label {
    color: #e0e0e0 !important;
}

body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) img,
body.bf-dark-contrast > *:not(.nb-widget):not(.nb-reading-guide) video {
    filter: brightness(0.85) !important;
}

/* --- Lichtkontrast --- */
body.bf-light-contrast {
    background: #fff !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    color: #111 !important;
    border-color: #999 !important;
    background-color: transparent !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background-image"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background:"] {
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-blend-mode: lighten !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) a,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) a * {
    color: #0033cc !important;
    text-decoration: underline !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) header,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) nav,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) footer,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) aside,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="navigation"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="banner"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="header"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="footer"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="menu"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nav"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="dropdown"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="popup"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="modal"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="sidebar"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="toolbar"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="topbar"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nm-"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) select,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) table,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) th,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) td {
    background-color: #fff !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) select {
    border: 2px solid #333 !important;
    color: #111 !important;
    background-color: #fff !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input::placeholder,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea::placeholder {
    color: #666 !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input:focus,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea:focus,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) select:focus {
    outline: 3px solid #0033cc !important;
    border-color: #0033cc !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="checkbox"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="radio"] {
    accent-color: #0033cc !important;
    width: 18px !important;
    height: 18px !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) button:not(.nb-widget *):not([class*="nav"]):not([class*="menu"]):not([class*="hamburger"]),
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="submit"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="button"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="button"],
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) a.w-btn {
    border: 2px solid #0033cc !important;
    color: #0033cc !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) label {
    color: #111 !important;
    font-weight: 600 !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) .side-buttons-wrapper {
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) .side-button {
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #ddd !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) .side-button-icon {
    filter: invert(1) !important;
}

body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) img,
body.bf-light-contrast > *:not(.nb-widget):not(.nb-reading-guide) video {
    filter: contrast(1.1) !important;
}

/* --- Hoher Kontrast --- */
body.bf-high-contrast {
    background: #000 !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    color: #fff !important;
    border-color: #fff !important;
    background-color: transparent !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background-image"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [style*="background:"] {
    background-color: rgba(0, 0, 0, 0.85) !important;
    background-blend-mode: darken !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) a,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) a * {
    color: #ff0 !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) header,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) nav,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) footer,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) aside,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="navigation"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="banner"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="header"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="footer"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="menu"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nav"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="dropdown"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="popup"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="modal"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="sidebar"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="toolbar"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="topbar"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="side-button"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [class*="nm-"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) table,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) th,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) td {
    background-color: #000 !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) select {
    background-color: #000 !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input::placeholder,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea::placeholder {
    color: #aaa !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input:focus,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) textarea:focus,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) select:focus {
    outline: 3px solid #ff0 !important;
    border-color: #ff0 !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="checkbox"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="radio"] {
    accent-color: #ff0 !important;
    width: 18px !important;
    height: 18px !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) button:not(.nb-widget *):not([class*="nav"]):not([class*="menu"]):not([class*="hamburger"]),
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="submit"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) input[type="button"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) [role="button"],
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) a.w-btn {
    border: 2px solid #ff0 !important;
    color: #ff0 !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) label {
    color: #fff !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) .side-button-icon {
    filter: invert(1) !important;
}

body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) img,
body.bf-high-contrast > *:not(.nb-widget):not(.nb-reading-guide) video {
    filter: brightness(1.1) contrast(1.2) !important;
}

/* --- Farben invertieren (Filter nur auf Seiteninhalt) --- */
body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide):not(.side-buttons-wrapper) {
    filter: invert(1) !important;
}

body.bf-invert .side-buttons-wrapper .side-button,
body.bf-invert .side-buttons-wrapper .side-button-icon {
    filter: invert(1) !important;
}

body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide) button:not(.nb-widget *):not([class*="nav"]):not([class*="menu"]):not([class*="hamburger"]),
body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide) input[type="submit"],
body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide) input[type="button"],
body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide) [role="button"],
body.bf-invert > *:not(.nb-widget):not(.nb-reading-guide) a.w-btn {
    border: 2px solid currentColor !important;
}


/* --- Graustufen (Filter nur auf Seiteninhalt) --- */
body.bf-grayscale > *:not(.nb-widget):not(.nb-reading-guide):not(.side-buttons-wrapper) {
    filter: grayscale(1) !important;
}

body.bf-grayscale .side-buttons-wrapper .side-button,
body.bf-grayscale .side-buttons-wrapper .side-button-icon {
    filter: grayscale(1) !important;
}

/* --- Hohe Sättigung --- */
body.bf-high-saturation > *:not(.nb-widget):not(.nb-reading-guide):not(.side-buttons-wrapper) {
    filter: saturate(2) !important;
}

body.bf-high-saturation .side-buttons-wrapper .side-button,
body.bf-high-saturation .side-buttons-wrapper .side-button-icon {
    filter: saturate(2) !important;
}

/* --- Niedrige Sättigung --- */
body.bf-low-saturation > *:not(.nb-widget):not(.nb-reading-guide):not(.side-buttons-wrapper) {
    filter: saturate(0.3) !important;
}

body.bf-low-saturation .side-buttons-wrapper .side-button,
body.bf-low-saturation .side-buttons-wrapper .side-button-icon {
    filter: saturate(0.3) !important;
}

/* --- Links hervorheben (nur Seiten-Links) --- */
body.bf-highlight-links > *:not(.nb-widget):not(.nb-reading-guide) a {
    outline: 2px solid #C7D245 !important;
    outline-offset: 2px !important;
    background-color: rgba(199, 210, 69, 0.15) !important;
    color: #1a5c1a !important;
    text-decoration: underline !important;
    text-decoration-color: #C7D245 !important;
    text-decoration-thickness: 2px !important;
    border-radius: 3px !important;
}

body.bf-highlight-links > *:not(.nb-widget):not(.nb-reading-guide) a * {
    color: inherit !important;
}

body.bf-highlight-links > *:not(.nb-widget):not(.nb-reading-guide) a:focus {
    outline: 3px solid #9aab1f !important;
}

/* --- Titel hervorheben --- */
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h1,
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h2,
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h3,
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h4,
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h5,
body.bf-highlight-titles > *:not(.nb-widget):not(.nb-reading-guide) h6 {
    border-left: 4px solid #C7D245 !important;
    padding-left: 12px !important;
    background-color: rgba(199, 210, 69, 0.1) !important;
    border-radius: 0 6px 6px 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* --- Textbreite begrenzen --- */
body.bf-content-width > *:not(.nb-widget):not(.nb-reading-guide) {
    max-width: 70ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Linksbündig erzwingen --- */
body.bf-align-left > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-align-left > *:not(.nb-widget):not(.nb-reading-guide) * {
    text-align: left !important;
}

/* --- Lesbare Schrift --- */
body.bf-readable-font > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-readable-font > *:not(.nb-widget):not(.nb-reading-guide) * {
    font-family: "OpenDyslexic", Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.12em !important;
}

/* --- Zeilenabstand (3 Stufen) --- */
body.bf-line-height-1 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-line-height-1 > *:not(.nb-widget):not(.nb-reading-guide) * {
    line-height: 1.8 !important;
}

body.bf-line-height-2 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-line-height-2 > *:not(.nb-widget):not(.nb-reading-guide) * {
    line-height: 2.2 !important;
}

body.bf-line-height-3 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-line-height-3 > *:not(.nb-widget):not(.nb-reading-guide) * {
    line-height: 2.6 !important;
}

/* --- Zeichenabstand (3 Stufen) --- */
body.bf-letter-spacing-1 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-letter-spacing-1 > *:not(.nb-widget):not(.nb-reading-guide) * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.2em !important;
}

body.bf-letter-spacing-2 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-letter-spacing-2 > *:not(.nb-widget):not(.nb-reading-guide) * {
    letter-spacing: 0.2em !important;
    word-spacing: 0.35em !important;
}

body.bf-letter-spacing-3 > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-letter-spacing-3 > *:not(.nb-widget):not(.nb-reading-guide) * {
    letter-spacing: 0.3em !important;
    word-spacing: 0.5em !important;
}

/* --- Großer Cursor --- */
body.bf-big-cursor > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-big-cursor > *:not(.nb-widget):not(.nb-reading-guide) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 3l14 8-6 2-4 6z'/%3E%3C/svg%3E") 4 4, auto !important;
}


/* --- Fokus hervorheben --- */
body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) *:focus {
    outline: 3px solid #C7D245 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(199, 210, 69, 0.3) !important;
}

body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) a:focus,
body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) button:focus,
body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) input:focus,
body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) select:focus,
body.bf-focus-highlight > *:not(.nb-widget):not(.nb-reading-guide) textarea:focus {
    outline: 3px solid #C7D245 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(199, 210, 69, 0.4) !important;
}

/* --- Hover hervorheben --- */
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) a:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) button:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) [role="button"]:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) input:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) select:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) textarea:hover,
body.bf-hover-highlight > *:not(.nb-widget):not(.nb-reading-guide) label:hover {
    outline: 2px solid #C7D245 !important;
    outline-offset: 2px !important;
    background-color: rgba(199, 210, 69, 0.1) !important;
}

/* --- Animationen stoppen --- */
body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide),
body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide) * {
    animation: none !important;
    animation-duration: 0s !important;
    transition: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide) *::before,
body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide) *::after {
    animation: none !important;
    transition: none !important;
}

body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide) video[autoplay],
body.bf-stop-animations > *:not(.nb-widget):not(.nb-reading-guide) [data-autoplay] {
    animation-play-state: paused !important;
}

/* --- Bilder ausblenden --- */
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) img,
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) video,
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) picture,
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) svg:not(.nb-feature-icon),
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) [style*="background-image"],
body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) canvas {
    opacity: 0.05 !important;
}

body.bf-hide-images > *:not(.nb-widget):not(.nb-reading-guide) img[alt]::after {
    content: attr(alt);
    display: block;
    padding: 8px;
    font-style: italic;
    color: #666;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 400px) {
    .nb-panel {
        width: calc(100vw - 40px);
        left: 20px !important;
        right: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nb-toggle,
    .nb-panel,
    .nb-feature-toggle,
    .nb-feature-icon,
    .nb-btn-control,
    .nb-close,
    .nb-reset,
    .nb-reading-guide {
        transition: none !important;
    }

    .nb-panel.nb-panel-open {
        transition: none !important;
    }

    .nb-toggle:hover {
        transform: none;
    }

    .nb-toggle[aria-expanded="true"] {
        transform: none;
    }
}