/* Digitaler Krathong /<l>/krathong/ (Idee 268, W4-6) – nur diese Seite. Nachtszene = bewusste Ausnahme vom hellen Look (Lichterfest): leuchtend, nie matschig.
   Handy: Leinwand oben (Kopftext + Wasser), Formular-Karte darunter (Glas, überlappt 28 px). Desktop (≥ 900 × 600): Leinwand über die ganze Bühne,
   Kopf + Karte in der Textspalte (RTL rechts), der Krathong schwimmt auf der anderen Seite. Ohne JS: Verlauf statt Leinwand, Hinweis im Formular. */
.is-krathong{--lk-pane:linear-gradient(160deg,rgba(18,24,58,.82),rgba(7,10,28,.9));--lk-rim:rgba(243,220,170,.5)}
.lkp{position:relative;isolation:isolate;background:var(--bg);overflow:hidden}
.lkp-top{position:relative}
.lkp-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.lkp-scene::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:linear-gradient(rgba(7,9,13,0),var(--bg));pointer-events:none}
.lkp-sky{position:absolute;inset:0;background:radial-gradient(60% 18% at 60% 60%,rgba(255,170,110,.32),transparent 70%),radial-gradient(circle at 84% 16%,rgba(255,244,222,.5) 0 18px,rgba(255,232,200,.12) 19px 70px,transparent 120px),linear-gradient(#03071a 0,#0a1238 22%,#1f1c52 44%,#3b2457 54%,#6e3552 59%,#3a2350 60%,#0e1534 75%,#030612 100%)}
.lkp-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease)}
.lkp-cv.on{opacity:1}
.lkp-head{position:relative;z-index:1;padding-top:92px;padding-bottom:6px;text-shadow:0 2px 18px rgba(3,5,20,.85)}
.lkp-bc{margin-bottom:.6rem}
.lkp-k{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;color:var(--gold2)}
.lkp-k svg{width:1.2em;height:1.2em;color:var(--lk-flame,#ffd27a);filter:drop-shadow(0 0 6px rgba(255,190,90,.7))}
.lkp-h1{margin:0 0 .6rem;max-width:15ch;font-size:clamp(2rem,6.4vw,3.6rem);text-wrap:balance}
.lkp-lead{margin:0 0 .9rem;max-width:34rem;color:#e6e0f2;font-size:clamp(1rem,1.4vw,1.15rem)}
.lkp-date{display:inline-flex;align-items:center;gap:.55rem;margin:0;padding:.45rem .85rem .45rem .7rem;border-radius:999px;border:1px solid rgba(243,220,170,.32);background:rgba(8,10,30,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f6ead2;font-size:.88rem;font-weight:700;text-shadow:none}
.lkp-date svg{color:#f3dcaa}
.lkp-view{position:relative;z-index:1;height:max(300px,38svh);pointer-events:none}
.lkp-snd{position:absolute;z-index:3;bottom:46px;inset-inline-end:var(--gut);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,220,170,.35);background:rgba(8,10,30,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f3dcaa;cursor:pointer;transition:background .2s,border-color .2s}
.lkp-snd:hover{border-color:var(--gold)}
.lkp-snd svg{width:20px;height:20px}
.lkp-snd .lkp-sx{display:none}.lkp-snd.off .lkp-sx{display:inline}.lkp-snd.off .lkp-sw{display:none}.lkp-snd.off{color:var(--muted)}
.lkp-panel{position:relative;z-index:2;margin-top:-28px;padding-bottom:clamp(2rem,6vw,3.5rem)}
.lkp-pin{max-width:520px;margin-inline:auto}
.lkp-card{position:relative;padding:20px 18px 22px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:var(--lk-pane);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.lkp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--lk-rim),rgba(214,178,112,0) 34%,rgba(214,178,112,0) 66%,rgba(214,178,112,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lkp-fs{border:0;margin:0 0 14px;padding:0;min-width:0}
.lkp-fs:last-of-type{margin-bottom:0}
.lkp-lg{display:flex;align-items:center;gap:.6rem;padding:0;margin:0 0 .75rem;font-weight:800;font-size:1.02rem;color:var(--text)}
.lkp-lg b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold) 60%,var(--gold-d));color:#16120a;font-size:.85rem}
.lkp-ds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lkp-d{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 4px 9px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .2s,background .2s,transform .25s var(--ease)}
.lkp-d input{position:absolute;opacity:0;pointer-events:none}
.lkp-d img{width:100%;max-width:120px;height:auto;aspect-ratio:300/280;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));transition:transform .35s var(--ease)}
.lkp-d span{font-size:.78rem;font-weight:700;color:#d9d3c8;text-align:center;line-height:1.2}
.lkp-d:hover{border-color:rgba(243,220,170,.4)}
.lkp-d:has(input:checked){border-color:var(--gold);background:radial-gradient(90% 70% at 50% 40%,rgba(255,200,110,.16),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(214,178,112,.35),0 10px 30px -14px rgba(255,180,80,.55)}
.lkp-d:has(input:checked) img{transform:translateY(-3px) scale(1.04)}
.lkp-d:has(input:checked) span{color:var(--gold2)}
.lkp-d:has(input:focus-visible){outline:2px solid var(--gold2);outline-offset:2px}
.lkp-f{display:grid;gap:.35rem;margin-bottom:.75rem}
.lkp-f > span{font-size:.86rem;font-weight:700;color:#cfc8bb}
.lkp-in{position:relative;display:flex;border:1px solid var(--line2);border-radius:14px;background:rgba(0,0,0,.32);transition:border-color .2s,box-shadow .2s}
.lkp-in:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,178,112,.18)}
.lkp-in textarea,.lkp-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:500 16px/1.45 var(--ff);padding:12px 14px;resize:none;outline:0}
.lkp-in textarea{min-height:66px;padding-inline-end:52px}
.lkp-in input{min-height:48px}
.lkp-in ::placeholder{color:rgba(217,211,200,.45)}
.lkp-cnt{position:absolute;inset-inline-end:10px;bottom:8px;font-style:normal;font-size:12px;font-weight:700;color:rgba(217,211,200,.55);font-variant-numeric:tabular-nums;direction:ltr}
.lkp-priv{display:flex;gap:.5rem;align-items:flex-start;margin:.75rem 0 0;font-size:.82rem;color:#b7b0a4}
.lkp-priv svg{flex:none;margin-top:.15em;color:var(--gold)}
.lkp-row{display:grid;gap:12px}
.lkp-row .lkp-f{margin:0}
.lkp-go{width:100%;justify-content:center;min-height:54px;font-size:1.02rem}
.lkp-go svg{width:1.35em;height:1.35em}
.lkp-ns{margin:.8rem 0 0;color:var(--gold2);font-weight:700}
.lkp-done{text-align:start;animation:lkIn .6s var(--ease)}
.lkp-dh{margin:0 0 .4rem;outline:0}
.lkp-dp{margin:0 0 .9rem;color:#d9d3c8}
.lkp-chk{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:.9rem;font-weight:600;cursor:pointer}
.lkp-chk input{width:20px;height:20px;accent-color:var(--gold)}
.lkp-chk[hidden]{display:none}
.lkp-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lkp-acts .btn{justify-content:center;min-height:50px;white-space:normal;text-align:center;line-height:1.2}
.lkp-acts .btn[aria-busy=true]{opacity:.7;cursor:progress}
.lkp-again{display:inline-flex;align-items:center;gap:.45rem;margin:1rem auto 0;padding:.6rem .4rem;border:0;background:none;color:var(--gold2);font-weight:700;font-size:.92rem;cursor:pointer}
.lkp-again:hover span{text-decoration:underline}
.lkp-msg{margin:.4rem 0 0;font-size:.85rem;color:#f0b35a}.lkp-msg:empty{display:none}
.lk-floating .lkp-panel .lkp-card{opacity:.35;transition:opacity .5s}
/* Info + Hinweis */
.lkp-info{padding-top:clamp(2rem,5vw,3.5rem)}
.lkp-ig{display:grid;gap:14px}
.lkp-ic{padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.lkp-ic h2{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:1.15rem}
.lkp-ic h2 svg{color:var(--gold);width:1.3em;height:1.3em}
.lkp-ic p{margin:0;color:#cfc8bb;font-size:.95rem}
.lkp-cta{padding-top:0}
.lkp-cc{display:grid;gap:18px;padding:24px;border:1px solid rgba(214,178,112,.25);border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,rgba(214,178,112,.12),transparent 55%),linear-gradient(160deg,rgba(18,22,40,.9),rgba(9,11,20,.95))}
.lkp-ct h2{margin:0 0 .5rem}
.lkp-ct p{margin:0 0 .6rem;color:#d9d3c8}
.lkp-ct b{color:var(--gold2)}
.lkp-pay{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:#a9a397!important}
.lkp-pay svg{flex:none;margin-top:.15em;color:var(--gold)}
.lkp-pay a{text-decoration:underline;text-underline-offset:2px}
.lkp-ca{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lkp-more{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--gold2);font-weight:700}
[dir=rtl] .lkp-more svg,[dir=rtl] .lkp-again svg{transform:scaleX(-1)}
.lkp-dlg img{box-shadow:0 30px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(214,178,112,.35),0 0 60px -10px rgba(255,190,90,.35)}
@keyframes lkIn{from{opacity:0;transform:translateY(12px)}}
@media (min-width:700px){.lkp-ig{grid-template-columns:repeat(3,1fr)}.lkp-cc{grid-template-columns:1.6fr 1fr;align-items:center;padding:30px 34px}.lkp-ca{justify-content:flex-end}}
/* Desktop: Leinwand über die ganze Bühne, Textspalte links (RTL rechts) */
@media (min-width:900px) and (min-height:600px){
  .lkp{min-height:min(980px,max(760px,100svh));display:flex;flex-direction:column;justify-content:flex-start;padding:max(96px,calc((100svh - 830px) / 2 + 60px)) 0 44px}
  .lkp-top{position:static}
  .lkp-head{padding-top:0}
  .lkp-head > *,.lkp-panel .lkp-pin{max-width:460px}
  .lkp-head > .lkp-date{max-width:none}
  .lkp-view{display:none}
  .lkp-snd{bottom:34px}
  .lkp-panel{width:100%;margin-top:22px;padding-bottom:0}
  .lkp-row{grid-template-columns:1fr auto;align-items:end}
  .lkp-row .lkp-go{width:auto;padding-inline:1.5rem}
  .lkp-pin{margin-inline:0}
  .lkp-h1{font-size:clamp(2.4rem,3.6vw,3.5rem)}
}
@media (max-width:420px){.lkp-ds{gap:6px}.lkp-d{padding:5px 2px 8px;border-radius:14px}.lkp-d span{font-size:.75rem}.lkp-card{padding:18px 14px 20px}.lkp-acts{grid-template-columns:1fr}}
/* Handy quer: niedrige Bühne, Wasser bleibt sichtbar */
@media (max-height:520px) and (orientation:landscape){.lkp-head{padding-top:66px}.lkp-bc,.lkp-lead{display:none}.lkp-k{margin-bottom:.35rem}.lkp-h1{font-size:1.8rem;max-width:none;margin-bottom:.4rem}.lkp-date{font-size:.8rem;padding:.35rem .75rem .35rem .6rem}.lkp-view{height:max(190px,48svh)}}
@media (prefers-reduced-motion:reduce){.lkp-cv{transition:none}.lkp-done{animation:none}.lkp-d,.lkp-d img{transition:none}}
@media print{.lkp-scene,.lkp-snd{display:none}}