/*
 * LadeSofort Design System CSS - 1:1 identisch mit React-Original
 * Alle Farben, Gradients und Design-Tokens aus React übernommen
 */

@layer base {
  :root {
    /* Light theme - cleaner whites and greys */
    --background: 0 0% 100%;
    --foreground: 220 10% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 10% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 10% 15%;

    --primary: 150 60% 45%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 150 60% 65%;

    --secondary: 220 15% 96%;
    --secondary-foreground: 220 10% 15%;

    --muted: 220 15% 96%;
    --muted-foreground: 220 8% 46%;

    --accent: 210 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 90%;
    --input: 220 15% 90%;
    --ring: 150 60% 45%;

    /* E-Mobility specific colors - modern and sophisticated */
    --electric-blue: 210 100% 50%;
    --eco-green: 150 60% 45%;
    --energy-orange: 30 85% 55%;
    
    /* Gradients - subtle and elegant */
    --gradient-primary: linear-gradient(135deg, hsl(150 60% 45%), hsl(150 60% 65%));
    --gradient-hero: linear-gradient(135deg, hsl(210 100% 50%), hsl(150 60% 45%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 15% 98%));
    
    /* Shadows - soft and modern */
    --shadow-card: 0 4px 6px -1px hsl(150 60% 45% / 0.1), 0 2px 4px -1px hsl(150 60% 45% / 0.06);
    --shadow-hero: 0 25px 50px -12px hsl(210 100% 50% / 0.25);
    --shadow-glow: 0 0 40px hsl(150 60% 65% / 0.3);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 220 10% 15%;
    --sidebar-primary: 150 60% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 15% 96%;
    --sidebar-accent-foreground: 220 10% 15%;
    --sidebar-border: 220 15% 90%;
    --sidebar-ring: 150 60% 45%;
  }

  .dark {
    /* Dark theme - deep anthracite with warm accents */
    --background: 220 15% 8%;
    --foreground: 0 0% 95%;

    --card: 220 15% 10%;
    --card-foreground: 0 0% 95%;

    --popover: 220 15% 10%;
    --popover-foreground: 0 0% 95%;

    --primary: 150 60% 55%;
    --primary-foreground: 220 15% 8%;
    --primary-glow: 150 60% 75%;

    --secondary: 220 15% 15%;
    --secondary-foreground: 0 0% 95%;

    --muted: 220 15% 15%;
    --muted-foreground: 220 8% 65%;

    --accent: 210 100% 60%;
    --accent-foreground: 220 15% 8%;

    --destructive: 0 85% 65%;
    --destructive-foreground: 220 15% 8%;

    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 150 60% 55%;

    /* E-Mobility colors for dark mode */
    --electric-blue: 210 100% 60%;
    --eco-green: 150 60% 55%;
    --energy-orange: 30 85% 65%;

    /* Dark mode gradients */
    --gradient-primary: linear-gradient(135deg, hsl(150 60% 55%), hsl(150 60% 75%));
    --gradient-hero: linear-gradient(135deg, hsl(210 100% 60%), hsl(150 60% 55%));
    --gradient-card: linear-gradient(145deg, hsl(220 15% 10%), hsl(220 15% 12%));
    
    /* Dark mode shadows */
    --shadow-card: 0 4px 6px -1px hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.06);
    --shadow-hero: 0 25px 50px -12px hsl(150 60% 55% / 0.3);
    --shadow-glow: 0 0 40px hsl(150 60% 75% / 0.2);

    --sidebar-background: 220 15% 8%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 150 60% 55%;
    --sidebar-primary-foreground: 220 15% 8%;
    --sidebar-accent: 220 15% 15%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 220 15% 18%;
    --sidebar-ring: 150 60% 55%;
  }

  /* Mobile Touch Optimizations */
  .touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Touch feedback for mobile devices */
  @media (hover: none) and (pointer: coarse) {
    .touch-manipulation:active {
      transform: scale(0.98);
      transition: transform 0.1s ease-out;
    }
  }

  /* Ensure minimum touch targets on mobile */
  @media (max-width: 768px) {
    button,
    .touch-target {
      min-height: 44px;
      min-width: 44px;
    }
  }
}

@layer utilities {
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }
  
  .bg-gradient-hero {
    background: var(--gradient-hero);
  }
  
  .bg-gradient-card {
    background: var(--gradient-card);
  }
  
  .shadow-hero {
    box-shadow: var(--shadow-hero);
  }
  
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  
  /* Color utilities mit CSS-Variablen */
  .text-electric-blue {
    color: hsl(var(--electric-blue));
  }
  
  .bg-electric-blue {
    background-color: hsl(var(--electric-blue));
  }
  
  .text-eco-green {
    color: hsl(var(--eco-green));
  }
  
  .bg-eco-green {
    background-color: hsl(var(--eco-green));
  }
  
  .text-energy-orange {
    color: hsl(var(--energy-orange));
  }
  
  .bg-energy-orange {
    background-color: hsl(var(--energy-orange));
  }
  
  /* Border utilities */
  .border-electric-blue {
    border-color: hsl(var(--electric-blue));
  }
  
  .border-eco-green {
    border-color: hsl(var(--eco-green));
  }
  
  .border-energy-orange {
    border-color: hsl(var(--energy-orange));
  }
}

/* Verlauf*/

.bg-verlauf {
  /* background-image: linear-gradient(180deg , transparent,  #fff); */

background-color: #fff9;

}

/* Leaflet Map Styling */
.leaflet-container {
  font-family: inherit !important;
  position: relative !important;
  z-index: 1 !important;
}

.leaflet-control-container {
  z-index: 100 !important;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-popup-content {
  margin: 12px !important;
}

.charging-station-popup .leaflet-popup-content-wrapper {
  background: white !important;
  color: #333 !important;
}

.leaflet-control-zoom a {
  color: #333 !important;
  background-color: white !important;
}

.leaflet-control-zoom a:hover {
  background-color: #f5f5f5 !important;
}

.leaflet-marker-icon {
  margin-left: -12px !important;
  margin-top: -41px !important;
}

.leaflet-popup-tip {
  box-shadow: none !important;
}

/* Mobile optimization für Map */
@media (max-width: 768px) {
  .leaflet-popup-content-wrapper {
    margin: 8px !important;
  }
  
  .leaflet-control-container {
    margin: 8px !important;
  }
}

/* Content Editor Styling - Für WYSIWYG Editor Output */
/* WICHTIG: Außerhalb von @layer um Tailwind-Priorität zu umgehen */

/* Content-Wrapper für gerenderten WYSIWYG-Content */
.content-output {
  line-height: 1.7;
  color: hsl(var(--foreground));
}

.content-output h1 {
  font-size: 2.25rem !important; /* text-4xl */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 2rem 0 1rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output h2 {
  font-size: 1.875rem !important; /* text-3xl */
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 1.75rem 0 0.875rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output h3 {
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 1.5rem 0 0.75rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output h4 {
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 1.25rem 0 0.625rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output h5 {
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 1.125rem 0 0.5625rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output h6 {
  font-size: 1rem !important; /* text-base */
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 1rem 0 0.5rem 0 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output p {
  margin: 1rem 0 !important;
  line-height: 1.7 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output ul {
  list-style-type: disc !important;
  margin: 1rem 0 !important;
  padding-left: 1.5rem !important;
}

.content-output ol {
  list-style-type: decimal !important;
  margin: 1rem 0 !important;
  padding-left: 1.5rem !important;
}

.content-output li {
  margin: 0.5rem 0 !important;
  line-height: 1.6 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output blockquote {
  border-left: 4px solid hsl(var(--primary)) !important;
  background-color: hsl(var(--muted) / 0.5) !important;
  padding: 1rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  font-style: italic !important;
  color: hsl(var(--muted-foreground)) !important;
}

.content-output a {
  color: hsl(var(--primary)) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease !important;
}

.content-output a:hover {
  color: hsl(var(--primary) / 0.8) !important;
}

.content-output strong {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
}

.content-output em {
  font-style: italic !important;
  color: hsl(var(--foreground)) !important;
}

.content-output code {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.25rem !important;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 0.875rem !important;
}

.content-output pre {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  overflow-x: auto !important;
  margin: 1.5rem 0 !important;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.content-output img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem !important;
  margin: 1.5rem 0 !important;
}

.content-output hr {
  border: none !important;
  height: 1px !important;
  background-color: hsl(var(--border)) !important;
  margin: 2rem 0 !important;
}

.content-output table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
}

.content-output th,
.content-output td {
  border: 1px solid hsl(var(--border)) !important;
  padding: 0.75rem !important;
  text-align: left !important;
}

.content-output th {
  background-color: hsl(var(--muted)) !important;
  font-weight: 600 !important;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .content-output h1 {
    font-size: 2rem !important; /* text-3xl */
  }
  
  .content-output h2 {
    font-size: 1.5rem !important; /* text-2xl */
  }
  
  .content-output h3 {
    font-size: 1.25rem !important; /* text-xl */
  }
  
  .content-output blockquote,
  .content-output pre {
    padding: 0.75rem !important;
    margin: 1rem 0 !important;
  }
}