:root {
  --brand-color: #0066cc; /* Standardfarbe für Links */
  --brand-hover-factor: 0.85; /* Wie stark dunkler beim Hover (0.85 = 15% dunkler) */
  --gray-text: #303030; /* Farbe für deaktivierte Links */
  --disabled-opacity: 0.6; /* Transparenz für Disabled-Elemente */
  --logo-width: 150px; /* Standardbreite für das Logo */
}

/* Logo-Größe */
.logo img {
  max-width: var(--logo-width) !important;
  height: auto !important;
}

/* Links normal */
a {
  color: var(--brand-color);
}

/* Hover: 15% dunkler */
a:hover {
  color: color-mix(in srgb, var(--brand-color) var(--brand-hover-factor), #0066cc);
}

/* Inaktive Links */
a.disabled, .breadcrumb a[aria-disabled="true"] {
  color: var(--gray-text) !important;
}

/* Hover für inaktive Links (kein Effekt) */
a.disabled:hover {
  color: var(--gray-text) !important;
}

/* Navigation */
nav a {
  color: var(--brand-color);
}

/* Navigation Hover-Effekt */
nav a:hover {
  color: color-mix(in srgb, var(--brand-color) var(--brand-hover-factor), #0066cc);
}

/* Breadcrumb Links */
.breadcrumb a {
  color: var(--brand-color);

}

/* Hover-Farbe: 15% dunkler als Blau */
.breadcrumb a:hover {
  color: #005bb5; /* Manuell festgelegtes dunkleres Blau */
}

/* Einheitliches Styling für alle Buttons */
button, 
.default_option,
.ladda-button {
    background-color: var(--brand-color) !important;
}

/* Hover-Effekt: 15% dunkler */
button:hover, 
.default_option:hover, 
.ladda-button:hover {
    filter: brightness(var(--brand-hover-factor));
}

/* Entfernt die orangene Umrandung */
.input-group-addon {
  background-color: var(--brand-color) !important;

}

/* Falls eine orangene Umrandung bei Klick oder Fokus kommt */
.input-group-addon:focus, 
.input-group-addon:active {
  border: 2px solid var(--brand-hover-factor) !important; /* Falls du eine blaue Umrandung willst */
}


input.form-control:focus {
  border: 2px solid var(--brand-color) !important; /* Blaue Umrandung beim Fokus */
  outline: var(--brand-color) !important;
}

.breaking-headline {
  color: var(--brand-color) !important;
}

a.text-primary {
  color: var(--brand-color) !important;
}

a.text-primary:hover {
  filter: brightness(85%);
}

#back-to-top {
  background-color: var(--brand-color) !important;
}

#back-to-top i {
  color: white !important;
}

/* Hintergrund der Warenkorb-Kachel auf Blau setzen */
.box-cart-info-bg {
  background-color: var(--brand-color) !important;
}

/* Hintergrundfarbe für die OWL-Buttons */
.owl-prev, .owl-next {
  background-color: var(--brand-color) !important;
}

/* Falls die Icons noch Orange sind, setzen wir sie auf Weiß */
.owl-prev::before, .owl-next::before {
  color: white !important;
}

.startpage-products-container .breaking-headline {
  color: white !important;
}