/* =========================================================
   meditationgongs.de · Listenseite (Entwurf 04.09.2026)
   Grund Weiß, Entscheidung Alexander 04.09.2026 („hintergrund weiss").
   Die dunklen Kacheln stehen als Objekte auf dem weißen Grund, Kopf hell mit weinrotem Logo.
   Farben: die sechs Markenwerte, Weiß und Alpha-Ableitungen derselben Farben.
   ========================================================= */

/* ---------- Heller Grund ---------- */
html[data-grund="hell"] body{background:var(--weiss)}
html[data-grund="hell"] .kopf{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-grund="hell"] .logo--weiss{display:none}
html[data-grund="hell"] .logo--wein{display:block}
html[data-grund="hell"] .suche,
html[data-grund="hell"] .sortierung select,
html[data-grund="hell"] .preisspanne input,
html[data-grund="hell"] .chip{border-color:var(--dunkel-14)}
html[data-grund="hell"] .ikon-knopf:hover{background:var(--dunkel-06);border-color:var(--dunkel-14)}
html[data-grund="hell"] .filter.offen{background:var(--weiss)}

/* ---------- Feinschliff Listenseite, gilt für beide Gründe ---------- */
/* Lieferaussage auf schmalen Kacheln: Ring oben an der ersten Zeile, nicht in der Mitte eines Dreizeilers */
.katalog .liefer{align-items:flex-start;line-height:1.35}
.katalog .liefer .ring{flex:none;margin-top:.2em}

/* Unter 400 px steht „netto" in der zweiten Zeile, Zahl und Eurozeichen bleiben zusammen (Jody: Überlauf bei 360 px) */
@media (max-width:400px){.kacheln .preis small{display:block;margin-left:0}}
/* Der Kategorietext steht unter dem Katalog in voller Breite, nicht neben dem Filter */
.katalog{padding-bottom:calc(var(--sec)*.5)}
.wrap > .seo-text{margin-top:0;padding-top:calc(var(--sec)*.6);padding-bottom:var(--sec)}
/* Zwischen 901 und 1000 px passen drei Kacheln neben dem Filter nicht ohne Überlauf, deshalb zwei */
@media (max-width:1000px){.katalog .kacheln{grid-template-columns:repeat(2,1fr)}}

/* ---------- Kopfbild der Kategorie ----------
   Alexanders Anmerkungen vom 12.09.2026 auf Gongs, Mallets, Reiber und
   Klangspiele: ganz oben soll ein Motiv stehen. Gleiche Haltung wie das
   Breitbild-Band der Markenseite (marke.css, .mkopf__bild--band): das Bild
   behaelt sein eigenes Seitenverhaeltnis, beide Achsen bleiben auf auto.
   Bewusst KEIN aspect-ratio hier, das hat am 12.09.2026 am Produkt-Kopfband
   bei drei von zwoelf Motiven ein Viertel der Bildhoehe abgeschnitten.
   margin:0 gegen das Standardpolster des Browsers fuer figure (1em 40px),
   sonst steht das Band 40 Pixel schmaler als Titel und Text. */
.kkopf__band{
  margin:clamp(14px,1.8vw,26px) 0 0;
  border-radius:var(--radius-l);overflow:hidden;
  box-shadow:var(--shadow-tile);background:var(--dunkel);
}
.kkopf__band img{display:block;width:100%;height:auto}
/* Steht ein Band darueber, braucht der Kopf oben weniger Polster, sonst klafft
   eine Luecke zwischen Motiv und Ueberschrift. */
.listen-kopf--mit-bild{padding-top:clamp(20px,2.6vw,34px)}

/* Unter 700 Pixel laeuft das Band randlos ueber die volle Breite, ohne Radius,
   wie auf der Markenseite und wie die Bildbaender der Startseite. Der Ausbruch
   rechnet mit der Fensterbreite selbst statt mit dem Polster des Elternteils,
   sonst muesste jede Aenderung an --gutter hier nachgezogen werden. */
@media (max-width:699px){
  .kkopf__band{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    width:100vw;max-width:100vw;border-radius:0;box-shadow:none;
  }
}

/* Das Sortierfeld hat auf schmalen Fenstern seine eigene Breite behalten und
   die Seite nach rechts geschoben: gemessen 417 statt 390 Pixel auf der Seite
   Gongs, deren laengste Option seit dem 13.09.2026 "Symphonische zuerst"
   heisst. Feld und Zeile bleiben jetzt im Raum, die Beschriftung darf
   umbrechen. */
.sortierung{flex-wrap:wrap;max-width:100%}
.sortierung select{max-width:100%;min-width:0}