/* ===== BANKINGPAL DARK MODE ===== */
/* Shared dark mode styles for all pages */

/* --- Semantic variables (Light defaults) --- */
:root {
    --bg-page: color-mix(in srgb, var(--primary-50) 50%, white);
    --bg-page-plain: #fff;
    --bg-nav: transparent;
    --bg-nav-scrolled: rgba(255, 255, 255, 0.92);
    --bg-nav-static: rgba(255, 255, 255, 0.95);
    --bg-mobile-menu: rgba(255, 255, 255, 0.98);
    --bg-card: #fff;
    --bg-card-alt: var(--gray-50);
    --bg-overlay-card: #fff;
    --bg-hero: linear-gradient(135deg, color-mix(in srgb, var(--primary-200) 60%, white) 0%, color-mix(in srgb, var(--primary-100) 70%, white) 50%, color-mix(in srgb, var(--primary-200) 60%, white) 100%);
    --bg-hero-fade: linear-gradient(to top, #edf2fa, transparent);
    --bg-hero-grid-h: linear-gradient(color-mix(in srgb, var(--primary-500) 8%, transparent) 1px, transparent 1px);
    --bg-hero-grid-v: linear-gradient(90deg, color-mix(in srgb, var(--primary-500) 7%, transparent) 1px, transparent 1px);
    --bg-hero-blob1: radial-gradient(circle, color-mix(in srgb, var(--primary-500) 18%, transparent) 0%, color-mix(in srgb, var(--primary-500) 10%, transparent) 50%, transparent 70%);
    --bg-hero-blob2: radial-gradient(circle, color-mix(in srgb, var(--primary-400) 14%, transparent) 0%, color-mix(in srgb, var(--primary-500) 9%, transparent) 50%, transparent 70%);
    --bg-features: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-screenshots: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-pocket-screenshots: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-video: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-how-it-works: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-cta: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-disclaimer: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-why: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-comparison: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-news: linear-gradient(180deg, color-mix(in srgb, var(--primary-100) 45%, white) 0%, color-mix(in srgb, var(--primary-50) 70%, white) 100%);
    --bg-android: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-screenshot-placeholder: linear-gradient(135deg, #fafafa 0%, #f0f0f0 50%, #e8e8e8 100%);
    --bg-faq-page: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--primary-200) 25%, var(--gray-50)) 100%);
    --bg-faq-question: #fff;
    --bg-warning-box: #fffbeb;
    --border-warning-box: #fde68a;
    --color-warning-icon: #b45309;
    --color-warning-text: #92400e;
    --bg-badge-new: #dcfce7;
    --color-badge-new: #16a34a;
    --bg-badge-improved: #dbeafe;
    --color-badge-improved: #2563eb;
    --bg-badge-experimental: #fef3c7;
    --color-badge-experimental: #d97706;
    --shadow-hero-icon: 0 24px 70px color-mix(in srgb, var(--primary-600) 30%, transparent), 0 12px 35px color-mix(in srgb, var(--primary-500) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-600) 10%, transparent);
}

/* --- Dark theme variable overrides --- */
[data-theme="dark"] {
    /* Gray palette (inverted for text/bg) */
    --gray-50: #1e293b;
    --gray-100: #283548;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94a3b8;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #e2e8f0;
    --gray-900: #f1f5f9;

    /* Primary palette (BankingPal Pocket Teal – brightened) */
    --primary-50: #07433a;
    --primary-100: #0a6753;
    --primary-200: #0c8268;
    --primary-400: #2cccaa;
    --primary-500: #3edabb;
    --primary-600: #5ce4c9;
    --primary-700: #8aeed8;
    --primary-800: #0a6753;
    --primary-900: #07433a;

    /* Accent palette (Edition RED – brightened) */
    --accent-50: #3a0a08;
    --accent-100: #5e120f;
    --accent-200: #911612;
    --accent-400: #f08882;
    --accent-500: #ef6f68;
    --accent-600: #f29691;
    --accent-700: #f6bdb9;

    /* Shadows (darker) */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);

    /* Semantic overrides */
    --bg-page: #0b1120;
    --bg-page-plain: #0f172a;
    --bg-nav-scrolled: rgba(15, 23, 42, 0.92);
    --bg-nav-static: rgba(15, 23, 42, 0.95);
    --bg-mobile-menu: rgba(15, 23, 42, 0.98);
    --bg-card: #1e293b;
    --bg-card-alt: #1e293b;
    --bg-overlay-card: #1e293b;
    --bg-hero: linear-gradient(135deg, color-mix(in srgb, var(--primary-700) 35%, #0a0e1a) 0%, color-mix(in srgb, var(--primary-800) 40%, #0a0e1a) 50%, color-mix(in srgb, var(--primary-700) 35%, #0a0e1a) 100%);
    --bg-hero-fade: linear-gradient(to top, #0b1120, transparent);
    --bg-hero-grid-h: linear-gradient(color-mix(in srgb, var(--primary-400) 6%, transparent) 1px, transparent 1px);
    --bg-hero-grid-v: linear-gradient(90deg, color-mix(in srgb, var(--primary-400) 5%, transparent) 1px, transparent 1px);
    --bg-hero-blob1: radial-gradient(circle, color-mix(in srgb, var(--primary-500) 10%, transparent) 0%, color-mix(in srgb, var(--primary-500) 7%, transparent) 50%, transparent 70%);
    --bg-hero-blob2: radial-gradient(circle, color-mix(in srgb, var(--primary-400) 8%, transparent) 0%, color-mix(in srgb, var(--primary-500) 6%, transparent) 50%, transparent 70%);
    --bg-features: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-screenshots: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-pocket-screenshots: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-video: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-how-it-works: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-cta: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-disclaimer: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-why: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-comparison: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-news: linear-gradient(180deg, color-mix(in srgb, var(--primary-700) 22%, #0a0e1a) 0%, color-mix(in srgb, var(--primary-700) 38%, #0a0e1a) 100%);
    --bg-android: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-screenshot-placeholder: linear-gradient(135deg, #1e293b 0%, #283548 50%, #334155 100%);
    --bg-faq-page: linear-gradient(180deg, #0a0e1a 0%, color-mix(in srgb, var(--primary-700) 40%, #0a0e1a) 100%);
    --bg-faq-question: #1e293b;
    --bg-warning-box: #422006;
    --border-warning-box: #854d0e;
    --color-warning-icon: #fbbf24;
    --color-warning-text: #fde68a;
    --bg-badge-new: #064e3b;
    --color-badge-new: #4ade80;
    --bg-badge-improved: #172554;
    --color-badge-improved: #60a5fa;
    --bg-badge-experimental: #451a03;
    --color-badge-experimental: #fbbf24;
    --shadow-hero-icon: 0 24px 70px color-mix(in srgb, var(--primary-500) 22%, transparent), 0 12px 35px color-mix(in srgb, var(--primary-400) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-500) 18%, transparent);
}

/* --- Smooth transitions --- */
body,
nav,
nav.scrolled,
.feature-card,
.why-card,
.faq-question,
.disclaimer-section,
.version-card,
.comparison-wrapper,
.download-overlay-card,
.btn-secondary,
.download-link,
footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- Toggle button --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle:hover {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

/* Show moon in light, sun in dark */
.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* --- Footer: pin to dark (gray inversion would make it light) --- */
[data-theme="dark"] footer {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] footer a {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] footer a:hover {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .footer-brand span {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .footer-copy {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* --- Security section: already dark, pin it --- */
[data-theme="dark"] .security {
    background:
                radial-gradient(ellipse at top left, color-mix(in srgb, var(--primary-700) 65%, #0a1628) 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--primary-800) 55%, #0a1628) 0%, transparent 55%),
                linear-gradient(135deg, #0d1424 0%, #0a1019 100%);
    color: #fff;
}

[data-theme="dark"] .security .section-header h2 {
    color: #fff;
}

[data-theme="dark"] .security .section-header p {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .security .section-label {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-600);
}

[data-theme="dark"] .security-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .security-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .security-item h3 {
    color: #fff;
}

[data-theme="dark"] .security-item p {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .security-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
}

[data-theme="dark"] .security-icon svg {
    color: var(--primary-600);
}

[data-theme="dark"] .security-item:nth-child(even) .security-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 22%, transparent), color-mix(in srgb, var(--primary-500) 12%, transparent));
}

[data-theme="dark"] .security-item:nth-child(even) .security-icon svg {
    color: #4ade80;
}

/* --- iOS section: already dark, pin it --- */
[data-theme="dark"] .ios-section {
    background:
                radial-gradient(ellipse at top left, color-mix(in srgb, var(--primary-700) 65%, #0a1628) 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--primary-800) 55%, #0a1628) 0%, transparent 55%),
                linear-gradient(135deg, #0d1424 0%, #0a1019 100%);
    color: #fff;
}

[data-theme="dark"] .ios-section .section-header h2 {
    color: #fff;
}

[data-theme="dark"] .ios-section .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .ios-section .section-label {
    background: color-mix(in srgb, var(--primary-500) 18%, transparent);
    /* war hart auf #4ade80 (gruen) und blieb damit in allen anderen Akzentfarben gruen */
    color: var(--primary-600);
}

/* --- CTA box: already uses gradient dark bg, pin it --- */
[data-theme="dark"] .cta-box {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--primary-800) 100%);
}

[data-theme="dark"] .cta-box h2 {
    color: #fff;
}

[data-theme="dark"] .cta-box p {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .cta-requirements span {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Comparison table --- */
[data-theme="dark"] .comparison-wrapper {
    background: var(--bg-card);
}

/* --- Changelog badge overrides --- */
[data-theme="dark"] .change-icon.new {
    background: var(--bg-badge-new);
    color: var(--color-badge-new);
}

[data-theme="dark"] .change-icon.improved {
    background: var(--bg-badge-improved);
    color: var(--color-badge-improved);
}

[data-theme="dark"] .change-icon.experimental {
    background: var(--bg-badge-experimental);
    color: var(--color-badge-experimental);
}

[data-theme="dark"] .legend-dot.new {
    background: var(--bg-badge-new);
    border-color: var(--color-badge-new);
}

[data-theme="dark"] .legend-dot.improved {
    background: var(--bg-badge-improved);
    border-color: var(--color-badge-improved);
}

[data-theme="dark"] .legend-dot.experimental {
    background: var(--bg-badge-experimental);
    border-color: var(--color-badge-experimental);
}

/* --- Version card latest --- */
[data-theme="dark"] .version-card.latest {
    border-color: color-mix(in srgb, var(--primary-500) 35%, #1e293b);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-700) 30%, #0a0e1a) 0%, #1e293b 60%);
}

/* --- FAQ question hover --- */
[data-theme="dark"] .faq-question:hover {
    background: #283548;
}

[data-theme="dark"] .faq-item.active .faq-question {
    background: color-mix(in srgb, var(--primary-700) 30%, #1e293b);
}

/* --- FAQ warning box --- */
[data-theme="dark"] .warning-box {
    background: var(--bg-warning-box);
    border-color: var(--border-warning-box);
}

[data-theme="dark"] .warning-box svg {
    color: var(--color-warning-icon);
}

[data-theme="dark"] .warning-box p,
[data-theme="dark"] .warning-box strong {
    color: var(--color-warning-text);
}

/* --- FAQ step box --- */
[data-theme="dark"] .step-box {
    background: var(--bg-card);
}

/* --- Download overlay --- */
[data-theme="dark"] .download-overlay-card {
    background: var(--bg-overlay-card);
}

[data-theme="dark"] .download-overlay-close {
    background: #334155;
}

[data-theme="dark"] .download-overlay-close:hover {
    background: #475569;
}

/* --- Partial (comparison table orange) --- */
[data-theme="dark"] .partial {
    color: #fbbf24;
}

/* --- Changelog switch buttons (inline style overrides) --- */
[data-theme="dark"] .changelog-switch-active {
    background: var(--primary-100) !important;
    color: var(--primary-600) !important;
}

[data-theme="dark"] .changelog-switch-inactive {
    background: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-600) !important;
}

/* --- Feature badges (NEU / Experimentell) --- */
[data-theme="dark"] .feature-badge-new {
    background: var(--primary-100);
    color: var(--primary-600);
}

[data-theme="dark"] .feature-badge-experimental {
    background: #422006;
    color: #fbbf24;
}

/* --- Breaking-News-Band --- */
[data-theme="dark"] .news-band {
    border-top-color: var(--gray-200);
    border-bottom-color: var(--gray-200);
}

/* Im Dark Mode sind --primary-600/700 hell -> dunkle Stops nehmen,
   damit der weisse Text in allen 5 Akzentfarben traegt. */
[data-theme="dark"] .news-card--lead {
    background: linear-gradient(140deg, var(--primary-100), var(--primary-50));
}

[data-theme="dark"] .news-card--lead .news-tag,
[data-theme="dark"] .news-card--lead li {
    background: rgba(255, 255, 255, 0.14);
}

/* --- Android-Sektion --- */
[data-theme="dark"] .android-section {
    border-top-color: var(--gray-200);
}

[data-theme="dark"] .android-card {
    background: linear-gradient(140deg, var(--primary-100), var(--primary-50));
}

[data-theme="dark"] .android-card .android-badge {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .android-cta-btn {
    background: #fff;
    color: #0f172a;
}

[data-theme="dark"] .android-note {
    background: var(--bg-warning-box);
    border-color: var(--border-warning-box);
}

[data-theme="dark"] .android-note svg {
    color: var(--color-warning-icon);
}

[data-theme="dark"] .android-note p,
[data-theme="dark"] .android-note strong {
    color: var(--color-warning-text);
}