/* ========================================================= fragCihan Dark Theme Add-on Aktivierung über: ========================================================= */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --fc-dark-bg: #000000; --fc-dark-surface: #111214; --fc-dark-card: #1d1d1f; --fc-dark-card-soft: #2B2B2B; --fc-dark-text: #f5f5f7; --fc-dark-muted: #a1a1a6; --fc-dark-muted-2: #86868b; --fc-dark-line: rgba(255, 255, 255, 0.10); --fc-dark-line-soft: rgba(255, 255, 255, 0.075); --fc-dark-blue: #2997ff; } html[data-theme="dark"] body, html[data-theme="dark"] .fc-page { background: var(--fc-dark-bg) !important; color: var(--fc-dark-text) !important; } /* Backgrounds */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-\[\#ffffff\], html[data-theme="dark"] .bg-\[\#fbfbfd\] { background-color: var(--fc-dark-card) !important; } html[data-theme="dark"] .bg-\[\#f5f5f7\], html[data-theme="dark"] .bg-\[\#f7f7f8\], html[data-theme="dark"] .bg-\[\#fafafa\], html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .bg-white\/70, html[data-theme="dark"] .bg-white\/60 { background-color: var(--fc-dark-card-soft) !important; } html[data-theme="dark"] .bg-\[\#1d1d1f\], html[data-theme="dark"] .bg-\[\#111214\], html[data-theme="dark"] .bg-black { background-color: #000000 !important; } /* Text */ html[data-theme="dark"] .text-\[\#1d1d1f\], html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-\[\#111214\] { color: var(--fc-dark-text) !important; } html[data-theme="dark"] .text-\[\#6e6e73\], html[data-theme="dark"] .text-\[\#86868b\], html[data-theme="dark"] .text-\[\#1d1d1f\]\/70, html[data-theme="dark"] .text-\[\#1d1d1f\]\/60 { color: var(--fc-dark-muted) !important; } html[data-theme="dark"] .text-\[\#0071e3\] { color: var(--fc-dark-blue) !important; } html[data-theme="dark"] .text-transparent.bg-clip-text { background-image: linear-gradient(90deg, #f5f5f7, #86868b) !important; } /* Borders / rings / shadows */ html[data-theme="dark"] .ring-black\/5, html[data-theme="dark"] .ring-black\/10, html[data-theme="dark"] .border-black\/5, html[data-theme="dark"] .border-black\/10 { --tw-ring-color: var(--fc-dark-line) !important; border-color: var(--fc-dark-line) !important; } html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-xl, html[data-theme="dark"] .shadow-2xl, html[data-theme="dark"] .shadow-apple { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36) !important; } /* Island Navigation */ html[data-theme="dark"] .island-nav, html[data-theme="dark"] .island-menu-panel { background: rgba(29, 29, 31, 0.76) !important; color: var(--fc-dark-text) !important; border-color: var(--fc-dark-line) !important; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(24px); } html[data-theme="dark"] .island-brand-text, html[data-theme="dark"] .island-menu-title, html[data-theme="dark"] .island-menu-link, html[data-theme="dark"] .island-menu-footer a { color: var(--fc-dark-text) !important; } html[data-theme="dark"] .island-menu-eyebrow, html[data-theme="dark"] .island-link-num, html[data-theme="dark"] .island-menu-footer { color: var(--fc-dark-muted) !important; } html[data-theme="dark"] .island-menu-link:hover { background: rgba(255, 255, 255, 0.08) !important; } /* Cards */ html[data-theme="dark"] .local-hover-card, html[data-theme="dark"] article.bg-white, html[data-theme="dark"] a.bg-white, html[data-theme="dark"] div.bg-white { background-color: var(--fc-dark-card) !important; color: var(--fc-dark-text) !important; } html[data-theme="dark"] .local-white-card-title { color: var(--fc-dark-text) !important; } /* Glass / white transparency */ html[data-theme="dark"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .bg-white\/5 { background-color: rgba(255, 255, 255, 0.055) !important; } /* Forms */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--fc-dark-card-soft) !important; color: var(--fc-dark-text) !important; border-color: var(--fc-dark-line) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--fc-dark-muted-2) !important; } /* Footer */ html[data-theme="dark"] footer { background: var(--fc-dark-card) !important; border-color: var(--fc-dark-line) !important; } html[data-theme="dark"] footer a, html[data-theme="dark"] footer .text-\[\#1d1d1f\] { color: var(--fc-dark-text) !important; } html[data-theme="dark"] footer p, html[data-theme="dark"] footer .text-\[\#86868b\] { color: var(--fc-dark-muted) !important; } /* Tables from patches */ html[data-theme="dark"] .fc-kids-table, html[data-theme="dark"] .firma-coverage-table { background: var(--fc-dark-card) !important; border-color: var(--fc-dark-line) !important; } html[data-theme="dark"] .fc-kids-table-head { background: var(--fc-dark-card-soft) !important; color: var(--fc-dark-text) !important; } html[data-theme="dark"] .fc-kids-table-cell, html[data-theme="dark"] .firma-coverage-cell { border-color: var(--fc-dark-line-soft) !important; } html[data-theme="dark"] .fc-kids-table-label, html[data-theme="dark"] .fc-kids-table-label strong, html[data-theme="dark"] .fc-kids-table-value { color: var(--fc-dark-text) !important; } /* Theme Toggle */ .fc-theme-toggle { position: fixed; top: 18px; right: max(18px, calc((100vw - 1280px) / 2 + 18px)); bottom: auto; z-index: 10002; width: 94px; height: 46px; display: inline-flex; align-items: center; justify-content: space-between; gap: 0; padding: 4px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.78); color: #1d1d1f; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), background-color 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 500ms cubic-bezier(0.22, 1, 0.36, 1); } .fc-theme-toggle:hover { transform: translateY(-1px) scale(1.015); } .fc-theme-toggle-icon { position: relative; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: rgba(29, 29, 31, 0.62); transition: color 450ms cubic-bezier(0.22, 1, 0.36, 1); } .fc-theme-toggle-knob { position: absolute; left: 4px; top: 4px; width: 38px; height: 38px; border-radius: 999px; background: #ffffff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), background-color 500ms cubic-bezier(0.22, 1, 0.36, 1); } html[data-theme="dark"] .fc-theme-toggle { background: rgba(29, 29, 31, 0.78); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46); } html[data-theme="dark"] .fc-theme-toggle-knob { transform: translateX(48px); background: #2B2B2B; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .fc-theme-toggle-icon { color: rgba(255, 255, 255, 0.58); } html:not([data-theme="dark"]) .fc-theme-toggle-icon-sun, html[data-theme="dark"] .fc-theme-toggle-icon-moon { color: #0071e3; } /* Micro Trust dark-mode polish */ html[data-theme="dark"] [data-micro-trust] .gsap-reveal { background: rgba(255, 255, 255, 0.055) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34) !important; } html[data-theme="dark"] [data-micro-trust] .micro-trust-card { background: rgba(255, 255, 255, 0.075) !important; border: 1px solid rgba(255, 255, 255, 0.095) !important; color: var(--fc-dark-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); } html[data-theme="dark"] [data-micro-trust] .micro-trust-card p { color: rgba(245, 245, 247, 0.88) !important; } html[data-theme="dark"] [data-micro-trust] .micro-soft-ring-petrol, html[data-theme="dark"] [data-micro-trust] .micro-soft-ring-gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] [data-micro-trust] .micro-kicker-petrol { color: #63d6c5 !important; } html[data-theme="dark"] [data-micro-trust] .micro-kicker-gold { color: #f2b759 !important; } /* Same hover for all four trust cards, including non-link div cards */ [data-micro-trust] .micro-trust-card { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), background-color 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1), border-color 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } @media (hover: hover) and (pointer: fine) { [data-micro-trust] .micro-trust-card:hover { transform: translateY(-4px) scale(1.018); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12) !important; } html[data-theme="dark"] [data-micro-trust] .micro-trust-card:hover { background: rgba(255, 255, 255, 0.105) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 24px 68px rgba(0, 0, 0, 0.32) !important; } } @media (max-width: 640px) { .fc-theme-toggle { top: 14px; right: 72px; bottom: auto; width: 78px; height: 40px; } .fc-theme-toggle-icon { width: 32px; height: 32px; font-size: 13px; } .fc-theme-toggle-knob { width: 32px; height: 32px; } html[data-theme="dark"] .fc-theme-toggle-knob { transform: translateX(38px); } } @media (prefers-reduced-motion: reduce) { .fc-theme-toggle, .fc-theme-toggle-knob, .fc-theme-toggle-icon { transition: none !important; } } /* Update: Micro Trust loose cards in Dark Mode Removes the big background container behind the 4 cards. */ html[data-theme="dark"] [data-micro-trust] .gsap-reveal { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; } html[data-theme="dark"] [data-micro-trust] .micro-trust-card { background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.062)) !important; border: 1px solid rgba(255, 255, 255, 0.105) !important; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } @media (hover: hover) and (pointer: fine) { html[data-theme="dark"] [data-micro-trust] .micro-trust-card:hover { background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.085)) !important; border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } } @media (max-width: 640px) { html[data-theme="dark"] [data-micro-trust] .gsap-reveal { gap: 0.75rem !important; } } /* Mobile Theme Toggle Position Fix Prevents overlap with the island navbar/menu button. */ @media (max-width: 640px) { .fc-theme-toggle { top: 86px !important; right: 14px !important; bottom: auto !important; width: 78px !important; height: 40px !important; z-index: 9997 !important; } .fc-theme-toggle-icon { width: 32px !important; height: 32px !important; font-size: 13px !important; } .fc-theme-toggle-knob { width: 32px !important; height: 32px !important; } html[data-theme="dark"] .fc-theme-toggle-knob { transform: translateX(38px) !important; } } @media (max-width: 390px) { .fc-theme-toggle { top: 82px !important; right: 12px !important; width: 74px !important; height: 38px !important; } .fc-theme-toggle-icon, .fc-theme-toggle-knob { width: 30px !important; height: 30px !important; } html[data-theme="dark"] .fc-theme-toggle-knob { transform: translateX(36px) !important; } } /* ========================================================= Simple Apple Micro Trust Cards — data-theme dark fix No wrapper background, no gradients, free-floating Bento cards ========================================================= */ html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] .gsap-reveal { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article { background: rgba(255,255,255,.055) !important; color: #f5f5f7 !important; border-color: rgba(255,255,255,.10) !important; --tw-ring-color: rgba(255,255,255,.10) !important; box-shadow: 0 22px 70px rgba(0,0,0,.22) !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article:hover { border-color: rgba(0,113,227,.38) !important; --tw-ring-color: rgba(0,113,227,.32) !important; box-shadow: 0 28px 86px rgba(0,0,0,.32) !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article h3, html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article .text-\[\#1d1d1f\] { color: #f5f5f7 !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article p, html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article .text-\[\#6e6e73\] { color: rgba(245,245,247,.70) !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article .text-\[\#0071e3\], html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article a:not(.bg-white) { color: #2997ff !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article .bg-white:not(a) { background: rgba(255,255,255,.92) !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] article a.bg-white { background: #f5f5f7 !important; color: #1d1d1f !important; } html[data-theme="dark"] [data-micro-trust][data-simple-micro-trust] img { filter: drop-shadow(0 14px 28px rgba(0,0,0,.28)); }