/* ═══════════ „Geschenkchen" — Stile (v2.3) ═══════════ */
:root{
  --gold-1:#fff3c4; --gold-2:#f7c948; --gold-3:#e0a017; --gold-4:#8a5a00;
  --violet-1:#a78bfa; --violet-2:#8b5cf6; --violet-3:#6d28d9; --violet-4:#4c1d95;
  --green-1:#4ade80; --green-2:#16a34a; --green-3:#14532d;
  --ink:#2a2140; --muted:#6f6390;
  --shadow-lg:0 18px 50px rgba(15,10,50,.45);
}
*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Rubik','Segoe UI',system-ui,-apple-system,sans-serif;
  color:#fff; min-height:100vh;
  background:
    radial-gradient(900px 520px at 85% -5%, rgba(139,92,246,.42), transparent 60%),
    radial-gradient(760px 540px at -10% 42%, rgba(52,211,153,.28), transparent 62%),
    linear-gradient(145deg,#067a4f 0%,#0c8f74 30%,#1668b8 65%,#1e3a8a 100%);
  background-attachment:fixed;
}
body.locked{ overflow:hidden; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px; }
::selection{ background:var(--violet-2); color:#fff; }

.snow{ position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.flake{ position:absolute; top:-8vh; animation:fall linear infinite; text-shadow:0 0 8px rgba(255,255,255,.6); }
@keyframes fall{ to{ transform:translateY(115vh) rotate(300deg); } }

.curtain{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:16px 26px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 26px, rgba(0,0,0,.10) 26px 52px),
    linear-gradient(180deg,#8b5cf6 0%,#6d28d9 55%,#4c1d95 100%);
  box-shadow:0 12px 34px rgba(20,5,60,.45);
}
.curtain::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#b8860b,#ffe9a3,#f7c948,#ffe9a3,#b8860b);
}
.curtain::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:15px; pointer-events:none;
  background-image:radial-gradient(circle at 13px -4px, #f7c948 12px, rgba(0,0,0,0) 13px);
  background-size:26px 15px; background-repeat:repeat-x;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
.logo{ display:flex; align-items:center; gap:9px; justify-self:start; text-decoration:none; color:#fff;
  font-family:'Unbounded','Rubik',sans-serif; font-weight:700; font-size:19px; letter-spacing:.4px; }
.gift{ font-size:32px; display:inline-block; filter:drop-shadow(0 5px 10px rgba(0,0,0,.35)); transition:transform .3s; }
.logo:hover .gift{ transform:rotate(-14deg) scale(1.12); }
.gift.boing{ animation:boing .7s; }
@keyframes boing{ 0%{transform:scale(1);} 30%{transform:scale(1.35) rotate(-16deg);} 60%{transform:scale(.92) rotate(8deg);} 100%{transform:scale(1);} }
.logo-flake{ font-size:13px; opacity:.85; animation:twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.4; transform:scale(.9);} 50%{opacity:1; transform:scale(1.15);} }

.gold-btn{
  justify-self:center; white-space:nowrap;
  font-family:'Unbounded','Rubik',sans-serif; font-weight:700; font-size:clamp(14px,1.7vw,19px);
  color:#5c3a00; letter-spacing:.3px;
  background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);
  border:2px solid #a06e00; border-radius:999px; padding:15px 34px;
  box-shadow:0 6px 0 var(--gold-4), 0 14px 30px rgba(240,190,60,.4);
  transition:transform .18s, box-shadow .18s;
  animation:goldPulse 2.6s ease-in-out infinite;
}
.gold-btn:hover{ transform:translateY(-2px) scale(1.03); }
.gold-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--gold-4), 0 8px 18px rgba(240,190,60,.35); }
@keyframes goldPulse{
  0%,100%{ box-shadow:0 6px 0 var(--gold-4), 0 14px 30px rgba(240,190,60,.4), 0 0 0 0 rgba(247,201,72,.55); }
  50%{ box-shadow:0 6px 0 var(--gold-4), 0 14px 30px rgba(240,190,60,.4), 0 0 0 16px rgba(247,201,72,0); }
}

.auth-zone{ justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.green-btn{
  background:linear-gradient(180deg,#5eead4,#22c55e 40%,#15803d); color:#fff; font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 0 var(--green-3), 0 10px 22px rgba(20,160,90,.4);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.green-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.green-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--green-3); }
.link-btn{ background:none; color:#e9d9ff; font-size:12.5px; text-decoration:underline dotted; text-underline-offset:3px; transition:color .15s; }
.link-btn:hover{ color:#fff; }

.user-zone{ justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.user-zone .hello{ font-size:14px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:8px 15px; border-radius:999px; }

main{ position:relative; z-index:2; max-width:1440px; margin:0 auto; padding:30px 26px 10px; }
.hero{ text-align:center; padding:26px 10px 8px; }
.hero h1{ font-family:'Unbounded','Rubik',sans-serif; font-weight:700; font-size:clamp(24px,3.6vw,44px); line-height:1.18; text-shadow:0 4px 20px rgba(0,0,0,.3); }
.gold-text{ background:linear-gradient(180deg,#ffeaa7,#f7c948 60%,#e0a017); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub{ margin:16px auto 0; max-width:680px; color:rgba(255,255,255,.92); font-size:clamp(14px,1.6vw,17px); line-height:1.6; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.chip{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:8px 16px; border-radius:999px; font-size:13.5px; }

.wishes-section{ margin-top:46px; }
.section-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.section-head h2{ font-family:'Unbounded','Rubik',sans-serif; font-size:clamp(20px,2.4vw,28px); }
.section-note{ color:rgba(255,255,255,.75); font-size:13.5px; }

.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:1150px){ .grid{ grid-template-columns:repeat(5,1fr); gap:18px; } }

.tile{
  background:#fff; color:var(--ink); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(22px);
  box-shadow:0 8px 22px rgba(12,20,60,.28);
  transition:transform .28s ease, box-shadow .28s ease;
}
.tile.in-view{ animation:rise .6s cubic-bezier(.2,.9,.32,1.12) both; animation-delay:var(--d,0s); }
.tile.shown{ opacity:1; transform:none; }
.tile.shown:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(76,29,149,.45); }
@keyframes rise{ from{ opacity:0; transform:translateY(22px) scale(.96);} to{ opacity:1; transform:none; } }
.tile-head{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  background:linear-gradient(120deg,#7c3aed,#a855f7 70%,#c084fc); color:#fff;
  padding:10px 12px; font-size:13.5px; font-weight:700; }
.tile-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-badge{ background:#fbbf24; color:#5c3a00; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.tile-body{ padding:12px 12px 8px; font-size:13px; line-height:1.5; flex:1; white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.tile-foot{ display:flex; justify-content:space-between; padding:8px 12px 11px; color:#8d80b5; font-size:11.5px; }
.load-error{ color:#ffd7d7; padding:20px 0; }

footer{ position:relative; z-index:2; text-align:center; padding:36px 16px 42px; color:rgba(255,255,255,.72); font-size:13px; }

.overlay{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:26px 16px;
  background:rgba(10,5,30,.85);
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.overlay.open{ opacity:1; pointer-events:auto; }
.modal{ position:relative; width:100%; max-width:440px; margin:auto;
  background:linear-gradient(180deg,#ffffff 0%,#f7f3ff 100%); color:var(--ink);
  border-radius:22px; box-shadow:var(--shadow-lg);
  transform:translateY(26px) scale(.95); transition:transform .38s cubic-bezier(.2,.9,.3,1.18); }
.overlay.open .modal{ transform:none; }
.modal-wish{ max-width:620px; }
.x{ position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; border-radius:50%;
  background:#efe9fb; color:var(--violet-3); font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:all .18s; }
.x:hover{ background:var(--violet-3); color:#fff; transform:rotate(90deg); }

.modal-head{ padding:28px 28px 6px; text-align:center; }
.modal-emoji{ font-size:40px; }
.modal-head h3{ font-family:'Unbounded','Rubik',sans-serif; font-size:20px; margin-top:8px; color:var(--violet-4); }
.modal-sub{ color:var(--muted); font-size:13.5px; margin-top:6px; }
.auth-form{ padding:8px 28px 28px; }

label{ display:block; margin:14px 0 6px; font-size:13.5px; font-weight:700; color:#4a3b78; }
label .why{ font-weight:400; color:var(--muted); font-size:12px; }
input[type=text],input[type=password],textarea{
  width:100%; border:2px solid #e5ddf8; border-radius:12px; padding:11px 14px;
  font-size:14.5px; background:#fff; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
input[type=text]:focus,input[type=password]:focus,textarea:focus{
  outline:none; border-color:var(--violet-2); box-shadow:0 0 0 4px rgba(139,92,246,.18);
}
textarea.big{ min-height:130px; resize:vertical; }
textarea.mid{ min-height:74px; resize:vertical; }
.form-error{ color:#dc2626; font-size:12.5px; min-height:16px; margin-top:10px; }

.submit-btn{ width:100%; margin-top:8px; padding:13px; border-radius:14px; font-size:16px; font-weight:800; color:#fff;
  transition:transform .15s, filter .2s, box-shadow .2s; }
.submit-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.green-gradient{ background:linear-gradient(180deg,var(--green-1),var(--green-2)); box-shadow:0 8px 20px rgba(22,163,74,.35); }
.purple-gradient{ background:linear-gradient(180deg,var(--violet-2),var(--violet-3)); box-shadow:0 8px 20px rgba(109,40,217,.35); }
.switch-line{ text-align:center; margin-top:16px; font-size:13.5px; color:var(--muted); }
.switch-link{ background:none; color:var(--violet-3); font-weight:700; text-decoration:underline; font-size:13.5px; }

.steps-window{ overflow:hidden; border-radius:22px; }
.step{ display:none; padding:30px 28px; }
.step.active{ display:block; animation:stepIn .45s cubic-bezier(.22,.9,.34,1.12); }
@keyframes stepIn{ from{ opacity:0; transform:translateX(46px);} to{ opacity:1; transform:none; } }
.step-tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:#fff; background:linear-gradient(90deg,var(--violet-2),var(--violet-1));
  padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.step h3{ font-family:'Unbounded','Rubik',sans-serif; font-size:19px; color:var(--violet-4); margin-bottom:6px; }
.step-desc{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:6px 0 14px; }

.action-btn{ width:100%; margin-top:22px; padding:14px; border-radius:14px; font-size:16.5px; font-weight:800;
  background:#d7d3e4; color:#8a86a0; transition:all .35s; }
.action-btn:disabled{ cursor:not-allowed; }
.action-btn.ready{ color:#fff; background:linear-gradient(180deg,var(--green-1),var(--green-2));
  box-shadow:0 10px 26px rgba(22,163,74,.5); animation:readyPulse 1.8s ease-in-out infinite; }
@keyframes readyPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(22,163,74,.5);} 50%{ box-shadow:0 10px 36px rgba(22,163,74,.9);} }

/* ---------- ID-Verifizierung ---------- */
.id-list{ margin:8px 0 4px 18px; color:var(--ink); font-size:13.5px; line-height:1.8; }
.privacy-note{ margin-top:10px; font-size:12.5px; line-height:1.5; color:#1f6b40;
  background:#ecfdf3; border:1px solid #bbe9cd; border-radius:12px; padding:10px 12px; }
.id-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.id-slot{ position:relative; }
.id-box{ position:relative; width:100%; min-height:142px; border:3px dashed #c9b8f5; background:#faf8ff;
  border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:12px 8px; color:var(--violet-3); font-weight:700; text-align:center;
  transition:all .25s; overflow:hidden; }
.id-box:hover,.id-box:focus-visible{ border-color:var(--violet-2); background:#f3edff; transform:scale(1.02); }
.id-emoji{ font-size:28px; }
.id-name{ font-size:12.5px; line-height:1.3; }
.id-status{ font-size:10.5px; color:var(--muted); font-weight:400; }
.id-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.id-box.filled .id-emoji,.id-box.filled .id-name{ display:none; }
.id-box.filled .id-status{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:rgba(30,20,60,.78); color:#fff; padding:4px 2px; }
.id-box.ok{ border-color:var(--green-2); border-style:solid; }
.id-box.ok .id-status{ background:rgba(22,163,74,.88); }
.id-box.error{ border-color:#ef4444; }
.id-box.error .id-status{ background:rgba(220,38,38,.88); color:#fff; }
.id-box.uploading::after{ content:''; position:absolute; inset:0; z-index:1; background:rgba(255,255,255,.45); }
.slot-rm{ position:absolute; top:6px; right:6px; z-index:3; width:24px; height:24px; border-radius:50%;
  background:rgba(30,20,60,.78); color:#fff; font-size:11px; }
.slot-rm:hover{ background:#dc2626; }
.consent{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px;
  color:var(--ink); font-weight:400; cursor:pointer; line-height:1.45; }
.consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--violet-3); flex:0 0 auto; }

.success-zone{ text-align:center; padding:16px 0 6px; }
.check-svg{ width:96px; height:96px; margin-bottom:14px; }
.check-circle{ stroke-dasharray:202; stroke-dashoffset:202; }
.check-mark{ stroke-dasharray:60; stroke-dashoffset:60; }
.success-zone.play .check-circle{ animation:draw .7s ease forwards; }
.success-zone.play .check-mark{ animation:draw .45s .55s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success-zone h3{ margin-bottom:8px; }
.success-zone .submit-btn{ margin-top:18px; }

.toasts{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:rgba(28,18,55,.92); border:1px solid rgba(255,255,255,.2); color:#fff;
  padding:11px 20px; border-radius:999px; font-size:14px; box-shadow:0 12px 30px rgba(0,0,0,.4);
  max-width:90vw; opacity:0; transform:translateY(12px); transition:all .35s; }
.toast.in{ opacity:1; transform:none; }
.toast.error{ background:rgba(153,27,27,.94); }
.confetto{ position:fixed; top:-3vh; width:9px; height:14px; z-index:500; pointer-events:none;
  animation:confetti-fall var(--dur,3s) linear forwards; }
@keyframes confetti-fall{ to{ transform:translateY(112vh) translateX(var(--drift,0px)) rotate(680deg); } }

@media (max-width:820px){
  .curtain{ padding:12px 14px 18px; gap:8px; }
  .gold-btn{ padding:12px 16px; font-size:13px; }
  .green-btn{ font-size:11.5px; padding:9px 12px; white-space:normal; text-align:center; line-height:1.25; max-width:160px; }
  .link-btn{ font-size:11px; }
  .logo{ font-size:15px; }
  .gift{ font-size:26px; }
  .user-zone .hello{ font-size:12px; padding:6px 10px; }
  main{ padding:22px 14px 6px; }
  .step{ padding:26px 20px; }
  .modal-head{ padding:24px 20px 4px; }
  .auth-form{ padding:6px 20px 24px; }
}
@media (max-width:560px){
  .logo-text,.logo-flake{ display:none; }
  .id-slots{ grid-template-columns:1fr; }
  .id-box{ min-height:110px; flex-direction:row; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}