/* =========================================================
   Shop im neuen Aufbau (Auftrag F1, 2026-10-30): Übersicht, Kategorie- und
   Unterkategorieseiten. Geladen über `seitenCss: shop` zusammen mit css/neu.css.
   Nur Rollen-Tokens aus neu.css (--s-*), keine eigenen Farben.
   Collage-Markup: shop/collage.njk.
   ========================================================= */
body.seite-shop {
  --rand: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  background: var(--s-grund);
}

/* ---------- Kopf: dunkle Bühne mit großer Überschrift (wie FAQ, Anlass) ---------- */
.seite-shop .crumbs { max-width: none; margin: 0; padding: 34px var(--rand) 0; background: var(--s-buehne); color: var(--s-auf-buehne-2); }
.seite-shop .crumbs a { color: var(--s-auf-buehne-2); }
.seite-shop .crumbs a:hover { color: var(--s-auf-buehne); }
.seite-shop .page-header { max-width: none; margin: 0; padding: 14px var(--rand) 60px; background: var(--s-buehne); border-bottom: 5px solid var(--s-akzent); }
.seite-shop .page-header h1 { font-size: clamp(44px, 6.2vw, 96px); line-height: .94; letter-spacing: -.012em; color: var(--s-auf-buehne); max-width: 16ch; hyphens: manual; }
.seite-shop .page-header .lede { color: var(--s-auf-buehne-2); font-size: 17px; line-height: 1.7; max-width: 58ch; margin: 22px 0 0; }
@media (max-width: 640px) { .seite-shop .crumbs { padding-top: 26px; } .seite-shop .page-header { padding-bottom: 40px; } }

/* ---------- Filter: gesperrte Versalien, aktiv = Bühnen-Pille ---------- */
.seite-shop .filter-row { max-width: none; padding: 40px var(--rand) 0; gap: 10px 12px; }
.seite-shop .pill { font-weight: 600; letter-spacing: .12em; padding: 10px 18px; border-radius: 999px; background: var(--s-flaeche); color: var(--s-text); }
.seite-shop .pill:hover:not(.is-active) { border-color: var(--s-text); color: var(--s-text); }
.seite-shop .pill.is-active { background: var(--s-buehne); border-color: var(--s-buehne); color: var(--s-auf-buehne); }

/* ---------- Collage ----------
   12 Spalten, Bildfelder quadratisch (3 Spalten), das erste groß (6 Spalten × 2 Zeilen).
   Das Textfeld bekommt in der Vorlage die Breite, die die letzte Zeile auffüllt (sc-t3 … sc-t12). */
.shop-gruppe { padding: 40px var(--rand) 0; }
.shop-gruppe:last-of-type { padding-bottom: 100px; }
/* Danach folgt auf /shop/ der Anfrage-Abschnitt (eine section mehr): gleicher Abstand als Rand */
.seite-shop .s-anfrage { margin-top: 100px; }
.shop-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; background: var(--s-buehne); }
.shop-collage.ist-halb { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sc-bild { grid-column: span 3; aspect-ratio: 1; position: relative; overflow: hidden; display: block; background: var(--s-flaeche); }
.sc-bild.ist-gross { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
/* In der halben Collage (Kategorieseite) gibt es keine Nachbarn, die die Zeilenhöhe setzen: groß = volle Breite, quadratisch */
.shop-collage.ist-halb .sc-bild.ist-gross { grid-row: auto; aspect-ratio: 1; }
.sc-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sc-bild:hover img { transform: scale(1.04); }
/* Titelbild aus dem Motiv-Neusatz (Untersetzer ganz, einfarbiger Fotogrund): etwas kleiner gesetzt,
   damit das Namensschild im Rand sitzt und nicht auf dem Motiv */
.sc-bild.ist-motiv { background: #E1E1E1; }   /* = Rand des Motivfotos (225, 225, 225) */
.sc-bild.ist-motiv img { inset: 6% 8% 16% 8%; width: 84%; height: 78%; object-fit: contain; }
/* Schild: kleines dunkles Namensfeld unten links, verdeckt nur die Bildecke */
.sc-schild { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 16px); display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px 11px; background: var(--s-buehne); color: var(--s-auf-buehne); }
.sc-schild b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .03em; line-height: 1.1; }
.sc-schild small { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-auf-buehne-2); }
.sc-bild.ist-gross .sc-schild { padding: 14px 20px 15px; }
.sc-bild.ist-gross .sc-schild b { font-size: 24px; }
.sc-bild:hover .sc-schild b, .sc-bild:focus-visible .sc-schild b { color: var(--s-akzent-buehne); }

.sc-text { position: relative; padding: clamp(26px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.sc-t3 { grid-column: span 3; } .sc-t6 { grid-column: span 6; } .sc-t9 { grid-column: span 9; } .sc-t12 { grid-column: span 12; }
.sc-text p { margin: 0; font-size: 16px; line-height: 1.65; max-width: 46ch; }
.sc-text.ist-dunkel { background: var(--s-buehne-2); color: var(--s-auf-buehne); }
.sc-text.ist-dunkel p { color: var(--s-auf-buehne-2); }
.sc-text.ist-dunkel .c-link { color: var(--s-auf-buehne); }
.sc-text.ist-hell { background: var(--s-flaeche); color: var(--s-text); }
.sc-text.ist-hell p { color: var(--s-text-2); }
.sc-text.ist-hell .c-link { color: var(--s-akzent-text); }

@media (max-width: 900px) {
  .shop-collage, .shop-collage.ist-halb { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sc-t3, .sc-t6, .sc-t9, .sc-t12 { grid-column: 1 / -1; }
  .sc-bild.klein-handy { grid-column: span 3; grid-row: auto; aspect-ratio: 1; }
  .sc-bild.ist-gross:not(.klein-handy) { aspect-ratio: 1; grid-row: auto; }
  .sc-schild { padding: 8px 11px 9px; }
  .sc-schild b { font-size: 15px; }
  .sc-bild.ist-gross .sc-schild b { font-size: 20px; }
}

/* ---------- Kategorieseite: Collage links, Text rechts ---------- */
.kat-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding: 40px var(--rand) 100px; }
.kat-text { position: sticky; top: 24px; }
.kat-text .c-titel { color: var(--s-text); font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--s-linie); }
.kat-text p { color: var(--s-text-2); font-size: 16px; line-height: 1.75; max-width: 60ch; }
.kat-text a:not([class]) { color: var(--s-akzent-text); text-decoration: underline; text-decoration-color: var(--s-akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .kat-layout { grid-template-columns: 1fr; padding-bottom: 72px; }
  .kat-text { position: static; }
}

/* ---------- Unterkategorie: Produktraster und Text ---------- */
.seite-shop .section-pad { max-width: none; padding: 40px var(--rand) 24px; }
.seite-shop .pgrid { gap: 22px; }
.seite-shop .kategorie-text { max-width: none; padding: 40px var(--rand) 100px; }
.seite-shop .kategorie-text > * { max-width: 72ch; }
.seite-shop .kategorie-text h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .02em; margin: 0 0 14px; }
.seite-shop .kategorie-text p { color: var(--s-text-2); font-size: 16px; line-height: 1.75; }
.seite-shop .empty-state { color: var(--s-text-2); }