/* Grußseite: was zu den Styles der Landingpage (public/site, aus apps/landing) dazukommt: Schriften für Hindi und
   Punjabi, Sprachen im Kopf, Karussell mit Karten im Hochformat, Karten in den Handys, Szenen für Grüße, Kalender. Nur hell. */
@font-face{font-family:"Mukta Mahee";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/mukta-mahee-400-gurmukhi.woff2) format("woff2");unicode-range:U+0A00-0A7F,U+200C-200D,U+25CC}
:root{color-scheme:light;--serif:"Cormorant Garamond","Mukta Mahee",Georgia,serif}
body{overflow-x:clip}
/* Devanagari und Gurmukhi: mehr Zeilenabstand für Vokalzeichen, keine Sperrung (sie trennt die Kopflinie) */
:lang(pa) :is(.h1,.h2,h3,.g-t,.occ b,.faq summary,.ga-name,.karte .titel){font-weight:400;line-height:1.4;letter-spacing:0}
:lang(pa) .h1{font-size:clamp(34px,4.6vw,54px)}
:lang(pa) .h2{font-size:clamp(28px,3.6vw,40px)}
:lang(pa) .eyebrow{letter-spacing:.02em;font-size:14px}
.g-logo svg{width:22px;height:22px;fill:currentColor;flex:none}
.g-logo{display:inline-flex;align-items:center;gap:8px}

/* Am Handy bleibt im Kopf Platz für Marke, Sprachen und Menü; den Knopf tragen Aktionsleiste und Menü */
@media (max-width:699px){.g-head .wrap>.btn{display:none}}
/* Lange Wörter (Hochzeitseinladung, Geburtstagseinladung) und die Gruppen-Tabelle dürfen die Seite am Handy nicht verbreitern */
.h1,.h2{hyphens:auto;overflow-wrap:break-word}
@media (max-width:899px){.hero-in,.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.hero .h1{font-size:clamp(34px,10.5vw,46px)}}
@media (max-width:699px){
 .groups-card{padding:4px 12px}
 .groups th,.groups td{padding:12px 3px}
 .groups thead th{font-size:10px;letter-spacing:.03em;overflow-wrap:anywhere}
 .groups tbody th{font-size:18px;hyphens:auto;overflow-wrap:anywhere}
}
.g-foot a{padding:2px 0}
/* Der Tinten-Effekt teilt Wörter in Einzelzeichen; das zerreißt Devanagari und Gurmukhi und läuft über den Rand */
:lang(pa) .m-aw .m-ink{display:none}
/* Devanagari und Gurmukhi haben keine Kursive; der Browser würde die Zeichen nur schräg stellen. Das betonte Wort bleibt aufrecht, Gold und Federschwung tragen die Betonung */
:lang(pa) :is(.h1,.h2,.hero .h1) em{font-style:normal}
/* Großer Titel: Platz für Vokalzeichen, aber die zwei Zeilen bleiben ein Block */
:lang(pa) .hero .h1{line-height:1.28}

/* Sprachen: im Kopf kurz, im Fuß ausgeschrieben */
.g-langs{display:flex;align-items:center;gap:2px;margin-right:8px}
.g-langs a{display:grid;place-items:center;min-width:32px;min-height:32px;border-radius:99px;font-size:13px;color:var(--muted);text-decoration:none}
.g-langs a[aria-current]{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.g-langs a:lang(pa){font-family:"Mukta Mahee",var(--sans)}
.g-foot-langs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.g-foot-langs a{color:var(--muted);text-decoration:none}
.g-foot-langs a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px}
.g-foot-occ b a{color:inherit;text-decoration:none}

/* Countdown zum nächsten Fest */
.countdown{display:inline-flex;align-items:center;margin:0;padding:6px 14px;border-radius:999px;background:var(--mark,#FBE3C8);font:600 14px/1.4 var(--sans)}
.countdown[hidden]{display:none}

/* Karussell: Karten im Hochformat */
.ga-poster{aspect-ratio:9/16;overflow:hidden;position:relative}
.ga-poster img{width:100%;height:100%;object-fit:cover}
.ga-item[hidden]{display:none}
.more{margin-top:32px}

/* Karten in den Handys */
.gscr iframe{position:absolute;border:0;pointer-events:none}
/* Die Bildschirme sind Bruchteile von Pixeln breit, das iframe rundet: etwas größer und dunkler Grund, sonst bleibt ein heller Streifen */
.hero .ph .scr:has(iframe),.gscr:has(iframe){background:#0a0921}
.hero .ph iframe,.gscr iframe{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}
.scr-musik .noten{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:30cqw;height:30cqw;border-radius:50%;background:rgb(255 253 249/.92);color:#2A221C;box-shadow:0 6px 18px rgb(0 0 0/.3)}
.scr-musik svg{width:50%;height:50%}
.scr-musik i{position:absolute;inset:0;border-radius:50%;border:2px solid rgb(255 253 249/.8);opacity:0}
@keyframes musik-welle{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.vis .scr-musik i{animation:musik-welle 2.4s ease-out infinite}
.vis .scr-musik i+i{animation-delay:1.2s}

/* Szenen der Schritte für Grüße */
.st-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;align-items:center;height:100%;padding:0 6%}
.st-pick img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:.4em;opacity:.65}
.st-pick img.on{opacity:1;outline:2px solid var(--acc);outline-offset:2px;transform:scale(1.08)}
.st-lang{display:grid;align-content:center;gap:.45em;height:100%;padding:0 10%}
.st-lang span{padding:.45em .8em;border:1px solid var(--line);border-radius:.5em;background:var(--bg)}
.st-lang .on{border-color:var(--ink);background:var(--ink);color:var(--on-ink);font-weight:600}
.st-lang :lang(pa){font-family:"Mukta Mahee",var(--sans)}
img.st-th{object-fit:cover}
.st-mo .st-scr:is(.pre,.run) .st-pick .on{animation:st-pop .5s var(--_spring,ease) .3s both}
.st-mo .st-scr:is(.pre,.run) .st-lang .on{animation:st-press .4s ease .5s both}

/* Die Idee und die Punkte der Anlass-Seiten: vier Punkte, je mit kurzem Goldstrich */
.idee{display:grid;gap:28px 48px;margin:40px 0 0;padding:0;list-style:none}
@media (min-width:700px){.idee{grid-template-columns:repeat(2,minmax(0,1fr))}}
.idee li::before{content:"";display:block;width:28px;height:2px;margin-bottom:14px;background:var(--acc)}
.idee h3{margin:0 0 6px;font:500 26px/1.2 var(--serif)}
.idee p{margin:0;color:var(--muted);max-width:30em}

/* Festkalender */
.kalender ol{margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);max-width:640px}
.kalender li{display:grid;grid-template-columns:7em 1fr;gap:8px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.kalender .monat{font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:lang(pa) .kalender .monat{font-size:14px;letter-spacing:0}

/* Seiten je Fest */
.fest-kopf{padding-bottom:16px}
.fest-kopf .wrap{display:grid;gap:18px;justify-items:start}
.fest-kopf .h1,.fest-kopf .lead{margin:0}
.fest-karten{padding-top:24px;border-top:0!important}
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (min-width:1000px){.karten{grid-template-columns:repeat(5,minmax(0,1fr))}}
.karte{display:block;text-decoration:none}
.karte .bild{display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#14123A;box-shadow:0 12px 28px -16px rgb(42 34 28/.35);transition:transform .25s ease}
.karte img{display:block;width:100%;height:100%;object-fit:cover}
.karte:hover .bild{transform:translateY(-3px)}
.karte .titel{display:block;margin-top:10px;font:500 18px/1.25 var(--serif)}
@media (prefers-reduced-motion:reduce){.karte .bild{transition:none}.karte:hover .bild{transform:none}}
.g-menu-opts.g-foot-langs{justify-content:center;gap:6px 20px}
.lg{display:contents}
.ga-more-l{font:500 15px/1.4 var(--sans);color:var(--muted)}