/* Basis Variablen */
:root {
    --ambf-primary: #005da6; /* Fallback */
    --ambf-text: #ffffff;    /* Fallback */
    --ambf-bg: #ffffff;
    --ambf-panel-width: 300px;
    --ambf-zindex: 999999;
}

/* Skip Link */
.ambf-skip-link {
    position: absolute;
    top: -1000px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ambf-primary);
    color: var(--ambf-text);
    padding: 10px 20px;
    z-index: var(--ambf-zindex);
    text-decoration: none;
    font-weight: bold;
    transition: top 0.3s;
}
.ambf-skip-link:focus {
    top: 0;
}

/* Wrapper & Positionierung */
#ambf-wrapper {
    position: fixed;
    z-index: var(--ambf-zindex);
    font-family: sans-serif;
    line-height: 1.5;
}

/* Positionen */
.ambf-pos-bottom_right { bottom: 20px; right: 20px; }
.ambf-pos-bottom_left { bottom: 20px; left: 20px; }
.ambf-pos-bottom_center { bottom: 20px; left: 50%; transform: translateX(-50%); }
.ambf-pos-top_right { top: 20px; right: 20px; }
.ambf-pos-top_left { top: 20px; left: 20px; }
.ambf-pos-top_center { top: 20px; left: 50%; transform: translateX(-50%); }

/* Toggle Button */
#ambf-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--ambf-primary);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: transform 0.2s;
}
#ambf-toggle:hover, #ambf-toggle:focus {
    transform: scale(1.1);
    outline: 2px solid var(--ambf-primary);
    outline-offset: 2px;
}
#ambf-toggle svg {
    fill: var(--ambf-text);
    width: 100%;
    height: 100%;
}

/* Panel */
#ambf-panel {
    position: absolute;
    width: var(--ambf-panel-width);
    background: var(--ambf-bg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    display: none; /* JS toggles this */
    flex-direction: column;
    color: #333;
    border: 1px solid #ddd;
}

/* Panel Position Logic via CSS based on wrapper class */
.ambf-pos-bottom_right #ambf-panel { bottom: 70px; right: 0; }
.ambf-pos-bottom_left #ambf-panel { bottom: 70px; left: 0; }
.ambf-pos-bottom_center #ambf-panel { bottom: 70px; left: 50%; transform: translateX(-50%); }
.ambf-pos-top_right #ambf-panel { top: 70px; right: 0; }
.ambf-pos-top_left #ambf-panel { top: 70px; left: 0; }
.ambf-pos-top_center #ambf-panel { top: 70px; left: 50%; transform: translateX(-50%); }

#ambf-panel.open {
    display: flex;
}

.ambf-header {
    background: var(--ambf-primary);
    color: var(--ambf-text);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ambf-header h3 {
    margin: 0;
    font-size: 16px;
    color: inherit !important;
}
#ambf-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.ambf-content {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
}

.ambf-group {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.ambf-group h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
}

.ambf-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ambf-controls button {
    background: #f0f0f0;
    border: 0 solid #ccc;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
    color: #333;
}
.ambf-controls button:hover {
    background: #e0e0e0;
}
.ambf-controls button.active {
    background: var(--ambf-primary);
    color: var(--ambf-text);
    border-color: var(--ambf-primary);
}

.ambf-reset-wrapper {
    text-align: center;
    margin-top: 10px;
}
#ambf-reset {
    background: transparent;
    border: 1px solid #d00;
    color: #d00;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
#ambf-reset:hover {
    background: #d00;
    color: #fff;
}

/* --- Accessibility Features Styles --- */

/* Font Size */
body.ambf-fontsize-1 { font-size: 110% !important; }
body.ambf-fontsize-2 { font-size: 125% !important; }
body.ambf-fontsize-3 { font-size: 150% !important; }

/* Readable Font */
body.ambf-font-readable * {
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 1.6 !important;
    letter-spacing: 0.05em !important;
}

/* Align Left */
body.ambf-align-left * {
    text-align: left !important;
}

/* Contrast Modes */
html.ambf-contrast-invert {
    filter: invert(100%);
}
html.ambf-contrast-invert img, 
html.ambf-contrast-invert video {
    filter: invert(100%); /* Re-invert images */
}

body.ambf-contrast-high * {
    background-color: #000 !important;
    color: #ff0 !important;
    border-color: #ff0 !important;
}
body.ambf-contrast-high a {
    color: #0ff !important;
    text-decoration: underline !important;
}

html.ambf-contrast-grayscale {
    filter: grayscale(100%);
}

/* Stop Animation */
body.ambf-animation-stop *,
body.ambf-animation-stop *:before,
body.ambf-animation-stop *:after {
    animation: none !important;
    transition: none !important;
}

/* Big Cursor */
body.ambf-cursor-big * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M0,0 L14,40 L22,26 L38,22 Z" /></svg>'), auto !important;
}

/* Reading Guide */
#ambf-reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 0, 0.7);
    z-index: 999998;
    pointer-events: none;
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
body.ambf-guide-active #ambf-reading-guide {
    display: block;
}

/* Reading Mask */
.ambf-mask {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999998;
    pointer-events: none;
    display: none;
}
body.ambf-mask-active .ambf-mask {
    display: block;
}

/* Responsive */
@media (max-width: 480px) {
    #ambf-panel {
        width: 90vw;
        right: 5vw !important;
        left: 5vw !important;
        transform: none !important;
    }
}
/* Basis Variablen */
:root {
    --ambf-primary: #005da6; /* Fallback */
    --ambf-text: #ffffff;    /* Fallback */
    --ambf-bg: #ffffff;
    --ambf-panel-width: 300px;
    --ambf-panel-width-mobile: 90vw;
    --ambf-zindex: 999999;
}

/* Skip Link */
.ambf-skip-link {
    position: absolute;
    top: -1000px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ambf-primary);
    color: var(--ambf-text);
    padding: 10px 20px;
    z-index: var(--ambf-zindex);
    text-decoration: none;
    font-weight: bold;
    transition: top 0.3s;
}
.ambf-skip-link:focus {
    top: 0;
}

/* Wrapper & Positionierung */
#ambf-wrapper {
    position: fixed;
    z-index: var(--ambf-zindex);
    font-family: sans-serif;
    line-height: 1.5;
}

/* Positionen */
.ambf-pos-bottom_right { bottom: 20px; right: 20px; }
.ambf-pos-bottom_left { bottom: 20px; left: 20px; }
.ambf-pos-left_center { top: 50%; left: 20px; transform: translateY(-50%); }
.ambf-pos-top_right { top: 20px; right: 20px; }
.ambf-pos-top_left { top: 20px; left: 20px; }
.ambf-pos-right_center { top: 50%; right: 20px; transform: translateY(-50%); }

/* Toggle Button */
#ambf-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--ambf-primary);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: transform 0.2s;
}
#ambf-toggle:hover, #ambf-toggle:focus {
    transform: scale(1.1);
    outline: 2px solid var(--ambf-primary);
    outline-offset: 2px;
}
#ambf-toggle svg {
    fill: var(--ambf-text);
    width: 100%;
    height: 100%;
}

/* Panel */
#ambf-panel {
    position: fixed;
    width: var(--ambf-panel-width);
    background: var(--ambf-bg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    display: none; /* JS toggles this */
    flex-direction: column;
    color: #333;
    border: 1px solid #ddd;
    z-index: var(--ambf-zindex);
}

/* Panel Position Logic via CSS classes on panel */
/* Fixed positions relative to viewport, independent of button offset */
.ambf-panel-pos-bottom_right { bottom: 90px; right: 20px; }
.ambf-panel-pos-bottom_left { bottom: 90px; left: 20px; }
.ambf-panel-pos-top_right { top: 50px; right: 20px; }
.ambf-panel-pos-top_left { top: 50px; left: 20px; }

/* Unification: Map center positions to top corners */
.ambf-panel-pos-left_center { top: 50px; left: 20px; }
.ambf-panel-pos-right_center { top: 50px; right: 20px; }

#ambf-panel.open {
    display: flex;
}

.ambf-header {
    background: var(--ambf-primary);
    color: var(--ambf-text);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ambf-header h3 {
    margin: 0;
    font-size: 16px;
    color: inherit !important;
}
#ambf-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.ambf-content {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
}

.ambf-group {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
/* Spezifischer Selektor + !important gegen Theme-Overrides */
#ambf-panel .ambf-group h4 {
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

.ambf-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Spezifischere Selektoren und !important gegen Theme-Styles */
#ambf-panel .ambf-controls button {
    background: #f0f0f0 !important;
    border: 0 solid #ccc !important;
    padding: 8px !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
    color: #333 !important;
    /* Text-Umbruch erzwingen */
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    height: auto;
    min-height: 40px; /* Mindesthöhe für Touch */
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.ambf-controls button:hover,
#ambf-panel .ambf-controls button:hover {
    background: #e0e0e0 !important;
}
.ambf-controls button.active,
#ambf-panel .ambf-controls button.active {
    background: var(--ambf-primary) !important;
    color: var(--ambf-text) !important;
    border-color: var(--ambf-primary) !important;
}

.ambf-reset-wrapper {
    text-align: center;
    margin-top: 10px;
}
#ambf-reset {
    background: transparent;
    border: 1px solid #d00;
    color: #d00;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
#ambf-reset:hover {
    background: #d00;
    color: #fff;
}

/* --- Accessibility Features Styles --- */

/* Font Size */
html.ambf-fontsize-1, body.ambf-fontsize-1 { font-size: 110% !important; }
html.ambf-fontsize-2, body.ambf-fontsize-2 { font-size: 125% !important; }
html.ambf-fontsize-3, body.ambf-fontsize-3 { font-size: 150% !important; }

/* Readable Font */
body.ambf-font-readable * {
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 1.6 !important;
    letter-spacing: 0.05em !important;
}

/* Align Left */
body.ambf-align-left * {
    text-align: left !important;
}

/* Highlight Links */
body.ambf-links-highlight a {
    text-decoration: underline !important;
    background-color: #ff0 !important;
    color: #000 !important;
}

/* Contrast Modes */
html.ambf-contrast-invert {
    filter: invert(100%);
}
html.ambf-contrast-invert img, 
html.ambf-contrast-invert video {
    filter: invert(100%); /* Re-invert images */
}

body.ambf-contrast-high * {
    background-color: #000 !important;
    color: #ff0 !important;
    border-color: #ff0 !important;
}
body.ambf-contrast-high a {
    color: #0ff !important;
    text-decoration: underline !important;
}

html.ambf-contrast-grayscale {
    filter: grayscale(100%);
}

/* Stop Animation */
body.ambf-animation-stop *,
body.ambf-animation-stop *:before,
body.ambf-animation-stop *:after {
    animation: none !important;
    transition: none !important;
}

/* Big Cursor */
body.ambf-cursor-big,
body.ambf-cursor-big * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M0,0 L14,40 L22,26 L38,22 Z" /></svg>'), auto !important;
}

/* Restore pointer for interactive elements */
body.ambf-cursor-big a,
body.ambf-cursor-big a *,
body.ambf-cursor-big button,
body.ambf-cursor-big button *,
body.ambf-cursor-big input[type="submit"],
body.ambf-cursor-big input[type="button"],
body.ambf-cursor-big label,
body.ambf-cursor-big select,
body.ambf-cursor-big [role="button"],
body.ambf-cursor-big [role="button"] * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" style="fill:white;stroke:black;stroke-width:2px;"><path d="M0,0 L14,40 L22,26 L38,22 Z" /></svg>'), pointer !important;
}

/* Reading Guide */
#ambf-reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 0, 0.7);
    z-index: 999998;
    pointer-events: none;
    display: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
body.ambf-guide-active #ambf-reading-guide {
    display: block;
}

/* Reading Mask */
.ambf-mask {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999998;
    pointer-events: none;
    display: none;
}
body.ambf-mask-active .ambf-mask {
    display: block;
}

/* Responsive */
@media (max-width: 480px) {
    /* Fix for centered positions: remove transform so fixed panel works */
    .ambf-pos-left_center,
    .ambf-pos-right_center {
        transform: none !important;
        top: calc(50% - 25px) !important;
    }

    #ambf-panel {
        position: fixed !important;
        width: var(--ambf-panel-width-mobile, 90vw);
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}