/* Galavo · Prototyp · pages.css (Agent A): Abschnitte der Startseite, der Hochzeitsseite und von start.html.
   Bewegung nur unter .in (einmal beim Erscheinen) bzw. .vis (läuft nur im Sichtbereich), beides setzt pages.js.
   Ohne Skript oder bei html.rm steht der Endzustand. Animiert werden nur transform, opacity, stroke-dashoffset.
   Dunkel („Dunkler Karton“): Farben über die Tokens bzw. light-dark(hell, dunkel), der helle Wert ist immer der alte.
   Was keine Farbe ist, steht im Zweier-Muster am Ende. Einladungen in den Handys bleiben hell (color-scheme:light)
   und werden nur über --media-dim gedämpft. */

.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--on-ink);border-radius:4px;text-decoration:none}
.skip:focus{top:12px}
.center{text-align:center}
.acts.center{justify-content:center}
.acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.more{margin-top:36px}
.note{margin-top:28px;font-size:14px;color:var(--muted)}
.gal-slot{margin-top:28px}
.sec + .sec{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.hero + .sec{border-top:0}

/* ---------- So erleben es eure Gäste ---------- */
.guests{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:48px;margin-top:48px}
.g-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.gphone{overflow-anchor:none;width:100%;container-type:inline-size;aspect-ratio:9/19.5;padding:3.5%;border-radius:15%/7%;background:#15110E;box-shadow:0 0 0 1px #3A312A,var(--shadow);margin-bottom:12px}
.gscr{position:relative;height:100%;border-radius:12%/5.6%;overflow:hidden;background:#FAF5EB;color:#2A221C;color-scheme:light}
.gscr video,.gscr .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-t{font:500 26px/1.1 var(--serif)}
/* Abzeichen „Bald“ für Funktionen nach dem Start (Minispiel) */
.g-soon{display:inline-block;margin-left:8px;padding:4px 8px;border:1px solid var(--line);border-radius:99px;vertical-align:middle;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.g-d{font-size:15px;color:var(--muted);max-width:16em}
@media (max-width:699px){
 .guests{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:32px}
 .g-t{font-size:19px}
 .g-d{font-size:12.5px}
}
/* Minispiel: Rubbellos */
.scr-scratch{display:grid;place-items:center;align-content:center;gap:8cqw;padding:10cqw;background:linear-gradient(170deg,#F7EEE2,#EFE1CF)}
.sc-k{font:500 10cqw/1.1 var(--serif);text-align:center}
.sc-hint{font:600 5.6cqw/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#64584C}
.sc-card{position:relative;width:78cqw;aspect-ratio:1.2;border-radius:6cqw;background:#FFFDF9;box-shadow:0 0 0 1px #E2D7C6;display:grid;place-items:center;align-content:center;overflow:hidden}
.sc-date{font:500 15cqw/1 var(--serif);color:#7E6129}
.sc-y{font-size:5.4cqw;color:#64584C;margin-top:2cqw}
.sc-cover{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.sc-cover i{background:radial-gradient(circle at 35% 30%,#E9D4A4,#B8924E 70%);opacity:0}
@keyframes sc-cov{0%,8%{opacity:1;transform:none}22%,78%{opacity:0;transform:scale(.4) rotate(25deg)}92%,100%{opacity:1;transform:none}}
.vis .sc-cover i{animation:sc-cov 7s var(--ease) infinite;animation-delay:calc(var(--i)*.12s)}
/* Zusage */
.scr-rsvp{display:grid;align-content:center;gap:7cqw;padding:12cqw 11cqw;background:#FFFDF9}
.rv-k{font:500 11cqw/1.05 var(--serif)}
.rv-list{list-style:none;display:grid;gap:5cqw}
.rv-list li{display:flex;align-items:center;text-align:left;gap:4cqw;font-size:7.2cqw}
.rv-list svg{width:9cqw;height:9cqw;flex:none;fill:none;stroke:#2A221C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rv-c{stroke:#7E6129!important;stroke-width:2.2!important;stroke-dasharray:1;stroke-dashoffset:0}
.rv-btn{justify-self:start;margin-top:2cqw;padding:3.4cqw 7cqw;border-radius:2cqw;background:#2A221C;color:#FFFDF9;font:600 6.4cqw/1 var(--sans)}
.rv-ok{justify-self:start;font:italic 500 8cqw/1.1 var(--serif);color:#7E6129}
@keyframes rv-draw{0%,10%{stroke-dashoffset:1}20%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes rv-press{0%,52%{transform:none}56%{transform:scale(.92)}60%,100%{transform:none}}
@keyframes rv-ok{0%,58%{opacity:0;transform:translateY(3cqw)}64%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.vis .rv-list li:nth-child(1) .rv-c{animation:rv-draw 7s var(--ease) infinite}
.vis .rv-list li:nth-child(2) .rv-c{animation:rv-draw 7s var(--ease) .5s infinite}
.vis .rv-list li:nth-child(3) .rv-c{animation:rv-draw 7s var(--ease) 1s infinite}
.vis .rv-btn{animation:rv-press 7s var(--ease) infinite}
.vis .rv-ok{animation:rv-ok 7s var(--ease) infinite}

/* ---------- Für jeden Anlass ---------- */
.occ-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:16px;margin-top:40px}
.occ{position:relative;display:grid;align-content:end;gap:4px;min-height:170px;padding:20px;border-radius:10px;background:var(--surface);border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.occ:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.occ b{font:500 26px/1.1 var(--serif)}
.occ span{font-size:14px;color:var(--muted);padding-right:26px}
.occ svg{position:absolute;right:16px;top:16px;width:64px;height:64px;fill:none;stroke:var(--ink-line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.occ svg .f{fill:light-dark(var(--tint),color-mix(in srgb,var(--tint) 42%,var(--surface)));stroke:none}
.occ::after{content:"→";position:absolute;right:20px;bottom:18px;font-size:18px;color:var(--muted);transition:transform .3s var(--ease)}
.occ:hover::after{transform:translateX(4px)}
.occ.big{grid-row:span 2;min-height:356px;background:light-dark(color-mix(in srgb,var(--tint) 34%,var(--surface)),color-mix(in oklab,var(--tint) 8%,var(--lift)));border-color:light-dark(var(--line),color-mix(in srgb,var(--acc) 30%,var(--line)))}
.occ.big b{font-size:40px}
.occ.big span,.occ.big::after{color:light-dark(var(--muted),color-mix(in srgb,var(--ink) 78%,var(--lift)))}
.occ.big svg{width:140px;height:140px;right:28px;top:28px}
/* Platz über dem Text für das Symbol, sonst rutscht der Titel in schmalen Kacheln darunter (Gagandeep 07.11.2026) */
.occ{padding-top:90px}.occ.big{padding-top:178px}
.occ-grid.small{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Startseite: zwei große Kacheln (Hochzeit, Indische Feste) nebeneinander, darunter die fünf übrigen */
.occ-grid.zwei{grid-template-columns:repeat(10,minmax(0,1fr))}
.occ-grid.zwei .occ{grid-column:span 5}
.occ-grid.zwei .occ.big{grid-column:span 5;grid-row:auto;min-height:260px}
@media (max-width:899px){
 .occ-grid,.occ-grid.small{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .occ.big{grid-column:span 2;grid-row:auto;min-height:200px}
 .occ.big svg{width:96px;height:96px}
 .occ{min-height:140px;padding:16px}
 .occ b{font-size:22px}
 .occ svg{width:48px;height:48px}
 .occ{padding-top:74px}.occ.big{padding-top:134px}
 .occ-grid.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
 .occ-grid.zwei .occ{grid-column:auto}
 .occ-grid.zwei .occ.big{grid-column:span 2;min-height:200px}
 .occ-grid.zwei .occ:last-child:nth-child(odd){grid-column:span 2}
}

/* ---------- Weitere Feste (indisch.html): Kacheln mit kurzem Satz, keine Links, neutrale Motive ---------- */
.feste{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0}
.fest{position:relative;display:grid;align-content:start;gap:6px;min-height:230px;padding:20px 20px 22px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.fest svg{width:56px;height:56px;margin-bottom:8px;fill:none;stroke:var(--ink-line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fest svg .f{fill:light-dark(var(--tint),color-mix(in srgb,var(--tint) 42%,var(--surface)));stroke:none}
.fest h3{font:500 24px/1.12 var(--serif)}
.fest .fest-k{font-size:13px;letter-spacing:.04em;color:var(--acc)}
.fest p:not(.fest-k){font-size:15px;color:var(--muted)}
@media (max-width:1079px){.feste{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.feste{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fest{min-height:0;padding:16px}.fest h3{font-size:21px}.fest svg{width:44px;height:44px}.fest:last-child:nth-child(odd){grid-column:span 2}}

/* ---------- Warum Galavo: Tabelle, Szenen auf Antippen ---------- */
.why{margin-top:44px}
.why table{width:100%;border-collapse:collapse;text-align:left}
.why th,.why td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:16px}
.why thead th{font:500 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink)}
.why tbody th{width:30%;font-weight:600}
.why .us{background:light-dark(var(--ink),var(--lift));color:light-dark(var(--on-ink),var(--ink))}
.why thead .us{color:light-dark(#E9DFD0,var(--acc))}
.why tbody td.sv{color:var(--muted)}
.why-btn{display:flex;align-items:flex-start;gap:10px;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;font-weight:600;cursor:pointer}
.why-btn .chev{width:18px;height:18px;margin-top:2px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-90deg);transition:transform .25s var(--ease)}
.why-btn[aria-expanded=true] .chev{transform:none}
.why tr.on>th,.why tr.on>td:not(.us){background:color-mix(in srgb,var(--sand) 55%,transparent)}
.why-scene td{padding:4px 18px 22px;border-bottom:1px solid var(--line)}
.why-scene[hidden]{display:none}
.why-scene .us{background:light-dark(var(--ink),var(--lift))}
html.rm .why-btn .chev{display:none}
/* Mini-Szenen */
.sc{position:relative;min-height:96px;padding:14px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:14px;display:grid;gap:6px;align-content:start}
.us .sc{background:light-dark(#3A2F27,var(--surface));border-color:light-dark(#4A3E34,var(--line));color:light-dark(#F3ECE2,var(--ink))}
.sc .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.us .sc .k{color:light-dark(#CDBFAE,var(--muted))}
.sc .big{font:500 24px/1.1 var(--serif)}
.sc .strike{position:relative;display:inline-block}
.sc .strike svg{position:absolute;left:-4%;top:40%;width:108%;height:12px;overflow:visible;fill:none;stroke:light-dark(#A4573D,#D88A70);stroke-width:2;stroke-linecap:round}
.sc .hand{font:italic 500 26px/1 var(--serif);color:light-dark(#7E6129,var(--acc))}
.sc .barw{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sc .barw i{display:block;height:100%;background:var(--muted);transform-origin:0 50%}
.sc .ok{color:light-dark(#E9C98A,var(--acc));font-weight:600}
.sc .two{display:flex;gap:8px}
.sc .two i{flex:1;height:44px;border-radius:4px;border:1px solid var(--line);background:color-mix(in srgb,var(--sand) 60%,var(--surface))}
.sc .grp{display:grid;gap:4px}
.sc .grp span{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:4px;background:light-dark(#4A3E34,color-mix(in srgb,var(--ink) 9%,var(--surface)))}
.sc .ring{width:56px;height:56px}
.sc .ring circle{fill:none;stroke-width:6}
.sc .ring .t{stroke:light-dark(#4A3E34,var(--line))}.sc .ring .v{stroke:light-dark(#D9B877,var(--acc));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.3;transform:rotate(-90deg);transform-origin:center}
.sc .tiny{font-size:9px;line-height:1.3;color:var(--muted)}
.sc .huge{font:500 30px/1.1 var(--serif);transform-origin:0 50%}
@keyframes w-draw{from{stroke-dashoffset:1}}
@keyframes w-in{from{opacity:0;transform:translateY(6px)}}
@keyframes w-bar{from{transform:scaleX(0)}to{transform:scaleX(.85)}}
@keyframes w-grow{from{transform:scale(.55);opacity:.4}}
@keyframes w-ring{from{stroke-dashoffset:1}}
.why .sc .barw i{transform:scaleX(.85)}
.why .sc .strike path{stroke-dasharray:1;stroke-dashoffset:0}
.go .strike path{animation:w-draw .7s var(--ease) .3s both}
.go .hand{animation:w-in .6s var(--ease) 1s both}
.go .barw i{animation:w-bar 2.6s cubic-bezier(.4,.1,.6,1) .3s both}
.go .ok,.go .later{animation:w-in .5s var(--ease) 1.4s both}
.go .two i:last-child{animation:w-in .6s var(--ease) .6s both}
.go .grp span:nth-child(2){animation:w-in .6s var(--ease) .5s both}
.go .ring .v{animation:w-ring 1.6s var(--ease) .3s both}
.go .huge{animation:w-grow 1s var(--spring) .3s both}
@media (max-width:899px){
 /* Handy: jede Zeile eine Karte, Galavo zuletzt und dunkel */
 .why table,.why tbody,.why tr,.why th,.why td{display:block}
 .why thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .why tbody tr:not(.why-scene){border:1px solid var(--line);border-radius:10px;margin-top:12px;background:var(--surface);overflow:hidden}
 .why tbody th{width:auto;border-bottom:1px solid var(--line)}
 .why td{border-bottom:0;padding:10px 16px}
 .why td::before{content:attr(data-col);display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
 .why td.us::before{color:light-dark(#CDBFAE,color-mix(in srgb,var(--ink) 78%,var(--lift)))}
 .why tr.on{border-radius:10px 10px 0 0!important}
 .why-scene td{padding:10px 0 0}
 .why-scene td::before{display:none}
 .why-scene .us{background:none}
}

/* ---------- Preise ---------- */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;align-items:stretch}
.price{display:grid;gap:12px;align-content:start;padding:28px}
.price .tag{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.price .amt b{font:500 46px/1 var(--serif)}
.price .amt span{color:var(--muted);font-size:14px;white-space:nowrap}
.pl{list-style:none;display:grid;gap:8px;margin:4px 0 8px;font-size:15px}
.pl li{display:flex;gap:10px}
.pl li::before{content:"";width:12px;height:7px;margin-top:6px;border-left:1.6px solid var(--acc);border-bottom:1.6px solid var(--acc);transform:rotate(-45deg);flex:none}
.price .btn,.price .btn-ghost{width:100%;margin-top:auto}
.price.top{border-color:light-dark(var(--ink),var(--acc));box-shadow:var(--shadow)}
.wprices{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin:44px auto 0;max-width:880px;align-items:start}
@media (max-width:899px){.prices,.wprices{grid-template-columns:1fr}.price{padding:22px}}

/* ---------- Fragen ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;font:500 22px/1.25 var(--serif);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--muted);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted);max-width:40em}
@media (max-width:899px){.faq-wrap{grid-template-columns:1fr;gap:20px}}

/* ---------- Schluss ---------- */
.closing{padding:120px 0}
.closing .wrap{display:grid;justify-items:center;gap:18px}

/* ---------- Hochzeit: Gästegruppen ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:899px){.split{grid-template-columns:1fr;gap:28px}}
.groups-card{padding:8px 20px}
.groups{width:100%;border-collapse:collapse;text-align:center}
.groups th,.groups td{padding:16px 8px;border-bottom:1px solid var(--line)}
.groups tr:last-child>*{border-bottom:0}
.groups thead th{font:500 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.groups tbody th{text-align:left;font:500 22px/1.1 var(--serif)}
.groups .ck{width:22px;height:22px;margin:0 auto;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.groups .ck path{stroke-dasharray:1;stroke-dashoffset:0}
/* „–“ trägt Information: mindestens 3:1 in hell und dunkel */
.groups .no{color:color-mix(in srgb,var(--muted) 70%,var(--surface));font-size:20px}
.groups tbody tr{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.anim:not(.in) .groups tbody tr{opacity:0;transform:translateY(8px)}
.anim.in .groups tbody tr:nth-child(2){transition-delay:.12s}
.anim.in .groups tbody tr:nth-child(3){transition-delay:.24s}
@keyframes g-ck{from{stroke-dashoffset:1}}
.anim.in .groups .ck path{animation:g-ck .5s var(--ease) both;animation-delay:calc(.35s + var(--i)*.09s)}

/* ---------- Hochzeit: Zusagen-Ringe ---------- */
.rings{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:40px;margin-top:48px}
.rings li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.rings svg{width:100%;max-width:200px;aspect-ratio:1}
.rings circle{fill:none;stroke-width:7}
.rg-t{stroke:var(--sand)}
.rg-v{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1));transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1.6s var(--ease)}
.anim:not(.in) .rg-v{stroke-dashoffset:1}
.rings p{position:absolute;top:0;left:0;right:0;aspect-ratio:1;max-width:200px;margin:0 auto;display:flex;align-items:baseline;justify-content:center;place-content:center;gap:4px;flex-wrap:wrap;align-content:center}
.rings p b{font:500 46px/1 var(--serif)}
.rings p span{color:var(--muted);font-size:15px}
.rings h3{font:500 24px/1.1 var(--serif)}
@media (max-width:699px){.rings{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.rings p b{font-size:28px}.rings p span{font-size:12px}.rings h3{font-size:18px}.rings circle{stroke-width:9}}

/* ---------- Hochzeit: Textblock ---------- */
.seo-text{max-width:44em;display:grid;gap:16px}
.seo-text p{font-size:17px;line-height:1.7;color:var(--ink)}
.seo-text .h3{margin-top:14px}

/* ---------- start.html ---------- */
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.start-card{display:grid;gap:4px;padding:22px;text-decoration:none;transition:transform .3s var(--ease)}
.start-card:hover{transform:translateY(-3px)}
.start-card b{font:500 22px/1.2 var(--serif)}
.start-auth{margin-top:56px}
@media (max-width:699px){.start-grid{grid-template-columns:1fr}}

/* Erscheinen beim Scrollen (einmal) */
.anim{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim:not(.in):not(.groups-card):not(.rings){opacity:0;transform:translateY(16px)}
html.rm .anim,html.rm .anim *{opacity:1!important;transform:none!important}
html.rm .rg-v{stroke-dashoffset:calc(1 - var(--p,1))!important}
html.rm .groups .ck path{stroke-dashoffset:0!important}

/* ---------- Dunkel: was keine Farbe ist (Zweier-Muster, ohne Skript) ---------- */
/* Einladungen im Handy behalten ihre Farben und werden nur gedämpft; die schwarzen Handys bekommen eine feine helle Kante
   und oben die Lichtkante (--rim), sonst verschwinden sie im dunklen Karton */
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]) .gscr{filter:brightness(var(--media-dim,.9))}
 :root:not([data-theme=light]) .gphone{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent),inset 0 1px 0 var(--rim),var(--shadow)}
}
:root[data-theme=dark] .gscr{filter:brightness(var(--media-dim,.9))}
:root[data-theme=dark] .gphone{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent),inset 0 1px 0 var(--rim),var(--shadow)}