/* Grußkarten (Invilu): gemeinsamer Rahmen für tiefe.css und kreis.css. Ein Bildschirm ohne Scrollen, Bühne 9:16.
   Oben der Glückwunsch, unten Teilen, Sprachen, Invilu, Rechtliches und KI-Hinweis auf weichem Verlauf.
   Übernommen aus design/html/assets/diwali-tiefe und diwali-gruss-kreis. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@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+0020,U+0A00-0A7F,U+200C-200D,U+25CC}
:root{--serif:"Cormorant Garamond",Georgia,serif;--gur:"Mukta Mahee","Gurmukhi MN",sans-serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#14123A;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:#F7ECD6}
:focus-visible{outline:2px solid #F3D896;outline-offset:3px}
/* Manche Web-Ansichten in Apps melden keinen Abstand, obwohl Notch oder Kamera über der Seite liegen: am Handy gilt ein Mindestabstand */
.k{--safe-top:env(safe-area-inset-top)}
@media (pointer:coarse) and (orientation:portrait){.k{--safe-top:max(env(safe-area-inset-top),44px)}}
.k{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;justify-content:center;background:#0a0921}
/* Bühne 9:16, schmal = seitlich beschnitten, Desktop mittig */
.bild-box{position:relative;height:100%;width:min(100vw,calc(100dvh*9/16));overflow:hidden}

/* Text-Ebene; ohne Skript stehen Kopf und Fuß direkt im main */
.ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.ui button,.ui a{pointer-events:auto}
.v-oben{position:absolute;left:0;right:0;top:0;height:40%}
.v-unten{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(5,8,28,.94) 0,rgba(5,8,28,.86) 50%,rgba(5,8,28,0) 100%)}
.kopf{position:absolute;left:0;right:0;top:0;padding:calc(var(--safe-top) + 2.6dvh) 18px 0;text-align:center;color:var(--ph,#FFF4DC);text-shadow:0 1px 14px rgba(4,8,30,.55)}
h1{font:500 clamp(30px,5dvh,48px)/1.08 var(--serif);text-wrap:balance;margin:0 auto;max-width:16em}
h1:lang(pa){font-family:var(--gur);font-weight:400;font-size:clamp(26px,4.1dvh,40px);line-height:1.4}
.zeile{font:italic 500 clamp(18px,2.7dvh,24px)/1.25 var(--serif);color:var(--pv,#E3D8C2);margin-top:.6dvh;text-wrap:balance}
.zeile:lang(pa){font-family:var(--gur);font-style:normal;font-weight:400;font-size:clamp(17px,2.4dvh,22px);line-height:1.5}
.unten{position:absolute;left:0;right:0;bottom:0;padding:0 12px calc(env(safe-area-inset-bottom) + 8px);display:flex;flex-direction:column;align-items:center;text-align:center}
.zeile:empty{display:none}
/* No visible headline on the cards (Gagandeep 07.11.2026): the title stays for screen readers and search only. */
.kopf h1{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.teilen{min-height:46px;padding:0 20px;border:1.5px solid var(--pk,#EBC571);border-radius:3px;background:var(--pb,rgba(10,12,40,.55));color:var(--ph,#FFF4DC);font:600 16px/1 var(--sans);letter-spacing:.03em;cursor:pointer}
.musik{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 14px;border:1px solid rgba(235,197,113,.45);border-radius:3px;background:none;color:#E3D8C2;font:600 14px/1 var(--sans);cursor:pointer}
.musik svg{width:16px;height:16px;flex:none}
.musik[aria-pressed="true"]{border-color:var(--pk,#EBC571);background:var(--pb,rgba(10,12,40,.55));color:var(--ph,#FFF4DC);box-shadow:inset 0 0 0 1px var(--pk,#EBC571)}
.teilen:active,.musik:active{transform:scale(.97)}
.status{font:500 13px/1.2 var(--sans);color:#E3D8C2;margin-bottom:4px}
.status:empty{display:none}
.lg{display:contents}
.sprachen,.leiste{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.sprachen{margin-top:4px}
.sprachen a,.leiste a,.leiste button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;padding:0 8px;border:0;background:none;color:#E3D8C2;font:600 13px/1 var(--sans);letter-spacing:.02em;text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent;cursor:pointer;white-space:nowrap}
.sprachen a{font-size:14px;min-height:42px}
.sprachen a:lang(pa){font-family:var(--gur);font-weight:400;font-size:16px}
.sprachen a[aria-current]{color:var(--ph,#FFF4DC);text-decoration-color:var(--pk,#EBC571);text-decoration-thickness:2px}
.sprachen a:hover,.leiste a:hover,.leiste button:hover{text-decoration-color:currentColor}
.leiste a,.leiste button{min-height:32px;font-weight:500;font-size:12px;color:#CFC4AE}
.leiste .marke{gap:6px;font:500 17px/1 var(--serif);color:#F7ECD6}
.leiste .marke svg{width:17px;height:17px;fill:currentColor;flex:none}
.leiste .pause{font-size:11px}
.kanaele{display:inline-flex;gap:2px}
.leiste .kanal{padding:0 6px;min-width:36px}
.leiste .kanal svg{width:18px;height:18px;display:block}
.ki{font:500 11px/1.3 var(--sans);color:#B8AD98}

/* Im Handy der Website (iframe): nur Bild und Gruß */
.im-handy .unten{display:none}
.im-handy .kopf{padding-top:9.5dvh!important}
/* Handy quer: Die Karte ist schmal, die Knöpfe stehen rechts daneben statt über dem Gruß */
@media (orientation:landscape) and (max-height:500px){
 .unten{position:fixed;left:auto;right:max(env(safe-area-inset-right),12px);bottom:max(env(safe-area-inset-bottom),8px);width:min(30vw,260px);padding:0}
 .im-handy .unten{display:none}
}
/* Seitenwechsel wie auf den Website-Seiten */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Festgruß über dem Kartentitel, langer Kartentext etwas kleiner */
/* The greeting is the visible headline of the card (Gagandeep 07.11.2026). */
.fest{font:500 clamp(28px,4.6dvh,44px)/1.08 var(--serif);text-wrap:balance;color:var(--pk,#FFD27A);margin:0 auto 1dvh;max-width:14em}
.fest:lang(pa){font-family:var(--gur);font-weight:400;font-size:clamp(25px,4dvh,38px);line-height:1.35}
/* Lange Zeilen behalten dieselbe Größe wie alle anderen Karten (Gagandeep 07.11.2026), nur schmaler gesetzt. */
.zeile.lang-text{max-width:30em;margin-left:auto;margin-right:auto}
/* Scroll-Hinweis der Karten, deren Kamera beim Scrollen fährt (tunnel, kandeel); Deckkraft setzt das Modul */
.hinweis{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#E9D9B3;opacity:0;pointer-events:none}
.hinweis:lang(pa){font-family:var(--gur);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none}
.hinweis::after{content:"";display:block;width:9px;height:9px;border-right:2px solid #F3D896;border-bottom:2px solid #F3D896;transform:rotate(45deg);animation:wippen 1.8s ease-in-out infinite}
@keyframes wippen{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.hinweis::after{animation:none}}
/* Wish panel like in the reels (Gagandeep 07.11.2026): first the picture, then the greeting at the top, then the card line on a calm panel.
   TIEFE times both to its start animation (.gruss-js); the other modules use the delays below. Reduced motion: both simply stand. */
.mit-wunsch .zeile{display:none}
/* Greeting and panel a little closer to the middle (Gagandeep 07.11.2026) */
.mit-wunsch .kopf{padding-top:calc(var(--safe-top) + 7dvh)}
.mit-wunsch .wunsch{margin-bottom:7dvh}
@keyframes grussEin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mit-wunsch:not(.gruss-js) .kopf{animation:grussEin 1.5s cubic-bezier(.2,.7,.2,1) var(--gruss-t,2.4s) both}
.mit-wunsch:not(.gruss-js) .wunsch{animation:grussEin 1.5s cubic-bezier(.2,.7,.2,1) var(--wunsch-t,4s) both}
@media (prefers-reduced-motion:reduce){.mit-wunsch .kopf,.mit-wunsch .wunsch{animation:none}}
/* Scroll-Karten (Tunnel, Kandeel): Gruß und Tafel erst am Ende des Scrollens (.am-ende setzt die Engine), umkehrbar;
   der Hinweis steht mit Abstand über „Teilen“, damit der wippende Pfeil den Knopf nicht berührt (Gagandeep 08.11.2026). */
.scroll-karte.mit-wunsch .kopf,.scroll-karte.mit-wunsch .wunsch{animation:none;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.scroll-karte.am-ende .kopf,.scroll-karte.am-ende .wunsch{opacity:1;transform:none}
.scroll-karte.am-ende .wunsch{transition-delay:.6s}
.scroll-karte .hinweis{margin-bottom:max(24px,3.2dvh)}
@media (prefers-reduced-motion:reduce){.scroll-karte.mit-wunsch .kopf,.scroll-karte.mit-wunsch .wunsch{opacity:1;transform:none;transition:none}}
.wunsch{max-width:min(24em,90%);margin:0 auto 1.8dvh;padding:1.2dvh 18px;border:1px solid rgba(235,197,113,.42);border-radius:10px;background:var(--pb,rgba(10,12,40,.62));color:var(--ph,#FFF4DC);font:italic 500 clamp(17px,2.4dvh,21px)/1.38 var(--serif);text-wrap:balance;box-shadow:0 8px 30px rgba(4,8,30,.38)}
.wunsch:lang(pa){font-family:var(--gur);font-style:normal;font-weight:400;font-size:clamp(16px,2.2dvh,20px);line-height:1.6}
/* In the phones of the website the panel shows too, without the controls below it */
.im-handy .mit-wunsch .unten{display:flex;padding-bottom:5dvh}
.im-handy .mit-wunsch .unten>:not(.wunsch){display:none}
.im-handy .wunsch,.im-handy .wunsch:lang(pa){font-size:clamp(11px,2.4dvh,16px);padding:1dvh 10px;max-width:92%}

/* Startbild vor der Karte (karte.js): schwarzer Grund, nur „Klick mich“, unten Invilu-Zeichen und Name; kein Gruß
   (Gagandeep 08.11.2026). Ein Klick öffnet Karte und Musik, die Karte kommt aus dem Dunkel ihres Intros. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:block;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
html.zu{overflow:hidden}
html.zu,html.zu body{background:#000}
.tor{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;padding:0 24px;background:#000;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .7s ease,visibility 0s linear .7s}
.tor-tipp{-webkit-appearance:none;appearance:none;position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:14px;min-height:64px;padding:10px 28px;border:0;background:none;color:#F4E9D2;font:italic 500 clamp(28px,4.2dvh,36px)/1 var(--serif);letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tor-tipp:lang(pa){font:400 clamp(22px,3.2dvh,28px)/1.2 var(--gur)}
/* feine Goldlinie unter dem Wort, atmet langsam */
.tor-tipp::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,rgba(214,176,98,0),#D6B062 50%,rgba(214,176,98,0));animation:tor-atem 3.2s ease-in-out infinite;transition:width .35s ease}
@keyframes tor-atem{0%,100%{opacity:.45}50%{opacity:1}}
.tor:hover .tor-tipp::after,.tor-tipp:focus-visible::after{width:104px;opacity:1}
.tor-tipp:focus-visible{outline:none}
.tor-marke{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 4.5dvh);display:flex;justify-content:center;align-items:center;gap:8px;font:500 17px/1 var(--serif);letter-spacing:.04em;color:#B99A62}
.tor-marke svg{width:17px;height:17px;fill:currentColor;flex:none}
.tor.auf{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.tor{transition:none}.tor-tipp::after{animation:none;opacity:.8}}