/**
 * Delic IT Services - Theme-Variablen und Dark Mode
 */

/* Light Theme Variablen (Standard) */
:root {
  /* Farben */
  --primary-color: #2563eb;
  --primary-dark: #1e40af;
  --secondary-color: #10b981;

  /* Theme-spezifische Farben - Light Mode */
  --bg-color: #ffffff;
  --bg-alt-color: #f9fafb;
  --text-color: #1f2937;
  --text-light-color: #6b7280;
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --footer-bg: #1f2937;
  --footer-text: #ffffff;
  --hero-bg: #f0f9ff;
  --cta-bg: #2563eb;
  --cta-text: #ffffff;
  --logo-url: url("/img/logo.svg");
  /* Partner-Logo URLs */
  --nordvpn-logo: url("/img/partners/nordvpn.svg");
  --humble-logo: url("/img/partners/humble.svg");
  --rakuten-logo: url("/img/partners/rakuten.svg");
  --shopify-logo: url("/img/partners/shopify.svg");

  /* Abstände */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;

  /* Container */
  --container-width: 1200px;
  --container-padding: 1rem;

  /* Schriften */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Schatten */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Border-Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;

  /* Übergänge */
  --transition: all 0.3s ease;
}

/* Dark Theme Variablen */
[data-theme="dark"] {
  /* Theme-spezifische Farben - Dark Mode */
  --bg-color: #121212;
  --bg-alt-color: #1f1f1f;
  --text-color: #e5e7eb;
  --text-light-color: #9ca3af;
  --border-color: #374151;
  --card-bg: #1f1f1f;
  --header-bg: #121212;
  --footer-bg: #0a0a0a;
  --footer-text: #e5e7eb;
  --hero-bg: #1f2937;
  --cta-bg: #1e40af;
  --cta-text: #ffffff;
  --logo-url: url("/img/logo_dark.svg");
  /* Partner-Logo URLs für Dark Mode */
  --nordvpn-logo: url("/img/partners/nordvpn_dark.svg");
  --humble-logo: url("/img/partners/humble_dark.svg");
  --rakuten-logo: url("/img/partners/rakuten_dark.svg");
  --shopify-logo: url("/img/partners/shopify_dark.svg");  

  /* Schatten für Dark Mode anpassen */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.9);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7),
    0 2px 4px -1px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7),
    0 4px 6px -2px rgba(0, 0, 0, 0.8);
}

/* Theme Toggle Button */
.header-right {
  display: flex;
  align-items: center;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.25rem;
  cursor: pointer;
  margin-right: var(--spacing-md);
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.theme-toggle:hover {
  background-color: var(--border-color);
}

/* Im Light Mode: Sonne anzeigen, Mond verstecken */
html:not([data-theme="dark"]) .dark-icon {
  display: none;
}

/* Im Dark Mode: Mond anzeigen, Sonne verstecken */
html[data-theme="dark"] .light-icon {
  display: none;
}

/* Hero-Sektion Dark Mode Anpassungen */
[data-theme="dark"] .hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
    url("/img/hero-bg.jpg");
}
.logosvg {
  width: 180px; /* Anpassen an Ihre Größe */
  background-image: var(--logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}