/* ================= Prototyp · Modul Galerie =================
   Aufruf: <div data-gallery data-preset="hochzeit|alle|geburtstag|indisch|save-the-date|taufe|goldene-hochzeit"
   data-exclude="<id>" data-chips="off" data-feier data-pick></div>. data-chips="off": ohne Chips, nur der Preset;
   data-feier: Wähler „Wie feiert ihr?“; data-pick: Karte wählen, die Seite nimmt den Stil an (B6). Chips nach Anlass, versetztes Karussell (ungerade oben, gerade unten), nur
   Poster-Platzhalter (Rosengarten mit echtem Poster), Link unter der Leiste folgt dem Chip. Laufband nur bei
   erlaubter Bewegung, mit Pause-Knopf; Wischen und Pfeiltasten gehen immer. Filterwechsel animiert (Chip füllt sich mit
   Tinte, Karten sinken weg und werden neu ausgeteilt), bei reduzierter Bewegung sofort. Tokens aus base.css mit Fallbacks.
   Dunkel: Chips und Knöpfe folgen den Tokens (gewählter Chip creme mit dunkler Schrift); die Karten sind Einladungen und
   bleiben hell (color-scheme:light), gedämpft über --media-dim und mit Lichtkante (Zweier-Muster am Ende). */

[data-gallery]{
 --_bg:var(--bg,#F7F2EA);--_surface:var(--surface,#FFFDF9);--_line:var(--line,#E2D7C6);--_ink:var(--ink,#2A221C);
 --_muted:var(--muted,#64584C);--_on:var(--on-ink,#FFFDF9);--_acc:var(--acc,#7E6129);
 --_serif:var(--serif,"Cormorant Garamond",Georgia,serif);--_sans:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif);
 --_shadow:var(--shadow,0 22px 40px -28px rgba(42,34,28,.55));
 --gw:200px;--off:42px;
 display:grid;gap:22px;min-width:0;color:var(--_ink);font-family:var(--_sans)
}
.ga-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ga-chip{position:relative;isolation:isolate;overflow:hidden;min-height:40px;padding:0 16px;border:1px solid var(--_line);border-radius:99px;background:var(--_surface);color:var(--_ink);font:500 14px/1 var(--_sans);cursor:pointer;transition:color .25s,border-color .25s}
/* Chip als Link auf eine andere Seite (Hochzeitsseite: Anand Karaj, Hindu-Hochzeit → Indische Feste) */
.ga-chip.ga-out{display:inline-flex;align-items:center;text-decoration:none}
.ga-chip.ga-out span{margin-left:.35em}
/* Gewählter Chip: Tinte breitet sich vom Klickpunkt aus (--ox/--oy aus gallery.js), beim Abwählen zieht sie sich zurück */
.ga-chip::before{content:"";position:absolute;z-index:-1;left:var(--ox,50%);top:var(--oy,50%);width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:var(--_ink);transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,.7,.2,1),opacity .3s}
.ga-chip[aria-pressed=true]{border-color:var(--_ink);color:var(--_on)}
.ga-chip[aria-pressed=true]::before{transform:scale(1);opacity:1}
.ga-chip:focus-visible,.ga-rail:focus-visible,.ga-pause:focus-visible,.ga-card:focus-visible{outline:2px solid var(--_ink);outline-offset:3px}
.ga-rail{overflow-anchor:none;position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;border-radius:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.ga-rail::-webkit-scrollbar{display:none}
.ga-rail.ga-running{scroll-snap-type:none}
.ga-track{list-style:none;margin:0;display:flex;align-items:flex-start;gap:20px;width:max-content;padding:4px 4px calc(var(--off) + 8px)}
.ga-item{flex:none;width:var(--gw);scroll-snap-align:start}
.ga-item.lo{margin-top:var(--off)}
.ga-card{display:grid;gap:6px;color:inherit;text-decoration:none;border-radius:10px}
.ga-poster{position:relative;display:grid;place-items:center;align-content:center;gap:12px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--t,#EDE4D6);box-shadow:var(--_shadow);color:#2A221C;color-scheme:light;--paper:url(../assets/paper/paper-deckle-light.webp);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
/* Die Karte ist eine Einladung: helles Bütten auch im Dunkeln (--paper lokal auf hell) */
.ga-poster::after{content:"";position:absolute;inset:0;background:var(--paper,none) 0 0/256px 256px;opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.ga-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
/* Echtes Poster (3:4, Titel nach dem Öffnen): Platzhalter und Papier darüber ausblenden; fehlt das Bild, bleiben sie */
.ga-poster.has-img>:is(svg,b){visibility:hidden}
.ga-poster.has-img::after{display:none}
.ga-poster svg{width:52px;height:52px;fill:none;stroke:#2A221C;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ga-poster b{font:500 26px/1.05 var(--_serif);text-align:center;padding:0 12px}
.ga-tag{position:absolute;top:12px;right:12px;z-index:1;padding:3px 8px;border-radius:99px;background:rgba(255,253,249,.92);font:600 11px/1.2 var(--_sans);color:#2A221C}
.ga-card:hover .ga-poster{transform:translateY(-4px)}
.ga-name{font:600 16px/1.3 var(--_sans)}
.ga-meta{font-size:13px;color:var(--_muted);line-height:1.35}
.ga-art{font-size:12px;color:var(--_muted);line-height:1.35}
.ga-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
.ga-more{font:500 15px/1.4 var(--_sans);color:var(--_ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--_ink) 35%,transparent)}
.ga-pause{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--_line);border-radius:99px;background:var(--_surface);color:var(--_muted);font:500 13px/1 var(--_sans);cursor:pointer}
.ga-pause[hidden]{display:none}
.ga-empty{color:var(--_muted);text-align:center}
@media (max-width:699px){
 [data-gallery]{--gw:140px;--off:30px}
 .ga-chips{gap:6px}
 .ga-chip{min-height:36px;padding:0 12px;font-size:13px}
 .ga-poster{border-radius:10px}
 .ga-poster b{font-size:20px}
 .ga-poster svg{width:40px;height:40px}
 .ga-track{gap:12px}
}
@media (prefers-reduced-motion:reduce){[data-gallery] *{transition:none!important}}
html.rm [data-gallery] *{transition:none!important}
/* Erster Auftritt: Karten warten unsichtbar, bis gallery.js sie austeilt (nur mit Skript und Bewegung) */
.ga-pre .ga-card{opacity:0}
/* Platz für die Galerie, bis gallery.js sie füllt (nur mit Skript), damit darunter nichts nachrutscht (CLS) */
@media (scripting:enabled){
 [data-gallery]:empty,#an-gallery:empty,[data-gallery][data-feier]:empty{min-height:575px}
 [data-gallery][data-chips=off]:empty{min-height:513px}
}
@media (scripting:enabled) and (max-width:699px){
 [data-gallery]:empty,#an-gallery:empty{min-height:570px}
 [data-gallery][data-chips=off]:empty{min-height:480px}
}

/* ---------- Dunkel: was keine Farbe ist (Zweier-Muster, ohne Skript) ---------- */
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]) .ga-poster{filter:brightness(var(--media-dim,.9))}
}
:root[data-theme=dark] .ga-poster{filter:brightness(var(--media-dim,.9))}

/* ---------- Design wählen (data-pick): Rahmen, Anheben und Häkchen an der gewählten Karte, Leiste im Platz von Link und
   Pause-Knopf ----------
   Die Seitenfarben setzt gallery.js inline auf <html>; überblendet wird einmal für die ganze Seite (galavoFade, theme.js,
   html.g-fade). Die Galerie läuft dabei als eigene Ebene live weiter, ohne altes Bild: Laufband, Austeilen, Gleiten und
   Leiste scheinen nicht als stehender Geist durch. Feste Leisten (Aktionsleiste am Handy, Prototyp) bekommen dafür
   ebenfalls eigene Ebenen, sonst läge die Galerie während der Überblendung über ihnen. Nur eine Galerie mit data-pick
   je Seite (Namen sind eindeutig). */
html.g-fade [data-pick]{view-transition-name:ga-gal}
html.g-fade .cta-bar{view-transition-name:g-cta}
html.g-fade .g-proto{view-transition-name:g-proto}
::view-transition-group(ga-gal),::view-transition-new(ga-gal),::view-transition-group(g-cta),::view-transition-new(g-cta),::view-transition-group(g-proto),::view-transition-new(g-proto){animation:none}
::view-transition-old(ga-gal),::view-transition-old(g-cta),::view-transition-old(g-proto){display:none}
/* Rahmenfarbe an der Karte auflösen: das Poster ist immer hell (color-scheme:light), der Akzent folgt aber der Seite */
@property --ga-ring{syntax:'<color>';inherits:true;initial-value:transparent}
@property --ga-on{syntax:'<color>';inherits:true;initial-value:transparent}
/* Gewählt (Gagandeep 10.10.2026, vorher 1,5 px): 3 px Rahmen im Akzent mit 3 px Abstand, die ganze Karte bleibt 4 px
   angehoben, Häkchen oben links im Poster. Der Tastaturfokus der gewählten Karte liegt weiter außen (9 px, Tinte, um
   Poster und Text), so bleibt er vom Rahmen klar getrennt. */
[data-pick] .ga-card{transition:transform .35s cubic-bezier(.3,.7,.2,1)}
[data-pick] .ga-card.is-sel{--ga-ring:var(--_acc);--ga-on:var(--_on);transform:translateY(-4px)}
[data-pick] .ga-card.is-sel:focus-visible{outline-offset:9px}
[data-pick] .ga-poster{outline:3px solid var(--ga-ring);outline-offset:3px;transition:transform .35s cubic-bezier(.3,.7,.2,1),outline-color .25s}
[data-pick] .ga-card.is-sel .ga-poster{transform:none}
.ga-ok{position:absolute;z-index:1;left:10px;top:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ga-ring);color:var(--ga-on);box-shadow:0 1px 3px rgba(42,34,28,.35);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .35s cubic-bezier(.2,.9,.25,1.15)}
.ga-poster .ga-ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ga-card.is-sel .ga-ok{opacity:1;transform:none}
/* Die Leiste schneidet senkrecht ab: oben Platz für Anheben, Rahmen und Fokus, ohne dass die Galerie höher wird */
[data-pick] .ga-rail{padding-top:14px;margin-top:-14px}
.ga-rail.ga-sel{scroll-snap-type:none}
/* Link und Leiste liegen übereinander. Die Leiste zählt im Raster nur so hoch wie der Link allein (22 px, negative
   Ränder), damit der Fuß nie höher wird als bisher (auch ohne Pause-Knopf); was sie mehr braucht, ragt in freien Rand */
.ga-stack{display:grid;justify-content:stretch;container-type:inline-size}
.ga-stack>*{grid-area:1/1}
.ga-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;transition:opacity .25s ease .1s,visibility 0s}
.ga-stack.on .ga-links{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.ga-bar{display:flex;align-items:center;justify-content:center;gap:10px 14px;min-width:0;margin:-9px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.ga-stack.on .ga-bar{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .1s,transform .4s cubic-bezier(.3,.7,.2,1) .1s,visibility 0s}
.ga-bi{grid-area:bi;min-width:0;margin:0 6px 0 0;font:400 14px/20px var(--_sans);color:var(--_muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-bi b{font:500 19px/20px var(--_serif);color:var(--_ink)}
.ga-bar :is(.btn,.btn-ghost){min-height:40px;padding:0 18px;font-size:15px}
.ga-go{grid-area:go}
.ga-view{grid-area:view}
.ga-x{grid-area:x;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--_muted);font:500 14px/1 var(--_sans);cursor:pointer}
.ga-x>span:first-child{font-size:19px;line-height:1}
.ga-x:hover{color:var(--_ink)}
.ga-bar :focus-visible{outline:2px solid var(--_ink);outline-offset:2px}
/* Schmal: Name und × oben, darunter Anlass · Paket, dann die beiden Knöpfe (92 px); sie reicht etwas in den freien Rand
   unter dem Laufband und in den Abstand unter der Galerie */
@container (max-width:859px){
 .ga-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"bi bi x" "go view view";align-items:start;gap:12px 8px;justify-self:center;width:min(100%,420px);margin:-36px 0 -34px}
 .ga-bi{display:grid;margin:0}
 .ga-bi b{line-height:22px}
 .ga-bs{display:none}
 .ga-bm{font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis}
 .ga-bar :is(.btn,.btn-ghost){padding:0 14px;font-size:14px}
 .ga-go{min-width:0;white-space:normal;text-align:center;line-height:1.15}
 .ga-x{justify-self:end;justify-content:center;width:24px;min-height:24px;padding:0}
 .ga-x::after{content:"";position:absolute;inset:-10px}
 .ga-xl{display:none}
}
/* Nur für Screenreader: „… gewählt“ bzw. „Auswahl aufgehoben“ */
.ga-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* „Wie feiert ihr?“ (data-feier): Beschriftung vor den Chips; die Chips selbst wie oben (Tinte füllt den gewählten) */
.ga-flabel{align-self:center;margin-right:6px;font:500 18px/1.2 var(--_serif);color:var(--_ink)}
@media (max-width:699px){.ga-flabel{flex-basis:100%;margin:0 0 2px;text-align:center}}