/* =============================================================================
   EQUIPMENT - Katalog: Seitenleiste (Suche, Kategoriebaum, Modul-Hinweis) links, Ergebnisse rechts (pages/equipment.php).
   Produktkarten, Pfad und Seitenzahlen liegen in components.css.
   ============================================================================= */
.equipment { --equipment-seite: 280px; --rot-hauch: rgb(var(--farbe-rot-rgb) / 0.06); }

.equipment__layout {
    display: grid;
    grid-template-columns: var(--equipment-seite) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

.equipment__seite {
    position: sticky;
    top: calc(var(--header-hoehe) + var(--space-md));
}

.equipment__filter > summary { display: none; }

/* Suchfeld: wie die Anlass-Suche, eine Nummer kleiner */
.equipment__suche {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.equipment__suche .feld-eingabe { height: 48px; padding: 0 52px 0 var(--space-md); font-size: var(--text-sm); border-radius: var(--radius-full); }
.equipment__suche .rund { position: absolute; right: 6px; }

/* Kategoriebaum */
.kategoriebaum,
.kategoriebaum__alle {
    font-size: var(--text-sm);
}

.kategoriebaum { display: grid; gap: 2px; }
.kategoriebaum--unter { margin: 2px 0 var(--space-xs) var(--space-md); padding-left: var(--space-sm); border-left: 1px solid var(--farbe-linie); }

.kategoriebaum a,
.kategoriebaum__alle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-schnell), color var(--transition-schnell);
}

.kategoriebaum__alle { margin-bottom: var(--space-xs); font-weight: var(--fw-semibold); }
.kategoriebaum__alle svg { width: 16px; height: 16px; color: var(--farbe-rot); }
.kategoriebaum a:hover, .kategoriebaum__alle:hover { color: var(--farbe-rot); background: var(--rot-hauch); }
.kategoriebaum a[aria-current], .kategoriebaum__alle[aria-current] { color: var(--farbe-weiss); background: var(--farbe-rot); }
.kategoriebaum a[aria-current] .kategoriebaum__zahl, .kategoriebaum a[aria-current] svg { color: inherit; opacity: 0.85; }
.kategoriebaum__name { flex: 1; min-width: 0; }
.kategoriebaum__zahl { font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); font-variant-numeric: tabular-nums; }
.kategoriebaum__pfeil { width: 14px; height: 14px; margin-left: -4px; color: var(--farbe-grau-gedaempft); transition: transform var(--transition-schnell); }
.kategoriebaum__eltern--offen .kategoriebaum__pfeil { transform: rotate(90deg); }
.kategoriebaum a:not(.kategoriebaum__eltern) { padding-left: calc(12px + 14px + var(--space-xs) - 4px); }

/* Hinweis auf die Module unter dem Baum */
.equipment__teaser {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
    background: var(--farbe-creme);
    border-radius: var(--radius-xl);
}

.equipment__teaser strong { display: block; margin-bottom: var(--space-xs); color: var(--farbe-grau); }
.equipment__teaser p { margin-bottom: var(--space-md); }

/* Rechte Spalte */
.equipment__kopf { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.equipment__titel { font-size: var(--text-3xl); }

.unterkategorien {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.unterkategorien a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--farbe-grau);
    border: 1.5px solid var(--farbe-linie);
    border-radius: var(--radius-full);
    transition: border-color var(--transition-schnell), color var(--transition-schnell), background-color var(--transition-schnell);
}

.unterkategorien a span { font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }
.unterkategorien a:hover { color: var(--farbe-rot); border-color: var(--farbe-rot); background: var(--rot-hauch); }

.equipment__leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--farbe-grau-gedaempft);
}

.equipment__stand { margin: 0; }
.equipment__sortierung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

/* Umschalter: drei Wahlmöglichkeiten in einer umrandeten Leiste, die aktive gefüllt (Knopffarbe) */
.umschalter {
    display: inline-flex;
    padding: 3px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-full);
}

.umschalter__wahl {
    padding: 5px 14px;
    color: var(--farbe-grau);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-schnell), color var(--transition-schnell);
}

.umschalter__wahl:hover { color: var(--farbe-rot); }
.umschalter__wahl[aria-current] { color: var(--auf-knopf, var(--farbe-weiss)); background: var(--knopf-flaeche, var(--farbe-rot)); }

.equipment__leer {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    max-width: 48ch;
    margin: var(--space-2xl) auto;
    text-align: center;
    color: var(--farbe-grau-gedaempft);
}

.equipment__leer strong { color: var(--farbe-grau); }

@media (max-width: 64em) {
    .equipment__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
    .equipment__seite { position: static; }
    .equipment__filter > summary { display: inline-flex; list-style: none; cursor: pointer; }
    .equipment__filter > summary svg { transition: transform var(--transition-schnell); }
    .equipment__filter[open] > summary svg { transform: rotate(90deg); }
    .equipment__filter[open] > summary { margin-bottom: var(--space-lg); }
    .equipment__teaser { display: none; }
}