/* ==========================================
   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: 4px;
  margin-bottom: 24px;
}

.tab {
  /* Layout & Ausrichtung */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  
  /* Schrift- & Standardfarbe für inaktive Links */
  font: 500 14px inherit;
  color: var(--theme-color) !important;
  cursor: pointer;
  
  /* Rahmen & Rundung */
  border: none;
  border-radius: 10px;
  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;
}

/* ==========================================
   MEHR / WENIGER – kompakte Typen-Auswahl
   ========================================== */

/* Zusätzliche Typen sind versteckt, bis "Mehr" geklickt wird */
.tabs:not(.expanded) .tab-extra {
  display: none;
}

/* Der Mehr/Weniger-Button: gefüllt, damit er sich abhebt */
.tab-toggle {
  background: var(--theme-color) !important;
  color: #ffffff !important;
}

.tab-toggle:hover {
  background: var(--theme-color) !important;
  color: #ffffff !important;
  opacity: 0.9;
}

.tab-toggle svg {
  color: #ffffff !important;
  transition: transform .2s ease;
}

/* Pfeil dreht sich, wenn aufgeklappt */
.tab-toggle.open svg {
  transform: rotate(180deg);
}

/* ==========================================
   MOBIL (≤860px) – passend zu base.css
   ========================================== */
@media (max-width: 860px) {
  .tabs {
    gap: 6px;
    margin-bottom: 18px;
    /* sauberes Umbrechen, jeder Tab darf auf eigene Breite schrumpfen */
    flex-wrap: wrap;
  }

  .tab {
    padding: 7px 10px;
    font-size: 13px;
    gap: 5px;
    /* verhindert, dass lange Labels den Tab sprengen */
    flex: 0 0 auto;
  }

  .tab svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 380px) {
  .tab {
    padding: 6px 8px;
    font-size: 12px;
  }
}