/* ==========================================
   TABS / MENÜ STYLING WITH DYNAMIC THEME
   ========================================== */

:root {
  /* Standard-Fallbacks */
  --theme-color: #4CAF50;
  --theme-color-hover: rgba(76, 175, 80, 0.12);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tab {
  /* Layout & Ausrichtung */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  
  /* Schrift- & Standardfarbe für inaktive Links */
  font: 500 14px inherit;
  color: var(--theme-color) !important;
  cursor: pointer;
  
  /* Rahmen & Rundung */
  border: none;
  border-radius: 12px;
  background: transparent;
  
  /* Weiche Übergänge */
  transition: 
    background 0.15s ease, 
    color 0.15s ease, 
    box-shadow 0.15s ease;
}

/* --- OPTIMIERTES ICON STYLING --- */
.tab svg { 
  width: 16px; 
  height: 16px; 
  /* Schützt die originale Struktur des Icons */
  color: inherit !important; 
}

/* Falls deine SVGs 'fill' oder 'stroke' nutzen, färben wir sie hier sauber um */
.tab svg path,
.tab svg circle,
.tab svg rect,
.tab svg line,
.tab svg polyline,
.tab svg polygon {
  fill: currentColor;
}

/* Wichtig: Manche Icons (nur Linien) dürfen nicht gefüllt werden */
.tab svg[fill="none"] path,
.tab svg[fill="none"] circle,
.tab svg[fill="none"] rect,
.tab svg[fill="none"] line,
.tab svg[fill="none"] polyline,
.tab svg[fill="none"] polygon {
  fill: none;
  stroke: currentColor;
}

/* Hover-Zustand für inaktive Buttons */
.tab:hover {
  background: var(--theme-color-hover) !important;
  color: var(--theme-color) !important;
}

/* Der aktuell aktive Button */
.tab.active {
  background: var(--theme-color) !important;
  color: #ffffff !important; /* Schrift bleibt immer weiß */
  box-shadow: 0 2px 10px var(--theme-color-hover) !important;
}

/* Erzwingt weißes Icon im aktiven Button */
.tab.active svg {
  color: #ffffff !important;
}