.text-black {
  color: #192b41 !important;
}

/* Compare Table round edges */
.col-12 > .row.no-gutters {
    border-radius: 12px;
    overflow: hidden;
}

.disable-selection {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.a {
  color: #010101;
  text-decoration: none;
  background-color: transparent;
}

.a:hover {
  cursor: pointer;
}

.black {
color: black;
}

.rounded-image {
border-radius: 10px;
}

/* Submenü-Container */
.submenu {
  border-radius: 5px; /* Abgerundete Ecken */
}

/* Submenü wird beim Hover angezeigt */
.nav li:hover .submenu {
  display: block; /* Zeigt das Submenü beim Hover an */
}

/* Submenüeinträge */
.submenu li {
  list-style: none; /* Entfernt Aufzählungszeichen */
  margin: 0; /* Entfernt Abstände */
  padding: 0; /* Entfernt Innenabstände */
}

/* Links im Submenü */
.submenu li a {
  display: flex; /* Flexbox für Text und Tag */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: space-between; /* Platz zwischen Text und Tag */
  padding: 8px 12px; /* Innenabstand für mehr Platz */
  color: #333; /* Textfarbe */
  text-decoration: none; /* Entfernt Unterstreichungen */
  font-size: 16px; /* Schriftgröße */
  white-space: nowrap; /* Kein Zeilenumbruch */
}

/* Hover-Effekt für Submenülinks */
.submenu li a:hover {
  background-color: #f1f1f1; /* Hintergrundfarbe beim Hover */
  color: #1f4dde; /* Textfarbe beim Hover */
  border-radius: 5px; /* Abgerundete Ecken */
}

/* Tags */
.nav-tag {
  font-size: 14px; /* Schriftgröße */
  padding: 2px 6px; /* Innenabstand */
  border-radius: 5px; /* Abgerundete Ecken */
  font-weight: bold; /* Fettschrift */
  white-space: nowrap; /* Kein Zeilenumbruch */
  margin-left: 10px; /* Abstand zwischen Text und Tag */
}

.tag-orange {
  background-color: #f1d9b5; /* Hintergrundfarbe des Tags */
  color: rgb(255, 123, 0); /* Textfarbe */
}

.tag-blue {
  background-color: #b5b9f1; /* Hintergrundfarbe des Tags */
  color: rgb(0, 60, 255); /* Textfarbe */
}

.tag-green {
  background-color: #74d3a6; /* Hintergrundfarbe des Tags */
  color: rgb(12, 153, 76); /* Textfarbe */
}

/* Hintergrund des aktuell weißen Bereichs */
.offcanvas-content, .vertical-menu ul.nav li, .vertical-menu ul.nav li a {
  background-color: #1c1c1c; /* Dunkle Hintergrundfarbe für alle betroffenen Bereiche */
  color: #ffffff; /* Weiße Schrift für Kontrast */
}

/* Aktives Menü-Item */
.vertical-menu ul.nav li.current-menu-item a {
  background-color: #2a2a2a; /* Etwas helleres Grau für ausgewählte Menüpunkte */
  color: #ffffff; /* Weiße Schrift */
}

/* Entfernt unnötige Rahmen */
.vertical-menu ul.nav li {
  border: none;
}

/* Beibehaltung der restlichen Farben für Konsistenz */
.vertical-menu ul.nav li a {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

/* Hover-Effekt */
.vertical-menu ul.nav li a:hover {
  background-color: #333333; /* Leicht heller für den Hover-Effekt */
  color: #ffffff;
}

/* Responsive Design: Für kleinere Bildschirme */
@media (max-width: 768px) {
  .submenu {
    min-width: 200px; /* Verkleinert die Breite des Submenüs */
  }
  .submenu li a {
    font-size: 14px; /* Kleinere Schriftgröße */
    padding: 6px 10px; /* Weniger Innenabstand */
  }
}

/* Modern Sticky Header for Black Week Sale */
.sticky-header {
  position: fixed; /* Always stays at the top */
  top: 0; /* Stick to the top of the page */
  width: 100%; /* Full width */
  background: linear-gradient(45deg, #377532, #0a552c); /* Smooth gradient */
  color: #ffffff; /* White text for high contrast */
  text-align: center; /* Center the text */
  padding: 10px 0; /* Consistent padding */
  font-size: 16px; /* Original font size */
  font-weight: 600; /* Slightly bold for modern look */
  z-index: 1000; /* Ensure it stays on top */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Modern shadow effect */
  letter-spacing: 0.5px; /* Slight spacing for elegance */
}

.sticky-header a {
  text-decoration: none; /* Remove underline */
  color: #dcdefc; /* Gold link color for emphasis */
  padding: 5px 15px; /* Add some clickable area around text */
  background: rgba(255, 255, 255, 0.1); /* Subtle background for the link */
  border-radius: 20px; /* Rounded corners for modern style */
  transition: all 0.3s ease; /* Smooth hover animations */
}

.sticky-header a:hover {
  background:rgb(16, 141, 16); /* Gold background on hover */
  color: #e2ffe9; /* Black text on hover */
  box-shadow: 0px 4px 10px rgba(96, 202, 26, 0.5); /* Glow effect on hover */
}

/* Main Header should start below the sticky header */
.main-header {
position: fixed; /* Stays at the top, but below the sticky header */
top: 45px; /* Adjust this to the height of the sticky header */
width: 100%; /* Full width */

z-index: 999; /* Lower than sticky header */
box-shadow: 0px 2px 5px rgba(0,0,0,0.1); /* Optional: add some shadow for better distinction */
}

/* Standard Light Mode */
body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark Mode – nur aktiv, wenn die Klasse `dark-mode` gesetzt wird */
.dark-mode {
  background-color: #0e0e10;
  color: #d1d5db;
}

.dark-mode a:hover {
  color: #80d8ff;
}

.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
  color: #ffffff;
}

/* Hintergrundfarben */
.dark-mode .bg-white {
  background-color: #1a1a1d !important;
}

.dark-mode .bg-light {
  background-color: #252529 !important;
}

/* Textfarben */
.dark-mode .text-title {
  color: #f9fafb !important;
}

.dark-mode .text-regular {
  color: #b0b8c2 !important;
}

.dark-mode .text-primary {
  color: #4da3ff !important;
}

.dark-mode .text-secondary {
  color: #80d8ff !important;
}

.dark-mode .text-warning {
  color: #ffa726 !important;
}

/* Tabellen */
.dark-mode .table {
  background-color: #1a1a1d;
}

.dark-mode .table th,
.dark-mode .table td {
  border: 1px solid #2c2f36;
  color: #e0e0e0;
}

/* Header */
.dark-mode .header {
  background-color: transparent !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: none !important;
}

.dark-mode .header-sticky.sticky {
  background-color: #1a1a1d !important;
  border-bottom: 1px solid #2c2f36 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .header .nav > li > a {
  color: #d1d5db !important;
}

.dark-mode .header-sticky.sticky .nav > li > a {
  color: #ffffff !important;
}

/* Dropdown-Menü */
.dark-mode .horizontal-menu .nav li ul {
  background-color: #1a1a1d !important;
  border: 1px solid #2c2f36 !important;
}

.dark-mode .horizontal-menu .nav li ul li {
  border-bottom: 1px solid #2c2f36 !important;
}

.dark-mode .horizontal-menu .nav li ul li:last-child {
  border-bottom: none !important;
}

.dark-mode .horizontal-menu .nav li ul li a {
  color: #e0e0e0 !important;
  border: none !important;
}

.dark-mode .horizontal-menu .nav li ul li a:hover {
  background-color: #252529 !important;
  color: #4da3ff !important;
  border: none !important;
}

.dark-mode .horizontal-menu .nav li ul li .submenu-button::after {
  color: #e0e0e0 !important;
  border: none !important;
}

/* Buttons */
.dark-mode .button {
  background-color: #4da3ff;
  color: #0e0e10;
}

.dark-mode .button:hover {
  background-color: #80d8ff;
}

/* Formulare */
.dark-mode input,
.dark-mode textarea {
  background-color: #252529;
  color: #ffffff;
  border: 1px solid #2c2f36;
}

.dark-mode input:focus,
.dark-mode textarea:focus {
  border-color: #4da3ff;
}

/* Cards */
.dark-mode .card {
  background-color: #1a1a1d;
  border: 1px solid #2c2f36;
  color: #d1d5db;
}

/* Preistabellen */
.dark-mode .pricing-table-item .table-price {
  color: #ffffff !important;
}

/* Dark Mode Button Styling */
#dark-mode-toggle {
  background-color: #252529;
  border: 1px solid #4da3ff;
  border-radius: 50%;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

#dark-mode-toggle:hover {
  background-color: #4da3ff;
}

#dark-mode-toggle svg {
  width: 25px;
  height: 25px;
  stroke: #ffffff;
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Standardmäßig Light Mode Icon verstecken mit Animation */
#light-icon {
  opacity: 0;
  transform: scale(0.8) rotate(-180deg);
}

/* Dark Mode Styles */
.dark-mode #dark-mode-toggle {
  background-color: #4da3ff;
  border-color: #ffffff;
}

.dark-mode #dark-mode-toggle:hover {
  background-color: #80d8ff;
}

.dark-mode #dark-mode-toggle svg {
  stroke: #0e0e10;
}

/* Animationseffekte beim Wechsel */
.dark-mode #dark-icon {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

.dark-mode #light-icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}


.slick-dots {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.slick-dots li {
  margin: 0 7px; /* Etwas kleinerer Abstand zwischen den Punkten */
}

.slick-dots li button {
  display: block;
  font-size: 0; /* Versteckt die Zahl */
  width: 25px; /* Größe des Punktes */
  height: 6px; /* Größe des Punktes */
  background-color: gray; /* Farbe der Punkte */
  border: none;
  border-radius: 15% / 50%; /* Macht sie rund */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s; /* Sanfter Übergang */
}

.slick-dots li button:hover {
  background-color: lightgray; /* Farbe beim Hover */
  transform: scale(1.3); /* Punkt wird leicht größer */
}

.slick-dots li.slick-active button {
  background-color: #00e9fd; /* Farbe des aktiven Punktes */
}