/* =========================================================
   Anlass-Seiten (Halloween, Weihnachten …) im neuen Aufbau
   (Auftrag Z, 2026-10-30; Feinschliff F1: Kopf mit Bild, Leitbild + Leiste je Gruppe).
   Geladen über `seitenCss: anlass` zusammen mit css/neu.css (Farbwelt A).
   Nur Rollen-Tokens aus neu.css; Kacheln (.pcard) stammen aus style.css/neu.css.
   ========================================================= */
body.seite-anlass { --rand: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter))); }

/* ---------- Kopf: dunkle Bühne, Text links, Bild rechts läuft in die Bühne aus ---------- */
.a-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: min(78vh, 760px); border-bottom: 5px solid var(--s-akzent); }
.a-kopf.ohne-bild { grid-template-columns: 1fr; min-height: 0; }
.a-kopf-text { align-self: center; padding: 40px clamp(24px, 4vw, 64px) 64px var(--rand); }
.seite-anlass .a-kopf .crumbs { max-width: none; margin: 0 0 22px; padding: 0; background: none; color: var(--s-auf-buehne-2); }
.seite-anlass .a-kopf .crumbs a { color: var(--s-auf-buehne-2); }
.seite-anlass .a-kopf .crumbs a:hover { color: var(--s-auf-buehne); }
.a-kopf h1 { font-size: clamp(40px, 5.6vw, 88px); line-height: .96; letter-spacing: -.012em; color: var(--s-auf-buehne); max-width: 14ch; hyphens: manual; }
.a-kopf .lede { color: var(--s-auf-buehne-2); font-size: 17px; line-height: 1.7; max-width: 52ch; margin: 22px 0 30px; }
.a-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.seite-anlass .pill { font-weight: 600; letter-spacing: .12em; padding: 10px 18px; border-radius: 999px; background: transparent; border-color: var(--s-auf-buehne-2); color: var(--s-auf-buehne); }
.seite-anlass .pill:hover:not(.is-active) { border-color: var(--s-auf-buehne); color: var(--s-auf-buehne); }
.seite-anlass .pill.is-active { background: var(--s-akzent); border-color: var(--s-akzent); color: var(--s-buehne); }
.a-kopf-bild { position: relative; min-height: 460px; }
.a-kopf-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
@media (max-width: 900px) {
  .a-kopf { grid-template-columns: 1fr; min-height: 0; }
  /* Handy: Kopfbild im Seitenverhältnis des Fotos (4:5), damit die Figur ganz zu sehen ist (R5) –
     nur ein schmaler Übergang unten, der Text beginnt erst unter der Figur */
  .a-kopf-bild { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .a-kopf-bild img { object-position: 50% 50%; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 8%); mask-image: linear-gradient(0deg, transparent 0%, #000 8%); }
  .a-kopf-text { padding: 8px var(--gutter) 44px; margin-top: 0; position: relative; }
  .a-kopf h1 { font-size: clamp(32px, 9.2vw, 44px); }   /* lange Wörter wie „Weihnachtsgeschenke“ passen in 390 px */
}

/* ---------- Gruppen: großes Leitbild + seitliche Produktleiste, abwechselnd gespiegelt ---------- */
.a-gruppe { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; padding: 80px 0 0 var(--rand); }
.a-gruppe.ist-gespiegelt { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); padding: 80px var(--rand) 0 0; }
.a-gruppe.ist-gespiegelt .a-leit { order: 2; }
.a-gruppe.ist-gespiegelt .a-gruppe-inhalt { padding-left: var(--rand); }
.a-leit { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--s-buehne); box-shadow: 0 30px 60px -34px rgba(var(--s-schatten), .7); }
.a-leit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.a-leit:hover img { transform: scale(1.03); }
.a-gruppe-inhalt { min-width: 0; }
.a-gruppe .c-titel { color: var(--s-text); padding-bottom: 16px; position: relative; border-bottom: 1px solid var(--s-linie); }
.a-gruppe .c-titel::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 4px; background: var(--s-akzent); }
.a-gruppe-text { color: var(--s-text-2); font-size: 16.5px; line-height: 1.7; max-width: 60ch; margin: 18px 0 26px; }
.a-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 19vw, 270px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 22px 4px; scrollbar-color: var(--s-akzent) transparent; }
.a-leiste > * { scroll-snap-align: start; }
.a-leiste .pcard { background: var(--s-flaeche); }
/* Namensschild auf dem Leitbild (wie die Collage im Shop) */
.seite-anlass .sc-schild { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 16px); display: flex; flex-direction: column; gap: 3px; padding: 14px 20px 15px; background: var(--s-buehne); color: var(--s-auf-buehne); }
.seite-anlass .sc-schild b { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .03em; line-height: 1.1; }
.seite-anlass .sc-schild small { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-akzent-buehne); }
@media (max-width: 900px) {
  .a-gruppe, .a-gruppe.ist-gespiegelt { grid-template-columns: 1fr; padding: 56px 0 0 var(--gutter); }
  .a-gruppe.ist-gespiegelt .a-leit { order: 0; }
  .a-gruppe.ist-gespiegelt .a-gruppe-inhalt { padding-left: 0; }
  .a-leit { margin-right: var(--gutter); }
  .a-leiste { grid-auto-columns: 70%; }
  .seite-anlass .sc-schild b { font-size: 19px; }
}

/* ---------- Text am Ende ---------- */
.seite-anlass .kategorie-text { max-width: none; padding: 72px var(--rand) 100px; }
.seite-anlass .kategorie-text > * { max-width: 72ch; }
.seite-anlass .kategorie-text h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .02em; margin: 0 0 14px; padding-top: 18px; position: relative; }
.seite-anlass .kategorie-text h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 4px; background: var(--s-akzent); }
.seite-anlass .kategorie-text p { color: var(--s-text-2); font-size: 16px; line-height: 1.75; }
.seite-anlass .kategorie-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; }