/* ==========================================================================
   pages/rezepte.css
   Seitenkopf und Filterleiste der Rezeptliste.
   Die Karten selbst kommen aus sections/rezepte.css - dieselbe Karte wie auf
   der Startseite und auf den Produktseiten. Hier steht nur, was die
   Listenseite zusaetzlich braucht.
   ========================================================================== */

/* --- Seitenkopf --------------------------------------------------------- */
/* Kein Bogen und kein Stimmungsbild: der Goldbogen ist den Imageseiten und
   dem Produktkopf vorbehalten. Eine Listenseite soll schnell zur Liste
   kommen, deshalb unten nur --sp-8 statt eines vollen Sektionsabstands. */
.rezkopf {
  background: var(--bg-page);
  padding-block: var(--sp-sektion) var(--sp-8);
}

/* Aufbau wie die H1 einer Produktseite: Begriff in Figtree, darunter die
   Grafolita-Schwungzeile. Gewicht 400 und --fs-600, also derselbe Schnitt wie
   die Sektionsueberschriften der Seite - die Groesse tragt die Schwungzeile.
   Die em-Behandlung kommt aus components/sektionstitel.css. */
.rezkopf__title {
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-4);
}
/* Wie im Produktkopf: der Token, kein em-Faktor, damit die Schwungzeile
   dieselbe Groesse traegt wie die Grafolita der Startseiten-Hero.
   NICHT in die em-Gruppen von feinschliff.css eintragen, die wuerden den
   Token an zwei Breakpoints ueberschreiben. */
.rezkopf__title em {
  font-size: var(--fs-800);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
.rezkopf__lead {
  max-width: 34rem;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

/* --- Listenbahn --------------------------------------------------------- */
/* Graue Bahn, wie die Rezeptsektion auf der Startseite: die weissen Karten
   brauchen den Flaechenunterschied. Oben --sp-7 statt --sp-sektion, weil der
   Kopf darueber auf derselben Seite steht und keine Bahnkante dazwischen
   liegt, die den vollen Abstand rechtfertigen wuerde. */
.rezliste {
  background: var(--bg-soft);
  padding-block: var(--sp-7) var(--sp-sektion);
}

/* --- Filterleiste ------------------------------------------------------- */

/* Schmal stapelt die Gruppe wieder: Label ueber den Pillen. Bei 360 px
   blieben von 1208 px nach der Labelspalte keine 260 px fuer die Pillen
   uebrig, jede Pille stuende dann allein auf einer Zeile. */

/* --- Leere Auswahl ------------------------------------------------------ */
/* Sackgassen ohne Ausweg sind der haeufigste Fehler bei Filterlisten,
   deshalb steht der Weg zurueck direkt im Satz. */
.rezliste__leer {
  margin: var(--sp-7) 0 0;
  font-size: var(--fs-400);
  color: var(--text-muted);
}
.rezliste__leer__reset {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: inherit;
  color: var(--toem-blau);
  font-weight: 600;
  cursor: pointer;
}
.rezliste__leer__reset:hover,
.rezliste__leer__reset:focus-visible { color: var(--toem-gold); }

/* --- Motivhoehe auf der Listenseite ------------------------------------- */
/* 3:2 quer statt 3:4 hoch. Der Teaser auf der Startseite und auf den
   Produktseiten zeigt maximal drei Karten, dort traegt das Hochformat. Diese
   Liste traegt aktuell zehn Rezepte und soll auf zwanzig wachsen - bei drei
   Spalten sind das sieben Reihen, und im Hochformat wuerde die Seite doppelt
   so hoch wie noetig.
   Der Zuschnitt der Motive ist auf 900 x 600 gerechnet, passt also. */
.rezliste__grid .rez__media { aspect-ratio: 3 / 2; }

/* --- Ausgefilterte Karten ----------------------------------------------- */
/* ZWINGEND. Das hidden-Attribut setzt display: none nur im Stylesheet des
   Browsers, und jede Autorenregel schlaegt das. .rez__card traegt
   display: block aus sections/rezepte.css - ohne die Regel hier standen die
   ausgefilterten Karten mit hidden=true weiter in voller Groesse da,
   gemessen 387 x 654 px. Der Filter tat optisch nichts, obwohl die
   Auszeichnung stimmte.
   Deshalb NIE hidden allein verlassen, wenn das Element ein eigenes display
   hat. */
.rezliste__karte[hidden] { display: none; }

/* --- Gitter ------------------------------------------------------------- */
/* sections/rezepte.css stellt drei Spalten fuer den Teaser. Auf der
   Listenseite duerfen es mehr Zeilen sein, die Spaltenzahl bleibt - vier
   Karten nebeneinander machen die Motive zu klein, das war schon beim
   Anwendungsslider die Erfahrung. */
.rezliste__grid { row-gap: clamp(var(--sp-6), 4vw, var(--sp-7)); }

/* --- Bezugsquellen am Seitenfuss --------------------------------------- */
/* Weisse Bahn statt der grauen Vorgabe aus components/bezugsquellen.css: die
   Rezeptliste darueber steht auf --bg-soft, und zwei graue Bahnen
   hintereinander verschlucken die Trennung. Bahnenfolge der Seite damit
   weiss, grau, weiss, blauer Footer. */
.pshops { --bezug-grund: var(--bg-page); }

/* --- Aufwand in der Filterleiste ---------------------------------------- */
/* Dritte Filtergruppe. Die Einstufung ist fuer das Screendesign von der
   Agentur geschaetzt, Kriterium war die Technik und nicht die Schrittzahl.
   Auf der Liveseite pflegt der Kunde sie - im Theme kommt sie aus einem
   ACF-Feld und landet als data-aufwand an der Karte. */