:root {
	/* primäre farbe (hausfarbe, z.b. hauptfarbe des logos) */
	--main-color: #FF6319;
	/* aktuell keine verwendung: sekundäre hintergrundfarbe für den hero-slider auf der startseite */
	--main-color-2: #485050;
	/* aktuell keine verwendung: hightlight farbe für letztes element in mega menu */
	--main-color-hover: #ffc400;
	/* warnfarbe, die in popup notifications (toasts) verwendet wird. muss nicht geändert werden, soll auffallen */
	--warning-color: #000;  
  
	/* färbt icons on hover ein. sollte sich von main-color unterscheiden. hover farbe sieht man z.b. bei artikel aus warenkorb löschen 
	   hex farbe kann hier umgerechnet werden: https://codepen.io/sosuke/pen/Pjoqqp */ 
	--icon-color-hover: invert(59%) sepia(78%) saturate(5391%) hue-rotate(349deg) brightness(97%) contrast(107%);
}

/*
	+ Das Logo darf folgende Dateiendungen haben: jpg, png oder svg. Es wird empfohlen svg zu verwenden.
	+ Die Maximalbreite des Logos beträgt 254px. D.h. wenn nicht svg, größere Logos unbedingt kleiner rechnen.
	+ Der Pfad in dem das Logo standardmäßig erwartet wird: Style/img/  
*/
.logo-img {
	background-image: url(../img/coba-logo.svg) !important
}
.login .logo {
	background-image: url(../img/coba-logo.svg) !important
}

@media only screen and (max-width: 600px) {
	.logo-img {	
		height: 40px !important
	}
}

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help; /* Zeigt dem Benutzer, dass es mehr Infos gibt */
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%; /* Macht es rund */
  background-color: #FF6319; /* Rote Farbe für Warnung */
  color: white;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin-left: 2px;
  vertical-align: super; /* Hebt das Icon leicht an */
}

.tooltip-container .tooltip-text {
	pointer-events: all;
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Über dem Icon */
  left: 50%;
  margin-left: -70px; /* Zentrieren (Hälfte der Breite) */

  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}