/* uilivery Dark Mode v1 */

/* ===== DARK MODE VARIABLES ===== */
[data-theme="dark"] {
  --dark: #e2e2ec;
  --dark-800: #c4c4ce;
  --dark-700: #9b9baa;
  --dark-600: #9b9baa;
  --gray-500: #8a8a9a;
  --gray-400: #6b6b80;
  --gray-300: #353558;
  --gray-200: #252540;
  --gray-100: #1a1a2e;
  --white: #12121f;

  --gradient-hero: linear-gradient(135deg, #0e0e1a 0, #12121f 50%, #1a1520 100%);
  --gradient-card: linear-gradient(135deg, #1a1a2e 0, #1e2a35 100%);
  --gradient-cta: linear-gradient(135deg, #0e0e1a 0, #12121f 50%, #1a1520 100%);
  --gradient-soft: linear-gradient(180deg, #12121f 0, #1a1a2e 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-warm: 0 8px 32px rgba(255, 149, 81, 0.1);
  --shadow-glow: 0 0 40px rgba(111, 237, 214, 0.1);

  --gray-50: #1a1a2e;

  color-scheme: dark;
}

/* ===== BODY & GLOBAL ===== */
[data-theme="dark"] body {
  background-color: #0e0e1a;
  color: #e2e2ec;
}

[data-theme="dark"] a {
  color: #c4c4ce;
}

[data-theme="dark"] a:hover {
  color: var(--mint);
}

/* ===== NAVBAR ===== */
[data-theme="dark"] .nav-bar {
  background: rgba(14, 14, 26, 0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .nav-bar.scrolled {
  background: rgba(14, 14, 26, 0.98) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .nav-links a {
  color: #c4c4ce;
}

[data-theme="dark"] .nav-links a:hover {
  color: var(--mint);
}

[data-theme="dark"] .lang-switcher a {
  color: #9b9baa;
}

[data-theme="dark"] .lang-switcher a.active,
[data-theme="dark"] .lang-switcher a:hover {
  color: var(--mint);
}

/* ===== MEGA MENU ===== */
[data-theme="dark"] .mega-menu {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mega-category-title {
  color: #e2e2ec !important;
}

[data-theme="dark"] .mega-link {
  color: #9b9baa !important;
}

[data-theme="dark"] .mega-link:hover {
  color: var(--mint) !important;
}

[data-theme="dark"] .mega-cta {
  background: rgba(111, 237, 214, 0.05) !important;
  border-top: 1px solid rgba(111, 237, 214, 0.1) !important;
}

/* ===== HERO ===== */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0e0e1a 0, #12121f 50%, #1a1520 100%);
}

[data-theme="dark"] .hero h1 {
  color: #e2e2ec;
}

[data-theme="dark"] .hero p {
  color: #9b9baa;
}

[data-theme="dark"] .hero .highlight {
  color: var(--mint);
}

/* ===== STAT COUNTERS ===== */
[data-theme="dark"] .stat-bar {
  background: #1a1a2e;
  border-top: 1px solid rgba(111, 237, 214, 0.08);
}

/* ===== SECTION BACKGROUNDS ===== */
[data-theme="dark"] section {
  background-color: #0e0e1a !important;
}

[data-theme="dark"] section:nth-child(even),
[data-theme="dark"] .cs-section:nth-child(even) {
  background-color: #12121f !important;
}

[data-theme="dark"] #prozess {
  background-color: #12121f !important;
  background: #12121f !important;
}

[data-theme="dark"] #prozess > div[style*="background"] {
  background: rgba(111, 237, 214, 0.03) !important;
}

[data-theme="dark"] .section-mint,
[data-theme="dark"] .section-gray {
  background-color: #12121f !important;
}

[data-theme="dark"] .section-label {
  color: var(--mint-dark) !important;
}

/* ===== CARDS (Service, Color-Tile, Process, etc.) ===== */
[data-theme="dark"] .service-card,
[data-theme="dark"] .process-step,
[data-theme="dark"] .cs-related-card,
[data-theme="dark"] .insight-card,
[data-theme="dark"] .ref-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .process-step:hover,
[data-theme="dark"] .cs-related-card:hover,
[data-theme="dark"] .insight-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(111, 237, 214, 0.15);
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .process-step h3,
[data-theme="dark"] .insight-card h3 {
  color: #e2e2ec;
}

[data-theme="dark"] .service-card p,
[data-theme="dark"] .process-step p,
[data-theme="dark"] .insight-card .card-excerpt {
  color: #9b9baa;
}

/* ===== COLOR TILES ===== */
[data-theme="dark"] .color-tile-mint {
  background: linear-gradient(135deg, #0e1f1c, #132a25) !important;
  border-color: rgba(111, 237, 214, 0.15) !important;
}

[data-theme="dark"] .color-tile-orange {
  background: linear-gradient(135deg, #1f150e, #2a1c13) !important;
  border-color: rgba(255, 149, 81, 0.15) !important;
}

[data-theme="dark"] .color-tile-red {
  background: linear-gradient(135deg, #1f0e0e, #2a1313) !important;
  border-color: rgba(255, 74, 74, 0.15) !important;
}

[data-theme="dark"] .color-tile-white {
  background: linear-gradient(135deg, #1a1a2e, #252540) !important;
  border-color: rgba(111, 237, 214, 0.08) !important;
}

[data-theme="dark"] .color-tile h4 {
  color: #e2e2ec;
}

/* ===== SPLIT SECTION (Warum uilivery) ===== */
[data-theme="dark"] .split-section {
  background: #0e0e1a;
}

[data-theme="dark"] .split-content h2 {
  color: #e2e2ec;
}

[data-theme="dark"] .split-content p {
  color: #9b9baa;
}

[data-theme="dark"] .usp-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .usp-card h4 {
  color: #e2e2ec;
}

[data-theme="dark"] .usp-card p {
  color: #9b9baa;
}

/* ===== PRICING / PACKAGES ===== */
[data-theme="dark"] .pricing-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .pricing-card:hover {
  border-color: rgba(111, 237, 214, 0.2);
}

[data-theme="dark"] .pricing-card h3 {
  color: #e2e2ec;
}

[data-theme="dark"] .pricing-card .price {
  color: var(--mint);
}

/* ===== TESTIMONIALS ===== */
[data-theme="dark"] .testimonial-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .testimonial-card p {
  color: #c4c4ce;
}

/* ===== FAQ ===== */
[data-theme="dark"] .faq-item {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08) !important;
}

[data-theme="dark"] .faq-question {
  color: #e2e2ec !important;
}

[data-theme="dark"] .faq-answer {
  color: #9b9baa;
}

/* ===== CTA SECTION ===== */
[data-theme="dark"] .cta-section,
[data-theme="dark"] .final-cta {
  background: linear-gradient(135deg, #0e0e1a 0, #12121f 50%, #1a1520 100%) !important;
}

/* ===== BOOKING PANEL ===== */
[data-theme="dark"] .booking-panel {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.1);
}

[data-theme="dark"] .booking-panel input,
[data-theme="dark"] .booking-panel select,
[data-theme="dark"] .booking-panel textarea {
  background: #252540 !important;
  color: #e2e2ec !important;
  border-color: rgba(111, 237, 214, 0.15) !important;
}

/* ===== FOOTER ===== */
[data-theme="dark"] .footer {
  background: #0a0a15 !important;
  border-top: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .footer-brand p {
  color: #6b6b80;
}

[data-theme="dark"] .footer-col a {
  color: #9b9baa;
}

[data-theme="dark"] .footer-col a:hover {
  color: var(--mint);
}

[data-theme="dark"] .footer-heading {
  color: #e2e2ec !important;
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(111, 237, 214, 0.08);
  color: #6b6b80;
}

/* ===== ISO BADGES ===== */
[data-theme="dark"] .iso-pre-badge {
  background: #1a1a2e !important;
  border-color: rgba(111, 237, 214, 0.1) !important;
}

[data-theme="dark"] .iso-pre-badge strong {
  color: #e2e2ec;
}

[data-theme="dark"] .iso-pre-badge span {
  color: #9b9baa;
}

/* ===== CALENDAR ===== */
[data-theme="dark"] .cal-grid {
  background: #1a1a2e;
}

[data-theme="dark"] .cal-day {
  color: #c4c4ce;
}

[data-theme="dark"] .cal-day:hover {
  background: rgba(111, 237, 214, 0.1);
}

/* ===== BUTTONS ===== */
[data-theme="dark"] .btn-outline {
  border-color: rgba(111, 237, 214, 0.3);
  color: var(--mint);
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(111, 237, 214, 0.1);
}

/* ===== MOBILE SIDEPANEL ===== */
[data-theme="dark"] .sidepanel {
  background: #0e0e1a !important;
}

[data-theme="dark"] .sidepanel a {
  color: #c4c4ce;
}

[data-theme="dark"] .sidepanel a:hover {
  color: var(--mint);
}

[data-theme="dark"] .sidepanel-accordion-content {
  background: #1a1a2e;
}

/* ===== ABOUT TIMELINE ===== */
[data-theme="dark"] .about-timeline-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .about-timeline-card h3 {
  color: #e2e2ec;
}

/* ===== CASE STUDY ===== */
[data-theme="dark"] .cs-hero {
  background: linear-gradient(135deg, #0e0e1a 0, #12121f 100%) !important;
}

[data-theme="dark"] .cs-metric {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .cs-quote {
  background: linear-gradient(135deg, #1a1a2e 0, #1e2a35 100%) !important;
  border-left-color: var(--mint) !important;
  color: #c4c4ce;
}

/* ===== LOGO WALL ===== */
[data-theme="dark"] .logo-wall-section {
  background: #0e0e1a !important;
}

[data-theme="dark"] .logo-wall img {
  filter: grayscale(100%) invert(1) !important;
  opacity: 0.3;
}

[data-theme="dark"] .logo-wall img:hover {
  filter: grayscale(0) invert(0) !important;
  opacity: 0.8;
}

/* ===== IMAGES ===== */
[data-theme="dark"] .split-visual img {
  opacity: 0.85;
}

[data-theme="dark"] .hero-fallback-img {
  opacity: 0.08;
}

/* ===== SCROLLBAR ===== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0e0e1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #353558;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #454570;
}

/* ===== DARK MODE TOGGLE BUTTON (in Navbar) ===== */
.dark-mode-toggle {
  position: relative;
  z-index: 9999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 46, 0.15);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all 0.3s ease;
  padding: 0;
  margin-left: 8px;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  background: rgba(111, 237, 214, 0.1);
}

[data-theme="dark"] .dark-mode-toggle {
  border-color: rgba(111, 237, 214, 0.15);
}

/* ===== TRANSITION FOR SMOOTH SWITCH ===== */
html[data-theme],
html[data-theme] body,
html[data-theme] .nav-bar,
html[data-theme] .footer,
html[data-theme] section,
html[data-theme] .service-card,
html[data-theme] .faq-item,
html[data-theme] .mega-menu {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== CHECKOUT PAGE SPECIFICS ===== */
[data-theme="dark"] .checkout-container {
  background: #0e0e1a;
}

[data-theme="dark"] .checkout-step {
  background: #1a1a2e !important;
  border-color: rgba(111, 237, 214, 0.08) !important;
}

[data-theme="dark"] .package-card {
  background: #1a1a2e !important;
  border: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .package-card:hover,
[data-theme="dark"] .package-card.selected {
  border-color: var(--mint) !important;
}

[data-theme="dark"] .package-card h3 {
  color: #e2e2ec;
}

[data-theme="dark"] .package-card p {
  color: #9b9baa;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #252540 !important;
  color: #e2e2ec !important;
  border-color: rgba(111, 237, 214, 0.15) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b6b80 !important;
}

[data-theme="dark"] label {
  color: #c4c4ce;
}

[data-theme="dark"] .sticky-bar {
  background: rgba(14, 14, 26, 0.95) !important;
  border-top: 1px solid rgba(111, 237, 214, 0.08);
}

[data-theme="dark"] .filter-badge {
  background: #252540 !important;
  color: #c4c4ce !important;
  border-color: rgba(111, 237, 214, 0.1) !important;
}

[data-theme="dark"] .filter-badge.active {
  background: var(--mint) !important;
  color: #1a1a2e !important;
}

/* ===== LOGO FIX (Negativ/Invertiert) ===== */
[data-theme="dark"] .nav-bar .logo-text,
[data-theme="dark"] .nav-bar svg text,
[data-theme="dark"] .nav-bar a[href="/"] span,
[data-theme="dark"] .logo span {
  color: #e2e2ec !important;
  fill: #e2e2ec !important;
}

[data-theme="dark"] .nav-bar img.logo-img {
  filter: invert(1) brightness(1.1) !important;
}

[data-theme="dark"] .footer-brand img {
  filter: invert(1) brightness(1.1) !important;
}

/* ===== MARQUEE / SCROLLING TEXT FIX ===== */
[data-theme="dark"] .marquee span,
[data-theme="dark"] .marquee-text,
[data-theme="dark"] .scroll-text,
[data-theme="dark"] .ticker span {
  color: #353558 !important;
  -webkit-text-stroke-color: #353558 !important;
}

/* ===== GENERAL TEXT FIXES ===== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #e2e2ec;
}

[data-theme="dark"] p,
[data-theme="dark"] li {
  color: #c4c4ce;
}

/* ===== GRADIENT BORDER LINE ===== */
[data-theme="dark"] .nav-bar::after,
[data-theme="dark"] .gradient-line {
  opacity: 0.6;
}

/* ===== KI VS DESIGN SECTION (Mensch vs. Maschine) ===== */
[data-theme="dark"] .ki-section,
[data-theme="dark"] #ki-vs-design {
  background: #0e0e1a !important;
  background-image: none !important;
}

[data-theme="dark"] .ki-section div[style*="background"] {
  background: #1a1a2e !important;
  background-image: none !important;
  border-color: rgba(111, 237, 214, 0.08) !important;
}

[data-theme="dark"] .ki-section div[style*="white"],
[data-theme="dark"] .ki-section div[style*="linear-gradient"] {
  background: #1e2a35 !important;
  background-image: none !important;
}

[data-theme="dark"] #ki-vs-design div[style*="gray-50"],
[data-theme="dark"] #ki-vs-design div[style*="background: var"] {
  background: #1a1a2e !important;
  background-image: none !important;
}

[data-theme="dark"] #ki-vs-design div[style*="border-right"] {
  border-right-color: rgba(111, 237, 214, 0.08) !important;
}

[data-theme="dark"] #ki-vs-design div[style*="border-left"] {
  border-left-color: var(--mint) !important;
}

[data-theme="dark"] .ki-section .section-label {
  color: var(--mint-dark) !important;
}

[data-theme="dark"] .ki-section h2 {
  color: #e2e2ec !important;
}

[data-theme="dark"] .ki-section p {
  color: #9b9baa !important;
}

/* ===== SELECTION ===== */
[data-theme="dark"] ::selection {
  background: rgba(111, 237, 214, 0.3);
  color: #e2e2ec;
}