@import url("/loft-live/schrift.css");
/* ================= Prosito · Gästeseite „Bühne“ (Gestaltungs-Umbau 23.10.2026) =================
   Oben die Bühne (Szene, Logo, Name der Feier), darunter Glas-Karten, durch die die Szene schimmert.
   Feste Stapelordnung – nichts Bewegtes liegt je über Text oder Dialogen:
     0 Kulisse (#llshow: Shader/Canvas/eigenes Foto)  1 Deko (#llfx)  2 Effekte vorne (#llfxv: Schnee, Lichterkette, Figuren – hinter den Karten)
     3 Inhalt (#app, Fußzeile)  40–44 kurze Momente (Finale, Konfetti, Glöckchen, „Bewegung“-Knopf)  ≥ 50 Dialoge, Hinweise  95 Startseite */

/* ---------- Schriftpaare (Schriften: schrift.css) ---------- */
:root{--f-titel:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-text:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-unter:var(--f-titel)}
:root[data-schrift=modern]{--f-titel:"Montserrat",system-ui,sans-serif}
:root[data-schrift=klassisch]{--f-titel:"Lora",Georgia,serif}
:root[data-schrift=elegant]{--f-titel:"Playfair Display",Georgia,serif;--f-text:"Montserrat",system-ui,sans-serif}
:root[data-schrift=festlich]{--f-titel:"Great Vibes","Playfair Display",cursive;--f-unter:"Playfair Display",Georgia,serif}
:root[data-schrift=klar]{--f-titel:"Josefin Sans",system-ui,sans-serif;--f-text:"Josefin Sans",system-ui,sans-serif}
body.gast{font-family:var(--f-text)}
body.gast h2,body.gast h3,body.gast .b-feier,body.gast .countdown{font-family:var(--f-unter)}
body.gast .b-titel,body.gast #splash h1{font-family:var(--f-titel)}
:root[data-schrift=modern] body.gast h2,:root[data-schrift=elegant] body.gast h2{letter-spacing:-.005em}
:root[data-schrift=klar] body.gast h2,:root[data-schrift=klar] body.gast .b-titel{letter-spacing:.01em}

/* ---------- Stapelordnung ---------- */
#llshow{z-index:0!important}
#llfx{z-index:1!important}
#llfxv{z-index:2!important}
body.gast #app{position:relative;z-index:3}
body.gast .ll-fuss{position:relative;z-index:3}
body.gast .ss-finale{z-index:40!important;mix-blend-mode:screen}
body.gast .ss-logo-blitz{z-index:41!important}
#llfxj{position:fixed;inset:0;pointer-events:none;z-index:42;overflow:hidden}
body.gast .ss-bewegung{z-index:44!important}
body.gast .dlg{z-index:50}
/* Während der Startseite ist die Seite unsichtbar (die Startseite ist deckend bzw. zeigt nur die Kulisse) */
body.splash-an #app,body.splash-an #llfxv,body.splash-an .ll-fuss,body.splash-an #ssbew{visibility:hidden}

/* ---------- Glas-Karten ---------- */
body.gast .karte{background:var(--glas,var(--k));border:1px solid var(--glasrand,var(--li));border-radius:var(--rad,16px);box-shadow:var(--schatten,none);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35)}
body.gast .knopf:not(.ja){background:var(--glas2,var(--k2));border-color:var(--glasrand,var(--li))}
body.gast .frei .knopf{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);background:var(--glas,var(--k2))}
body.gast .kachel.mini{background:var(--glas,var(--k));border-color:var(--glasrand,var(--li));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.gast .knopf{border-radius:calc(var(--rad,16px) - 4px)}
body.gast .knopf.ja{box-shadow:0 8px 24px color-mix(in srgb,var(--a) 35%,transparent)}
body.gast .opt,body.gast .chip{background:var(--glas2,var(--k2))}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){body.gast .karte{background:var(--k)}}

/* ---------- Bühne ---------- */
.buehne{position:relative;min-height:clamp(250px,50svh,520px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;gap:14px;padding:4px 4px 10px;margin:0 0 6px;
  color:var(--b-t,var(--t))}
.buehne.kurz{min-height:0;gap:8px;padding-bottom:4px}
.buehne.mittel{min-height:clamp(190px,28svh,300px);gap:10px}.buehne.mittel .b-titel{font-size:clamp(30px,9vw,44px)}
.buehne .b-oben{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.buehne .b-unten{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:520px}
.b-logo{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:36px}
.b-logo img{display:block;object-fit:contain;max-width:min(78vw,300px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.b-logo[data-g=s] img{max-height:30px;max-width:min(52vw,190px)}.b-logo[data-g=m] img{max-height:40px;max-width:min(62vw,240px)}.b-logo[data-g=l] img{max-height:60px}
.b-logo.plakette{padding:8px 14px;border-radius:12px;background:#ffffff;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 10px 30px rgba(0,0,0,.3)}
.b-logo.plakette.dunkel{background:#15161a;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.3)}
.b-logo.plakette img,.b-logo.deckend img{filter:none}
.b-logo.deckend img{border-radius:12px}
.b-ort{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--b-t2,var(--t2))}
.b-titel{hyphens:auto;-webkit-hyphens:auto;margin:0;font-size:clamp(34px,10.5vw,52px);line-height:1.04;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance}
:root[data-schrift=festlich] .b-titel{font-weight:400;font-size:clamp(46px,14vw,70px);line-height:1;letter-spacing:0}
:root[data-schrift=klassisch] .b-titel,:root[data-schrift=elegant] .b-titel{font-weight:700}
.b-feier{margin:2px 0 0;font-size:16px;line-height:1.35;color:var(--b-t2,var(--t2));text-wrap:balance;overflow-wrap:anywhere}
.b-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.b-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:700;background:var(--glas,rgba(0,0,0,.3));border:1px solid var(--glasrand,rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--t)}
.b-chip.akzent{background:var(--a);border-color:var(--a);color:var(--at)}
/* Text direkt auf der Szene: weicher Schatten, über hellen Fotos kräftiger */
.buehne .b-titel,.buehne .b-feier,.buehne .b-ort{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}
body.b-hellgrund .buehne .b-titel,body.b-hellgrund .buehne .b-feier,body.b-hellgrund .buehne .b-ort{text-shadow:0 1px 1px rgba(255,255,255,.4),0 1px 14px rgba(255,255,255,.55)}
body.b-foto .buehne{--b-t:#ffffff;--b-t2:rgba(255,255,255,.88)}
body.b-foto .buehne .b-titel,body.b-foto .buehne .b-feier,body.b-foto .buehne .b-ort{text-shadow:0 1px 3px rgba(0,0,0,.6),0 4px 26px rgba(0,0,0,.55)}
/* Schneekugel: die Kugel IST die Bühne (oben), das Logo steckt darin */
body.mit-kugel .buehne:not(.kurz){min-height:0;justify-content:flex-start}
body.mit-kugel .buehne:not(.kurz) .b-oben{height:calc(var(--kugel-h,300px) - 18px)}
body.mit-kugel .buehne.mittel .b-oben{height:calc(var(--kugel-h,300px) - 60px)}
body.mit-kugel .buehne:not(.kurz) .b-logo{visibility:hidden;height:0;min-height:0}
/* Auf Unterseiten (Anmeldung, Musik …) tritt die Kulisse zurück, damit die Karten ruhig wirken */
body.kulisse-leise #llshow{opacity:.32!important;transition:opacity .5s}
.buehne.kurz .b-ort{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:520px}

/* ---------- Begrüßung (gekürzt mit „Weiterlesen“) ---------- */
.gruss-text{white-space:pre-line;margin:0;font-size:16.5px;line-height:1.5}
.gruss-text.zu{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gruss-mehr{margin-top:8px;background:none;border:0;padding:6px 0;min-height:36px;color:var(--a2);font:inherit;font-weight:700;cursor:pointer}
.kommst h2{font-size:24px;margin-bottom:2px}
.kommst .unter{margin:0 0 12px;color:var(--t2);font-size:15px}
.kommst .wahl.zwei .knopf{min-height:54px;font-size:17px}

/* ---------- Startseite (Splash) ---------- */
#splash{z-index:95!important}
#splash .sl-logo img{max-height:var(--sl-logo,88px)!important;background:transparent!important;padding:0!important;border-radius:0!important;filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))}
#splash .sl-logo.plakette{padding:12px 18px;border-radius:16px;background:#ffffff;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 18px 50px rgba(0,0,0,.35)}
#splash .sl-logo.plakette.dunkel{background:#15161a}
#splash .sl-logo.plakette img,#splash .sl-logo.deckend img{filter:none}
#splash .sl-logo.deckend img{border-radius:14px!important}
#splash h1{font-size:clamp(30px,9vw,46px)!important;line-height:1.08;font-weight:800;text-wrap:balance;max-width:min(560px,92vw);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
#splash h1.lang{font-size:clamp(24px,6.6vw,36px)!important}#splash h1.sehrlang{font-size:clamp(21px,5.6vw,30px)!important}
:root[data-schrift=festlich] #splash h1{font-weight:400;font-size:clamp(44px,13vw,66px)!important}
/* Schreibschrift nur für kurze Titel – lange Namen in der Begleitschrift, sonst unlesbar */
:root[data-schrift=festlich] #splash h1.ohne-schreibschrift{font-family:var(--f-unter)!important;font-weight:700}
:root[data-schrift=festlich] #splash h1.ohne-schreibschrift.lang{font-size:clamp(24px,6.6vw,36px)!important}:root[data-schrift=festlich] #splash h1.ohne-schreibschrift.sehrlang{font-size:clamp(21px,5.6vw,30px)!important}
#splash .sl-zeile{letter-spacing:.14em;text-transform:uppercase;font-size:13px!important;font-weight:800}
#splash .sl-tipp{bottom:calc(40px + env(safe-area-inset-bottom))!important;opacity:.75;letter-spacing:.04em}
#splash .sl-fuss{bottom:calc(14px + env(safe-area-inset-bottom))!important}
#splash.szene{background:radial-gradient(120% 70% at 50% 45%,rgba(0,0,0,.08),rgba(0,0,0,.42))!important}
#splash.szene h1,#splash.szene .sl-zeile,#splash.szene .sl-spruch,#splash.szene .sl-tipp,#splash.szene .sl-fuss{text-shadow:0 1px 3px rgba(0,0,0,.55),0 4px 24px rgba(0,0,0,.45)}

/* ---------- „Bewegung“-Knopf: klein, unten links, unter Dialogen, blendet sich aus ---------- */
body.gast .ss-bewegung{top:auto!important;right:auto!important;left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));width:40px;height:40px;padding:0!important;justify-content:center;font-size:17px!important;opacity:.9;transition:opacity .6s;overflow:hidden}
body.gast .ss-bewegung .ss-bew-t,body.gast .ss-bewegung .ss-bew-x{display:none}
body.gast .ss-bewegung.weg{opacity:0;pointer-events:none}

/* ---------- Finale: Logo auf leuchtender Plakette ---------- */
.ss-logo-blitz.plakette{background:#ffffff;border-radius:22px;padding:18px 26px;box-sizing:content-box;width:min(58vw,300px)!important;max-height:26vh!important;
  box-shadow:0 0 0 2px rgba(255,214,120,.9),0 0 46px 12px rgba(255,200,100,.55),0 0 140px 40px rgba(255,180,80,.3);filter:none!important}
.ss-logo-blitz.plakette.dunkel{background:#15161a}

/* ---------- Effekte am Rand ---------- */
body.fx-mit-lichtern.gast .wrap{padding-top:calc(34px + env(safe-area-inset-top))!important}

/* ---------- Vorschau im iPhone-Rahmen ---------- */
body.vorschau .vorschau-marke{top:auto!important;bottom:6px!important;right:50%!important;transform:translateX(50%);opacity:.85;font-size:10px!important;z-index:96!important}
/* Kleine Handys (SE, 320 × 568): Bühne kompakter, damit „Ich komme“ ohne Scrollen sichtbar ist */
@media (max-height:700px){.buehne{min-height:clamp(210px,42svh,380px);gap:8px}.buehne:not(.kurz) .b-chips{display:none}.kommst .unter{display:none}
  .b-titel{font-size:clamp(30px,9vw,40px)}:root[data-schrift=festlich] .b-titel{font-size:clamp(40px,12vw,54px)}.b-feier{font-size:15px}.kommst h2{font-size:21px}body.gast .karte.kommst{padding:14px 16px}}
@media (prefers-reduced-motion: reduce){.gruss-mehr{transition:none}}