/* CSS-Variablen für Schriftgrößen */
:root {
    --base-font-size: 16px;
    --font-size-multiplier: 1.2;
    --widget-bg: #ffffff;
    --widget-border: #e0e0e0;
    --widget-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --primary-color: #753218;
    --hover-color: #5a2512;
    --text-color: #333333;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* Basis-Schriftgröße für die gesamte Seite */
html {
    font-size: calc(var(--base-font-size) * var(--font-size-multiplier));
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    transition: var(--transition);
}

/* Barrierefreiheits-Widget */
body .accessibility-widget {
    position: fixed !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 9999 !important;
    font-family: inherit;
}

/* Toggle-Button */
.accessibility-widget .widget-toggle {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--widget-shadow) !important;
    transition: var(--transition) !important;
    position: relative !important;
    z-index: 10001 !important;
}

.widget-toggle:hover,
.widget-toggle:focus {
    background: var(--hover-color);
    transform: scale(1.05);
    outline: none;
}

.widget-toggle:focus {
    box-shadow: 0 0 0 3px rgba(117, 50, 24, 0.3);
}

/* Widget-Panel */
.accessibility-widget .widget-panel {
    position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    width: 280px !important;
    background: var(--widget-bg) !important;
    border: 1px solid var(--widget-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--widget-shadow) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    transition: var(--transition) !important;
    z-index: 10000 !important;
}

.accessibility-widget .widget-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Widget-Header */
.accessibility-widget .widget-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--widget-border) !important;
}

.accessibility-widget .widget-header h3 {
    margin: 0 !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
}

.accessibility-widget .close-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 5px !important;
    border-radius: 4px !important;
    color: #666 !important;
    transition: var(--transition) !important;
}

.accessibility-widget .close-btn:hover,
.accessibility-widget .close-btn:focus {
    background: #f0f0f0 !important;
    color: var(--text-color) !important;
    outline: none !important;
}

/* Widget-Content */
.accessibility-widget .widget-content {
    padding: 20px !important;
}

.accessibility-widget .setting-group {
    margin-bottom: 20px !important;
}

.accessibility-widget .setting-group label {
    display: block !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
}

/* Schriftgrößen-Controls */
.accessibility-widget .font-size-controls {
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between !important;
}

.accessibility-widget .font-size-btn {
    flex: 1 !important;
    padding: 10px 8px !important;
    border: 2px solid var(--widget-border) !important;
    background: var(--widget-bg) !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: var(--transition) !important;
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.accessibility-widget .font-size-btn:hover,
.accessibility-widget .font-size-btn:focus {
    border-color: var(--primary-color) !important;
    background: #f8f9fa !important;
    outline: none !important;
}

.accessibility-widget .font-size-btn.active {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* Schriftgrößen der Buttons */
.accessibility-widget .font-size-btn[data-size="1.0"] { font-size: 1em; }
.accessibility-widget .font-size-btn[data-size="1.1"] { font-size: 1.1em; }
.accessibility-widget .font-size-btn[data-size="1.2"] { font-size: 1.2em; }
.accessibility-widget .font-size-btn[data-size="1.3"] { font-size: 1.3em; }
.accessibility-widget .font-size-btn[data-size="1.4"] { font-size: 1.4em; }

/* Test-Content Styling */
.test-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.test-content h1 {
    color: var(--text-color);
    margin-bottom: 20px;
}

.test-content h2 {
    color: var(--text-color);
    margin-top: 30px;
    margin-bottom: 15px;
}

.test-content h3 {
    color: var(--text-color);
    margin-top: 25px;
    margin-bottom: 10px;
}

.test-content p {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .accessibility-widget {
        right: 10px;
    }
    
    .widget-panel {
        right: 50px;
        width: 250px;
    }
    
    .font-size-controls {
        gap: 5px;
    }
    
    .font-size-btn {
        min-width: 35px;
        height: 35px;
        padding: 8px 6px;
    }
}

/* Barrierefreiheit: Focus-Indikatoren */
.accessibility-widget .font-size-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth Transitions für Schriftgrößen-Änderungen */
* {
    transition: font-size 0.3s ease;
}