[data-theme="light"] {
    color-scheme: light;
    --color-surface-primary: #FFFFFF;
    --color-surface-primary-variant: #FAFAFA;
    --color-surface-secondary: #FFFFFF;
    --color-shell-surface: var(--color-surface-primary-variant);
    --color-input-surface: #FFFFFF;
    --color-text-primary: #111111;
    --color-text-secondary: #5D5D5D;
    /* Kontextfarbe des Light-Themes: CTA- und Auswahlzustände nur hier anpassen */
    --color-context-background: #007BB4;
    --color-context-foreground: #FFFFFF;
    --color-interactive-cta: var(--color-context-background);
    --color-interactive-cta-hover: color-mix(in srgb, var(--color-context-background) 85%, #000000);
    --color-interactive-cta-text: var(--color-context-foreground);
    --color-interactive-active: var(--color-context-background);
    --color-interactive-hover: #969696;
    --color-border: #B0B7C0;
    --color-border-shell: #C5CBD3;
    --color-border-rgb: 176, 183, 192;
    --color-error-surface: #FFEBEE;
    --color-error-foreground: #C62828;
    --color-success-surface: #E8F5E9;
    --color-success-foreground: #2E7D32;
    --color-warning-surface: #FFF4E5;
    --color-warning-foreground: #B26500;
    --color-toggle-knob: #969696;
    --shadow-level1: 4px 0 16px -4px rgba(0,0,0,0.1);
    --shadow-level2: 0 4px 6px -1px rgba(0,0,0,0.1);
    --form-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='translate(0 960) scale(1 -1)' fill='%235D5D5D' d='M905.887 599.834l-393.887-394.063-393.887 394.063 24.894 24.894 368.993-368.993 368.993 368.993z'/%3E%3C/svg%3E");
}

/* Light theme specific error message styling */
[data-theme="light"] .error-message-external {
    background-color: var(--color-error-surface);
    color: var(--color-error-foreground);
    border: 1px solid var(--color-error-foreground);
}

/* Overflow-Selection im Light Theme an CTA-Akzent anpassen */
[data-theme="light"] .bottom-nav-overflow-item.active {
    background-color: var(--color-context-background);
}

[data-theme="light"] .bottom-nav-overflow-item.active .bottom-nav-overflow-item-text,
[data-theme="light"] .bottom-nav-overflow-item.active .bottom-nav-overflow-item-icon {
    color: var(--color-context-foreground);
}

/* Floating Action Button im Light Theme anpassen */
[data-theme="light"] .fab {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .fab:active {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
}

/* Linkfarbe im Light Theme anpassen */
[data-theme="light"] a,
[data-theme="light"] .form-link,
[data-theme="light"] .switch-login-type-link {
    color: var(--color-context-background);
}

[data-theme="light"] a:hover,
[data-theme="light"] .form-link:hover,
[data-theme="light"] .switch-login-type-link:hover {
    color: var(--color-interactive-hover);
}

/* Trennlinien in der SPA für das Light Theme - nutzt --color-border-shell */
[data-theme="light"] .titlebar,
[data-theme="light"] .toolbar,
[data-theme="light"] .mobile-toolbar {
    border-bottom-color: var(--color-border-shell);
}

[data-theme="light"] .app-content.with-toolbar {
    background-color: var(--color-surface-primary);
}

[data-theme="light"] .sidenav {
    border-right-color: var(--color-border-shell);
}

[data-theme="light"] .bottom-navigation,
[data-theme="light"] .buttonbar,
[data-theme="light"] .statusbar {
    border-top-color: var(--color-border-shell);
}