/* ==========================================================================
   FILTERLEISTE – Pillen, die eine Kartenliste im Browser filtern

   HERAUSGELOEST in Runde 67 aus pages/rezepte.css, wo sie als .filterleiste
   stand. Anlass war die Blogliste: sie braucht dieselbe Leiste, und eine
   zweite Kopie waere die naechste Stelle im Projekt gewesen, an der dasselbe
   zweimal gepflegt werden muss.

   Der Name traegt jetzt keinen Bereich mehr. Die Rezeptseite ist mit
   umbenannt, das Verhalten ist unveraendert - gemessen vorher und nachher.

   BEIM ERSTEN VERSUCH FALSCH GEMACHT: mein Auszug hat die zwei Regeln aus
   dem @media-Block mit herausgerissen und auf oberster Ebene abgelegt. Damit
   galten Handyregeln auf allen Breiten, und die Rezeptseite wurde bei 1440 px
   um 124 px hoeher. Der Media-Block steht deshalb unten ausdruecklich wieder
   da.

   MARKUP-VERTRAG, den js/filter.js liest:
     [data-filter]         die Sektion, die Leiste und Liste umschliesst
     .filterleiste         die Leiste selbst, per CSS ausgeblendet
     .filterleiste--an     setzt das Skript, sobald es laeuft
     [data-filter-gitter]  der Behaelter der Karten
     [data-filter-karte]   jede Karte, mit data-<feld>="<wert>"
     [data-filter-leer]    die Leermeldung, optional
     [data-filter-reset]   Knopf in der Leermeldung, optional
   Die Felder leiten sich aus den Knoepfen ab, nicht aus einer Liste im Code.

   EINE FALLE, in die dieses Projekt zweimal getappt ist: das Skript verbirgt
   Karten ueber das hidden-Attribut. Dessen display: none kommt aus dem
   Browser-Stylesheet und verliert gegen JEDE eigene display-Angabe. Traegt
   die Karte also display: grid oder flex, bleibt sie trotz hidden stehen.
   JEDE Kartenklasse braucht deshalb ihre eigene Zeile:
     .<karte>[hidden] { display: none; }
   ========================================================================== */

/* AUSGEBLENDET, bis js/filter.js sie freigibt. Ohne Skript filtert nichts,
   und Knoepfe, die nichts tun, sind schlimmer als keine Knoepfe.
   display: none, nicht visibility: hidden - die Leiste soll auch keinen
   Platz beanspruchen. */
.filterleiste { display: none; }
/* AUFTEILUNG: EINE GRUPPE PRO ZEILE, LABEL LINKS.
   Vorher war die Leiste ein umbrechender Flex-Container mit den Labels ueber
   den Pillen. Bei zwei Gruppen ging das auf, bei drei nicht mehr: Gang und Oel
   passten in Zeile eins, Aufwand fiel in Zeile zwei und liess daneben 600 von
   1208 px leer stehen. Der Fehler war nicht die dritte Gruppe, sondern das
   Prinzip - jede weitere Gruppe haette dieselbe Luecke wieder gerissen.

   Jetzt liegt jede Gruppe auf einer eigenen Zeile, die Labels stehen in einer
   Spalte untereinander und die Pillen laufen rechts daneben. Das liest sich
   als Liste von Kriterien statt als Kachelfeld, spart Hoehe und traegt eine
   vierte Gruppe ohne jede Aenderung.

   SUBGRID statt einer Zahl fuer die Labelspalte: max-content richtet die
   Spalte am laengsten Label aus. Kommt spaeter ein Label wie
   "Zubereitungszeit" dazu, wandert die Spalte mit, ohne dass hier jemand eine
   Breite nachziehen muss. Faellt subgrid aus, bekommt die Gruppe ihre
   Standardspalte und das Label steht wieder ueber den Pillen - also der
   Zustand von vorher, kein Bruch. */
.filterleiste--an {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.filterleiste__gruppe {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-width: 0;
}
.filterleiste__label {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.filterleiste__pillen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Die Pille im Ruhezustand: weisse Flaeche auf der grauen Bahn, feine Kante.
   Trefferflaeche mindestens 2,75rem hoch - das sind 44 px und damit die
   Schwelle aus WCAG 2.5.5. Auf Touch ist eine Filterleiste sonst
   unbenutzbar, weil die Pillen dicht beieinander stehen. */
.filterleiste__pille {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--c-grau-300);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-200);
  line-height: 1;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover),
              background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.filterleiste__pille:hover {
  border-color: var(--toem-gold);
}
/* Gewaehlt: Markenblau als FLAECHE mit weisser Schrift. Gold als Flaeche mit
   dunkler Schrift waere die naheliegende Wahl, traegt hier aber nicht - die
   Pille muss sich gegen die weisse Nachbarpille UND gegen die graue Bahn
   absetzen, und Gold auf Grau ist zu nah beieinander. Blau auf Weiss ist
   eindeutig, das Gold bleibt der Goldkante des Fokusrings und den
   Hover-Zustaenden.
   aria-pressed traegt den Zustand, nicht eine Klasse: damit stimmen Optik
   und Auszeichnung immer ueberein, es gibt keinen zweiten Ort, der
   nachgezogen werden muesste. */
.filterleiste__pille[aria-pressed="true"] {
  background: var(--toem-blau);
  border-color: var(--toem-blau);
  color: var(--text-on-dark);
}
/* NICHT VERFUEGBAR: die Kombination wuerde kein Rezept uebrig lassen.
   Das Signal ist der WEGFALL DER WEISSEN FLAECHE, nicht blasse Schrift. Die
   Pille sinkt in die graue Bahn zurueck und verliert damit ihre Kartenoptik,
   der Text bleibt aber lesbar - wer wissen will, was da nicht geht, kann es
   noch lesen. Mit opacity waere beides zugleich weg.

   aria-disabled und NICHT das disabled-Attribut: ein disabled-Knopf faellt
   aus der Tabreihenfolge und wird von Screenreadern uebersprungen. Dann
   verschwindet die Information "diese Kombination gibt es nicht" fuer genau
   die Nutzer, die sie am wenigsten anders herausfinden koennen. So bleibt die
   Pille erreichbar und meldet ihren Zustand; der Klick wird im Skript
   abgefangen. */
.filterleiste__pille[aria-disabled="true"] {
  background: transparent;
  border-color: var(--c-grau-200);
  color: var(--text-muted);
  cursor: default;
}
.filterleiste__pille[aria-disabled="true"]:hover {
  border-color: var(--c-grau-200);
}
/* EIGENE ZEILE ueber die ganze Breite, nicht rechts an die Pillen gehaengt.
   Vorher stand hier margin-left: auto - die Zeile brach ohnehin immer um
   (gemessen an allen vier Breiten) und die Trefferzahl klebte dann rechts
   aussen bei x 1064 von 1208, ohne Bezug zu irgendetwas. Jetzt spannt die
   Zeile die Leiste. Am 28.08.2026 gedreht: Zuruecksetzen links an der
   Sektionskante, Trefferzahl RECHTS an der Containerkante - dieselben zwei
   Kanten, an denen die Trennlinie darunter beginnt und endet. Links stand die
   Zahl nur, solange die Leiste umbrach und rechts keine verlaessliche Kante
   hatte. */
.filterleiste__fuss {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}
/* flex-end plus margin-right: auto am Link, NICHT space-between: der Link ist
   nur sichtbar, wenn ein Filter steht. Bei space-between wuerde die Zahl nach
   links springen, sobald er verschwindet. So bleibt sie in jedem Zustand an
   derselben Stelle. */
.filterleiste__reset { margin-right: auto; }
.filterleiste__zahl {
  margin: 0;
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.filterleiste__reset {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-200);
  color: var(--toem-blau);
  font-weight: 600;
  cursor: pointer;
}
.filterleiste__reset:hover,
.filterleiste__reset:focus-visible { color: var(--toem-gold); }

@media (max-width: 46rem) {

  .filterleiste--an { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .filterleiste__gruppe {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
  }
}

/* --------------------------------------------------------------------------
   EINGEKLAPPT AUF ALLEN SCHIRMEN, Kundenentscheidung 23.09.2026

   GEMESSEN vorher auf /rezepte/ bei 320 px: die Leiste ist 828 px hoch, das
   erste Rezept beginnt bei 1359 px - 1,7 Bildschirmhoehen Filter vor dem
   ersten Rezept. Bei 390 px sind es 1,5.

   AM 23.09.2026 AUCH FUER BREITE SCHIRME GEMESSEN: 21 Pillen in vier Reihen,
   298 px Leiste, das erste Rezept beginnt bei 954 px - fast ein ganzer
   Bildschirm Filter vor dem ersten Rezept, und das fuer 15 Rezepte. Der Knopf
   gilt deshalb ueberall. Ein Verhalten statt zwei, das muss niemand zweimal
   lernen.

   Knopf und Huelle legt js/filter.js an, samt data-klappbar und data-offen an
   der Leiste. Hier steht nur, was das heisst. Die Regeln haengen an
   [data-klappbar="ja"] und nicht an einer Medienabfrage: das Skript kennt die
   Grenze schon, und zwei Stellen mit derselben Zahl laufen auseinander.
   -------------------------------------------------------------------------- */
.filterleiste__klapper { display: none; }

.filterleiste[data-klappbar="ja"] .filterleiste__klapper {
  /* VOLLE BREITE AUF SCHMALEN SCHIRMEN, Kundenwunsch 15.09.2026. Vorher war
     der Knopf 158 px breit und stand links in einer 280 px breiten Spalte -
     als einziges Bedienelement einer sonst leeren Zeile sah er aus wie eine
     Pille, die jemand vergessen hat. Ueber die ganze Breite liest er sich als
     das, was er ist: die Klappe ueber allem, was darunter liegt.
     display: flex statt inline-flex, sonst nimmt er seine Breite weiter aus
     dem Inhalt. */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  /* Trefferflaeche wie jede Schaltflaeche im Projekt. */
  min-height: 2.75rem;
  padding: 0 var(--sp-5);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--toem-blau);
  cursor: pointer;
}
.filterleiste[data-klappbar="ja"] .filterleiste__klapper:hover,
.filterleiste[data-klappbar="ja"] .filterleiste__klapper:focus-visible {
  border-color: var(--toem-blau);
}
/* DIE ZAHL DER GESETZTEN FILTER. Goldene Scheibe mit blauer Schrift - Gold
   traegt als Flaeche nur mit blauer Schrift darauf, gemessen 7,39:1. */
.filterleiste__klapper__zahl {
  display: grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.3em;
  border-radius: var(--r-pill);
  background: var(--toem-gold);
  font-size: var(--fs-100);
  color: var(--toem-blau);
}
/* OHNE DIESE ZEILE STEHT DA "FILTER 0". Das Skript setzt das hidden-Attribut,
   sobald kein Filter gewaehlt ist - dessen display: none kommt aber aus dem
   Browser-Stylesheet und verliert gegen JEDE eigene display-Angabe, hier
   gegen das display: grid der Scheibe. Genau die Falle, die im Kopf dieser
   Datei fuer die Karten steht, und ich bin am selben Tag hineingelaufen.
   Gesehen hat es das Bildschirmfoto, nicht die Messung: die las das Attribut
   und fand es gesetzt. */
.filterleiste__klapper__zahl[hidden] { display: none; }
.filterleiste__klapper__chev {
  width: var(--zeichen-inline);
  height: var(--zeichen-inline);
  flex: none;
  transition: rotate var(--dur) var(--ease);
}
/* Der Winkel ans rechte Ende, Beschriftung und Zahl bleiben links beieinander.
   margin-left: auto und nicht justify-content: space-between: bei drei Kindern
   schoebe space-between die Zahl in die Mitte, weg von ihrem Wort. */
.filterleiste[data-klappbar="ja"] .filterleiste__klapper__chev { margin-left: auto; }
.filterleiste[data-offen="ja"] .filterleiste__klapper__chev { rotate: 180deg; }

/* Die Huelle traegt die Gruppen. Im aufgeklappten Zustand muss sie das
   Spaltenraster der Leiste durchreichen, sonst steht das Label wieder ueber
   den Pillen statt daneben - auf schmalen Schirmen ist das ohnehin der
   Zustand, oberhalb der Grenze aber nicht. */
.filterleiste__klappe {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--sp-4) var(--sp-5);
}
/* EINSPALTIG NUR AUF SCHMALEN SCHIRMEN. Seit der Knopf ueberall gilt, darf
   diese Regel nicht mehr am Klappzustand haengen: sonst stuenden die Labels
   auch auf 1440 px ueber ihren Pillen, sobald jemand aufklappt. */
@media (max-width: 46rem) {
  .filterleiste[data-klappbar="ja"] .filterleiste__klappe {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}
.filterleiste[data-klappbar="ja"][data-offen="nein"] .filterleiste__klappe {
  display: none;
}