/* AskForDates Wichteln – /wichteln (+ /en/secret-santa-generator) und die Los-Seite /wichteln/los (+ /en/secret-santa/reveal).
   Designsystem „Sonnig“ (DESIGN.md): Minze-hell ist die Welt-Farbe fürs Wichteln, Blau bleibt die einzige Aktionsfarbe,
   Figur „rubbel“ (froh → staunt beim Anfassen → jubelt beim Auspacken). Baut auf site.css auf (Tokens, Knöpfe, Kopf/Fuß).
   Klassen: wi-* (Werkzeug, Abschnitte), wl-* (Los). */
:root{
  --wi-world:var(--mint-1);--wi-world-2:#c9ecd8;--wi-fig:#4cc98a;
  --wa:#25d366;--wa-ink:#0b3d20;--danger:#b4321f;
  --r-wi:var(--r-sm);
  /* Alte Namen (Übergang) */
  --pine:var(--mint-d);--pine-2:var(--mint-d);--pine-soft:var(--mint-1);
}
[hidden]{display:none!important}

/* ---------- Grundbausteine (EN-Werkzeug, Dialog, Toast) ---------- */
.inp{width:100%;min-width:0;min-height:52px;padding:12px 14px;border-radius:var(--r-xs);border:1.5px solid var(--line);background:var(--white);color:var(--ink);
  font:500 16px/1.3 var(--f-body);transition:border-color var(--fast),box-shadow var(--fast);-webkit-appearance:none;appearance:none}
.inp:hover{border-color:var(--line-2)}
.inp::placeholder{color:#9a948f}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-1)}
.inp:disabled{background:var(--paper);cursor:not-allowed}
input[type=date].inp{min-width:0;padding-right:10px;color:var(--ink)}
input[type=date].inp:invalid,input[type=date].inp:placeholder-shown{color:#9a948f}
textarea.inp{min-height:96px;resize:vertical;line-height:1.45}
.fld{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 16px;min-width:0}   /* Spalte nie breiter als die Karte (Eingaben haben sonst eine Mindestbreite) */
fieldset.fld{border:0;padding:0;margin-inline:0}
.fld-l{font-weight:700;font-size:.95rem;padding:0}
.fld-h{font-size:.9rem;color:var(--ink-3);margin:0;line-height:1.45}
.opt{font-weight:600;font-size:.85rem;color:var(--ink-3);margin-left:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* Auswahl-Chip im EN-Werkzeug (Knopf mit aria-pressed; überschreibt den Anzeige-Chip aus site.css) */
button.chip{min-height:44px;padding:8px 16px;border:0;background:var(--paper);color:var(--ink-2);font:600 .95rem/1.15 var(--f-body);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--fast),box-shadow var(--fast),color var(--fast)}
button.chip:hover{background:var(--paper-2);color:var(--ink)}
button.chip[aria-pressed="true"]{background:var(--blue-1);box-shadow:inset 0 0 0 2px var(--blue);color:var(--ink);font-weight:700}
.btn-wa{color:var(--wa-ink);background:var(--wa)}
.btn-wa:hover{background:#1fc05c}
.btn-danger{color:#fff;background:var(--danger)}
.btn-danger:hover{background:#962816}
.link-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;border:0;background:none;cursor:pointer;
  font:700 .95rem/1.2 var(--f-body);color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:2px;text-underline-offset:4px}
.link-btn:hover{color:var(--ink);text-decoration-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;max-width:calc(100% - 32px);padding:12px 18px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-weight:700;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   /en/secret-santa-generator – Hero mit Werkzeug
   ========================================================= */
.wi-hero{position:relative;padding:clamp(20px,4vw,56px) 0 clamp(40px,6vw,80px);background:var(--white)}
.wi-flakes{display:none}
.wi-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.wi-hero-txt{display:grid;gap:14px;min-width:0;justify-items:start}
.wi-h1{font:700 clamp(2.3rem,7.4vw,3.9rem)/1.05 var(--f-body);letter-spacing:-.035em;text-wrap:balance}
.wi-h1 span{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:.24em;text-underline-offset:-.08em;text-decoration-skip-ink:none}
.wi-lead{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.wi-ticks{display:none;list-style:none;padding:0;margin:6px 0 0;gap:10px}
.wi-ticks li{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--ink-2)}
.wi-ticks li::before{content:"";width:24px;height:24px;border-radius:50%;flex:none;background:var(--mint-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23167a46' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
@media (min-width:980px){
  .wi-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px}
  .wi-hero-txt{padding-top:56px;position:sticky;top:calc(var(--nav-h) + 24px)}
  .wi-ticks{display:grid}
}

/* Werkzeug: weiße Karte auf einer Minze-Bühne, rubbel schaut oben heraus */
.wi-tool{position:relative;min-width:0;padding:44px 12px 12px;border-radius:var(--r);background:var(--wi-world)}
.wi-tool-fig{position:absolute;right:22px;top:-26px;width:76px;height:76px;z-index:2;pointer-events:none}
.wi-tool .funkel{position:absolute;right:108px;top:8px;width:20px;height:20px}
.wi-tool:has(#wiRes:not([hidden])) > :is(.wi-tool-fig,.funkel){display:none}
.wi-tool:has(#wiRes:not([hidden])){padding-top:12px}
@media (min-width:560px){.wi-tool:has(#wiRes:not([hidden])){padding-top:24px}}
@media (min-width:560px){.wi-tool{padding:52px 24px 24px}}
/* Ganz schmal: weniger verschachtelte Innenabstände, damit Namen und Knöpfe Platz haben */
@media (max-width:374px){.wi-tool{padding-inline:6px;padding-bottom:6px}.wi-card{padding:18px 14px}.wi-more summary{padding-inline:12px}.wi-more-in{padding:0 10px 14px}}
.wi-card{position:relative;background:var(--white);border-radius:24px;box-shadow:var(--s1);padding:clamp(18px,4vw,28px)}
.wi-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.wi-card-t{font:700 1.45rem/1.15 var(--f-body);letter-spacing:-.03em;text-wrap:balance}
.wi-card-t:focus{outline:none}
.wi-card-ico{font-size:1.5rem;line-height:1}
.wi-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
@media (max-width:359px){.wi-row2{grid-template-columns:1fr}}
.wi-row2 .fld{margin-bottom:16px}

/* Wer macht mit */
.wi-people{margin-bottom:12px}
.wi-me{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
@media (max-width:420px){.wi-me{grid-template-columns:1fr}}
.wi-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700;font-size:.95rem;-webkit-tap-highlight-color:transparent;position:relative}
.wi-switch input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.wi-switch-ui{position:relative;width:48px;height:30px;flex:none;border-radius:var(--pill);background:var(--line-2);transition:background-color var(--fast)}
.wi-switch-ui::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(43,42,41,.25);transition:transform .2s var(--ease)}
.wi-switch input:checked+.wi-switch-ui{background:var(--blue)}
.wi-switch input:checked+.wi-switch-ui::after{transform:translateX(18px)}
.wi-switch input:focus-visible+.wi-switch-ui{outline:3px solid var(--blue);outline-offset:3px}
.wi-switch-l{white-space:nowrap}

/* Namens-Chips mit Anfangsbuchstaben (Farbe je Name über --hue, pastell) */
.wi-chips{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wi-chip{display:inline-flex;align-items:center;gap:6px;min-height:48px;max-width:100%;min-width:0;padding:2px 2px 2px 6px;border-radius:24px;background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:.95rem;animation:wi-pop .25s var(--ease)}
.wi-chip.is-me{box-shadow:inset 0 0 0 2px var(--mint);background:var(--mint-1)}
.wi-chip-n{min-width:0;overflow-wrap:break-word;line-height:1.2;padding:4px 0 4px 2px}   /* lange Namen umbrechen statt abschneiden */
.wi-me-tag{flex:none;font-size:.78rem;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--ink);border-radius:var(--pill);padding:3px 8px}
.wi-av{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:hsl(var(--hue,20) 78% 88%);color:hsl(var(--hue,20) 45% 24%);font:800 .85rem/1 var(--f-body)}
.wi-chip-x{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:.9rem;cursor:pointer;touch-action:manipulation;transition:background-color var(--fast),color var(--fast)}
.wi-chip-x:hover{background:var(--coral-1);color:#8a2a10}
@keyframes wi-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.wi-add{display:flex;gap:8px;margin-top:4px}
.wi-add .inp{flex:1 1 auto;width:auto;min-width:0}
.wi-add-b{width:52px;height:52px;flex:none;border:0;border-radius:var(--r-sm);background:var(--ink);color:#fff;font:700 1.7rem/1 var(--f-body);cursor:pointer;touch-action:manipulation;transition:background-color var(--fast),transform var(--fast) var(--ease)}
.wi-add-b:hover{background:#000}
.wi-add-b:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wi-add-b:active{transform:scale(.94)}
.wi-add-b:disabled{opacity:.4;cursor:not-allowed}
.wi-count{font-weight:700;color:var(--ink-2);margin-top:2px}
.wi-count.ok{color:var(--mint-d)}
.wi-count.ok::before{content:"✓ "}

/* Aufklappbares (Ausschlüsse, Nachricht) */
.wi-more{border-radius:var(--r-sm);background:var(--paper);margin:0 0 10px}
.wi-more summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:10px 16px;cursor:pointer;font-weight:700;list-style:none;border-radius:var(--r-sm);-webkit-tap-highlight-color:transparent}
.wi-more summary:hover{background:var(--paper-2)}
.wi-more summary::-webkit-details-marker{display:none}
.wi-more summary::after{content:"";width:9px;height:9px;flex:none;border-right:2.5px solid var(--ink-2);border-bottom:2.5px solid var(--ink-2);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease);margin-left:2px}
.wi-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.wi-more summary>span:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:8px}   /* Symbol bleibt neben dem Text, auch wenn er umbricht */
.wi-more summary>span:first-child>[aria-hidden]{flex:none}
.wi-sum{font-size:.82rem;font-weight:700;color:var(--ink-3);padding:3px 10px;border-radius:var(--pill);background:var(--white)}
.wi-sum.on{color:var(--mint-d);background:var(--mint-1)}
.wi-more-in{display:grid;gap:12px;padding:0 16px 16px}
.wi-more-in .fld-h:focus{outline:none}
.wi-picks .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wi-more button.chip:not([aria-pressed="true"]){background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.wi-more button.chip:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.wi-pairs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wi-pair{display:flex;align-items:center;gap:4px;min-height:52px;min-width:0;padding:4px 4px 4px 14px;border-radius:var(--r-xs);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;animation:wi-pop .25s var(--ease)}
.wi-pair-n{min-width:0;overflow-wrap:break-word;line-height:1.25;flex:0 1 auto;padding:4px 0}
.wi-dir{min-width:44px;height:44px;padding:0 8px;border:0;border-radius:var(--r-xs);background:var(--blue-1);color:var(--blue-d);font:800 1.15rem/1 var(--f-body);cursor:pointer;flex:none;touch-action:manipulation;transition:background-color var(--fast),color var(--fast)}
.wi-dir:hover{background:var(--blue);color:#fff}
.wi-pair .wi-chip-x{margin-left:auto}
/* Schmale Spalte: Namen untereinander, Richtung und Entfernen rechts daneben (sonst bleiben nur ein paar Buchstaben je Zeile) */
.wi-pairs{container-type:inline-size}
@container (max-width:300px){
  .wi-pair{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"a d x" "b d x";column-gap:2px;row-gap:0;padding:6px 2px 6px 12px;font-size:.94rem}
  .wi-pair-n{hyphens:auto;-webkit-hyphens:auto}
  .wi-pair > .wi-pair-n:first-child{grid-area:a}
  .wi-pair > .wi-dir{grid-area:d;align-self:center}
  .wi-pair > .wi-pair-n:nth-child(3){grid-area:b}
  .wi-pair > .wi-chip-x{grid-area:x;align-self:center;margin-left:0}
}
.wi-legend{font-size:.85rem}

.wi-err{margin:6px 0 12px;padding:12px 16px;border-radius:var(--r-sm);background:var(--coral-1);color:#6d2a12;font-weight:700;font-size:.95rem}
.wi-act{display:flex;gap:10px;margin-top:14px}
.wi-act .wi-submit{flex:1}
.wi-fine{margin-top:12px;text-align:center;font-size:.86rem;color:var(--ink-3)}

/* Ergebnis: Links verschicken */
.wi-res{display:grid;gap:14px}
.wi-res-head{text-align:center;display:grid;gap:8px;justify-items:center}
.wi-res-emoji{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--sun);font-size:2.4rem;line-height:1;animation:wi-pop .5s cubic-bezier(.3,1.5,.5,1)}
.wi-res-emoji .fig{width:70px;height:70px}
.wi-res-name{font:700 1.05rem/1.3 var(--f-body);overflow-wrap:anywhere}
.wi-res-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.wi-res-facts span{max-width:100%;padding:5px 12px;border-radius:var(--pill);background:var(--paper);font-size:.88rem;font-weight:700;color:var(--ink-2);overflow-wrap:anywhere}
.wi-prog{display:grid;gap:8px;font-weight:700;font-size:.94rem;color:var(--ink-2)}
.wi-prog-bar{height:10px;border-radius:var(--pill);background:var(--paper-2);overflow:hidden}
.wi-prog-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--mint);transition:width .4s var(--ease)}
.wi-prog.done{color:var(--mint-d)}
.wi-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;container-type:inline-size}
.wi-link{display:grid;gap:10px;min-width:0;padding:12px;border-radius:var(--r-sm);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background-color .2s}
.wi-link.is-sent{background:var(--mint-1);box-shadow:inset 0 0 0 1.5px #b9e3cb}
.wi-link.is-me{box-shadow:inset 0 0 0 2px var(--mint)}
.wi-link-top{display:flex;align-items:center;gap:10px;min-width:0}
.wi-link-n{flex:1;min-width:0;overflow-wrap:break-word;line-height:1.3;font-weight:700}
.wi-link-k{color:var(--ink-3);font-weight:600}
.wi-st{flex:none;font-size:.8rem;font-weight:800;color:var(--ink-3);padding:4px 10px;border-radius:var(--pill);background:var(--paper)}
.wi-link.is-sent .wi-st{color:var(--mint-d);background:var(--white)}
.wi-link-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wi-link-act.three{grid-template-columns:1.2fr 1fr 1fr}
.wi-link-act .btn{min-width:0;min-height:44px;padding:10px;font-size:.9rem}
/* Schmale Liste: Status unter den Namen, damit lange Namen Platz haben */
@container (max-width:300px){
  .wi-link-top{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:4px}
  .wi-link-top .wi-av{grid-row:1/3;align-self:center}
  .wi-link-top .wi-st{justify-self:start;padding:2px 9px}
}
@media (max-width:360px){.wi-link-act.three{grid-template-columns:1fr 1fr}.wi-link-act.three .btn:first-child{grid-column:1/-1}}
.wi-note{padding:14px 16px;border-radius:var(--r-sm);background:var(--sun-1);font-size:.93rem;line-height:1.5;color:var(--ink-2)}
.wi-note strong{color:var(--ink)}
.wi-all{width:100%}
.wi-res-more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}

/* Meine Wichtelrunden */
.wi-mine{margin-top:12px;padding:14px 18px;border-radius:24px;background:var(--white)}
.wi-mine-t{font:700 .95rem/1.2 var(--f-body);color:var(--ink-2);margin-bottom:4px}
.wi-mine-list{list-style:none;margin:0;padding:0}
.wi-mine-i{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}
.wi-mine-i:last-child{border-bottom:0}
.wi-mine-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.wi-mine-open:hover .wi-mine-n{text-decoration:underline}
.wi-mine-e{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--mint-1);font-size:1.2rem}
.wi-mine-txt{display:grid;min-width:0}
.wi-mine-n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-mine-r{font-size:.86rem;color:var(--ink-3)}
.wi-mine-del{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:none;cursor:pointer;font-size:1.05rem;opacity:.75}
.wi-mine-del:hover{background:var(--coral-1);opacity:1}
.wi-mine-h{font-size:.84rem;color:var(--ink-3);margin-top:6px}

/* Dialog */
.wi-dlg{width:min(420px,calc(100% - 32px));padding:0;border:0;border-radius:var(--r);background:var(--white);color:var(--ink);box-shadow:var(--s2)}
.wi-dlg::backdrop{background:rgba(43,42,41,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wi-dlg form{display:grid;gap:12px;padding:26px}
.wi-dlg-t{font:700 1.4rem/1.2 var(--f-body);letter-spacing:-.03em}
.wi-dlg p{color:var(--ink-2)}
.wi-dlg-act{display:flex;gap:10px;margin-top:6px}
.wi-dlg-act .btn{flex:1;padding-inline:14px}

/* =========================================================
   Inhalte unter dem Werkzeug (SEO): So geht's, Vorteile, Erklärung, Varianten, FAQ
   ========================================================= */
.wi-sec{padding:var(--sec) 0}
.wi-alt{background:var(--paper)}
.wi-sec .eyebrow::before,.wi-hero .eyebrow::before{background:var(--mint)}

/* So geht's: Minze-Block mit Mini-Runde und drei Schritten */
.wi-block{position:relative;display:grid;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,6vw,72px) clamp(20px,5vw,72px);border-radius:var(--r);background:var(--wi-world)}
.wi-block .sec-head{margin-bottom:22px}
@media (min-width:900px){.wi-block{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.wi-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:wi}
.wi-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:start}
.wi-num{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);font:800 1.1rem/1 var(--f-body)}
.wi-steps .h3{font-size:1.2rem;padding-top:9px}
.wi-steps p{color:var(--ink-2);max-width:52ch}
.wi-block-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.wi-block-cta small{font-weight:700;color:var(--ink-2);font-size:.88rem}

/* Mini-Runde (Schmuck, aria-hidden) */
.wi-mini{position:relative;width:min(100%,420px);justify-self:center;padding:20px;border-radius:28px;background:var(--white);box-shadow:var(--s2)}
.wi-mini-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wi-mini-h .fig{width:52px;height:52px}
.wi-mini-h strong{display:block;font-size:1.06rem;line-height:1.2;letter-spacing:-.01em}
.wi-mini-h small{display:block;color:var(--ink-3);font-weight:600;font-size:.86rem}
.wi-mini ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wi-mini li{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:14px;background:var(--paper);font-weight:700;font-size:.95rem}
.wi-mini li .wi-av{width:32px;height:32px;font-size:.8rem}
.wi-mini li span:last-child{margin-left:auto;flex:none;padding:4px 10px;border-radius:var(--pill);background:var(--white);color:var(--ink-3);font-size:.78rem}
.wi-mini li span.ok{background:var(--mint-1);color:var(--mint-d)}
.wi-mini-rev{position:relative;margin-top:14px;padding:16px;border-radius:20px;background:var(--ink);color:#fff;text-align:center}
.wi-mini-rev small{display:block;color:#e7e3df;font-weight:600;font-size:.88rem}
.wi-mini-rev strong{display:block;margin:2px 0;font-size:1.7rem;letter-spacing:-.03em;line-height:1.15}
.wi-mini-rev em{display:block;margin-top:4px;font-style:normal;font-size:.88rem;color:#e7e3df}
.wi-mini .funkel{position:absolute;width:22px;height:22px}
.wi-mini .funkel.k1{right:-8px;top:-10px}
.wi-mini .funkel.k2{left:-10px;bottom:56px;color:var(--coral)}

/* Vorteile: ruhige Liste statt Kartenstapel */
.wi-grid{list-style:none;margin:0;padding:0;display:grid;gap:0 32px}
@media (min-width:760px){.wi-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wi-grid{grid-template-columns:repeat(3,1fr)}}
.wi-grid > .wi-tile{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;align-content:start;padding:22px 0;border-top:1.5px solid var(--line)}
.wi-grid > .wi-tile .wi-ico{grid-row:span 2}
.wi-grid > .wi-tile .h3{font-size:1.2rem;align-self:center}
.wi-grid > .wi-tile p{grid-column:2;color:var(--ink-2)}
.wi-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--white);font-size:1.6rem;line-height:1}
.wi-grid > .wi-tile:nth-child(6n+1) .wi-ico{background:var(--sun-1)}
.wi-grid > .wi-tile:nth-child(6n+2) .wi-ico{background:var(--mint-1)}
.wi-grid > .wi-tile:nth-child(6n+3) .wi-ico{background:var(--sky-1)}
.wi-grid > .wi-tile:nth-child(6n+4) .wi-ico{background:var(--pink-1)}
.wi-grid > .wi-tile:nth-child(6n+5) .wi-ico{background:var(--coral-1)}
.wi-grid > .wi-tile:nth-child(6n+6) .wi-ico{background:var(--plum-1)}
.wi-alt .wi-grid > .wi-tile{border-top-color:var(--line-2)}

/* Varianten: drei Farbflächen zum Antippen */
.wi-grid.wi-var{gap:16px}
.wi-grid.wi-var > .wi-tile{display:flex;flex-direction:column;gap:10px;padding:24px;border:0;border-radius:24px;background:var(--white)}
.wi-grid.wi-var > .wi-tile:nth-child(3n+1){background:var(--sun-1)}
.wi-grid.wi-var > .wi-tile:nth-child(3n+2){background:var(--sky-1)}
.wi-grid.wi-var > .wi-tile:nth-child(3n+3){background:var(--pink-1)}
.wi-grid.wi-var .wi-ico{background:var(--white)!important}
.wi-grid.wi-var .h3{font-size:1.3rem;align-self:stretch;text-align:left}
.wi-grid.wi-var p{color:var(--ink-2)}
.wi-grid.wi-var p a{color:var(--ink);font-weight:700}
.wi-tile-link{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-weight:700;color:var(--blue-d);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.wi-tile-link:hover{color:var(--ink)}

/* Was ist Wichteln: Text links, ausgepacktes Beispiel-Los rechts */
.wi-split{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.wi-split{grid-template-columns:1.1fr .9fr;gap:64px}}
.wi-split .h2{margin-top:14px}
.wi-prose{margin-top:18px;color:var(--ink-2)}
.wi-prose a{color:var(--blue-d);font-weight:700}
.wi-more-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--blue-d)}
.wi-demo{position:relative;margin:0;display:grid;place-items:center;padding:64px 18px 32px;border-radius:var(--r);background:var(--wi-world)}
.wi-demo-card{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;width:min(330px,100%);padding:58px 22px 24px;border-radius:28px;background:var(--white);box-shadow:var(--s2);rotate:-1.5deg}
.wi-demo-fig{position:absolute;left:50%;top:-46px;width:88px;height:88px;translate:-50% 0}
.wi-demo .funkel{position:absolute;width:22px;height:22px}
.wi-demo .funkel.k1{right:16%;top:22px}
.wi-demo .funkel.k2{left:12%;bottom:26px;color:var(--coral)}
.wi-demo-k{font:700 .95rem/1.2 var(--f-body);color:var(--ink-2)}
.wi-demo-n{font:700 2.6rem/1.05 var(--f-body);letter-spacing:-.04em;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:.26em;text-underline-offset:-.1em;text-decoration-skip-ink:none}
.wi-demo-f{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);background:var(--paper);font-weight:700;color:var(--ink-2);font-size:.92rem}
.wi-demo-note{position:relative;margin-top:8px;padding:12px 16px 14px;background:var(--sun);border-radius:3px 3px 14px 3px;rotate:2deg;font:700 1.3rem/1.2 var(--f-hand);color:var(--ink);box-shadow:0 10px 16px -10px rgba(43,42,41,.45)}

/* FAQ: Zeilen mit Linie, Plus im blauen Kreis */
.wi-faq-wrap{max-width:820px}
.wi-faq{display:grid;border-top:1.5px solid var(--line)}
.wi-faq details{border-bottom:1.5px solid var(--line)}
.wi-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 2px;cursor:pointer;font-weight:700;font-size:1.06rem;line-height:1.35;list-style:none}
.wi-faq summary::-webkit-details-marker{display:none}
.wi-faq summary::after{content:"+";display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--blue-1);color:var(--blue-d);font:700 1.4rem/1 var(--f-body);transition:transform .2s var(--ease),background-color var(--fast)}
.wi-faq summary:hover::after{background:#d6e2ff}
.wi-faq details[open] summary::after{transform:rotate(45deg)}
.wi-faq details p{padding:0 52px 20px 2px;color:var(--ink-2);max-width:68ch}
@media (max-width:520px){.wi-faq details p{padding-right:2px}}
.wi-again{text-align:center;margin-top:40px}
.wi-cross{text-align:center;margin-top:18px;color:var(--ink-2)}
.wi-cross a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--blue-d)}

/* =========================================================
   Los-Seite: Minze-Welt, Geschenk mit rubbel, Enthüllung als weiße Karte
   ========================================================= */
.wl-page{min-height:100dvh;background:linear-gradient(180deg,var(--wi-world) 0%,#e9f8ef 70%,#f4fbf7 100%);background-attachment:fixed;color:var(--ink)}
.wl-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.wl-sky i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(31,158,91,.08);animation:wl-fall linear infinite}
.wl-sky i:nth-child(7n){background:var(--sun)}
.wl-sky i:nth-child(11n){background:var(--pink)}
@keyframes wl-fall{from{transform:translate3d(0,-20px,0)}to{transform:translate3d(var(--drift,0),105vh,0)}}
.wl-top{position:relative;z-index:2;display:flex;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
.wl-logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 1.15rem/1 var(--f-body);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.wl-logo img{width:38px;height:38px;margin:-4px -2px -4px -4px}
.wl-logo:hover{opacity:.85}
.wl-main{position:relative;z-index:1;width:min(520px,100% - 32px);margin:0 auto;padding:16px 0 calc(32px + env(safe-area-inset-bottom));min-height:calc(100dvh - 60px);display:grid;align-content:center;gap:28px}
.wl-stage{display:grid;justify-items:center;text-align:center;gap:10px;min-width:0}
.wl-kicker{max-width:100%;padding:6px 14px;border-radius:var(--pill);background:var(--white);font:700 .9rem/1.3 var(--f-body);color:var(--ink-2);overflow-wrap:anywhere;text-wrap:balance}
.wl-hi{max-width:100%;font:700 clamp(2.3rem,10vw,3.6rem)/1.04 var(--f-body);letter-spacing:-.035em;overflow-wrap:anywhere;hyphens:manual;text-wrap:balance}
.wl-sub{color:var(--ink-2);max-width:32ch;font-size:1.05rem;text-wrap:balance}

/* Geschenk: Koralle mit Sonnen-Schleife, Anhänger in Handschrift, rubbel schaut daneben hervor */
.wl-box{--lift:0px;position:relative;width:220px;height:230px;margin:30px 0 6px;padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;color:inherit;
  animation:wl-wiggle 4.5s ease-in-out 1.2s infinite}
.wl-box:focus-visible{outline:3px solid var(--blue);outline-offset:10px;border-radius:24px}
.wl-box::before{content:"";position:absolute;left:50%;top:58%;z-index:-1;width:min(300px,84vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:rgba(255,255,255,.6);transition:opacity .4s,scale .5s var(--ease)}
.is-opening .wl-box::before{opacity:0;scale:1.3}
.wl-body{position:absolute;left:16px;right:16px;bottom:18px;height:140px;border-radius:14px 14px 20px 20px;background:var(--coral);
  box-shadow:inset 0 -16px 0 rgba(43,42,41,.1),0 22px 34px -18px rgba(22,122,70,.55)}
.wl-body::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:34px;margin-left:-17px;background:var(--sun);box-shadow:inset 6px 0 0 rgba(255,255,255,.35)}
.wl-body::after{content:"";position:absolute;left:14px;top:14px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:120px 26px 0 -3px rgba(255,255,255,.3),26px 70px 0 -4px rgba(255,255,255,.28),132px 92px 0 -2px rgba(255,255,255,.3)}
.wl-lid{position:absolute;left:0;right:0;top:46px;height:52px;border-radius:14px;background:#ff7d55;box-shadow:inset 0 -6px 0 rgba(43,42,41,.08),0 8px 14px -8px rgba(43,42,41,.35);
  transform:translateY(calc(-1 * var(--lift))) rotate(calc(var(--lift) * -.12deg));transition:transform .15s}
.wl-lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:38px;margin-left:-19px;background:var(--sun);box-shadow:inset 6px 0 0 rgba(255,255,255,.35)}
.wl-bow{position:absolute;left:50%;top:-36px;width:0;height:0}
.wl-bow i{position:absolute;top:0;width:58px;height:40px;border:11px solid var(--sun);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:transparent}
.wl-bow i:first-child{right:2px;transform:rotate(-24deg);border-right-color:#f2b705}
.wl-bow i:last-child{left:2px;transform:rotate(24deg);border-left-color:#f2b705}
.wl-bow::after{content:"";position:absolute;left:-13px;top:22px;width:26px;height:22px;border-radius:9px;background:#f2b705;box-shadow:inset 0 -4px 0 rgba(43,42,41,.1)}
.wl-tag{position:absolute;right:-8px;bottom:40px;z-index:2;max-width:150px;padding:7px 12px 7px 18px;border-radius:6px 12px 12px 6px;background:var(--white);color:var(--ink);font:700 1.25rem/1.02 var(--f-hand);text-align:left;
  transform:rotate(-8deg);box-shadow:0 8px 16px -8px rgba(43,42,41,.45);overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.wl-tag::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line-2)}
.wl-shadow{position:absolute;left:30px;right:30px;bottom:4px;height:16px;border-radius:50%;background:rgba(22,122,70,.22);filter:blur(5px)}
.wl-box:hover .wl-lid{transform:translateY(calc(-6px - var(--lift))) rotate(-2deg)}
@keyframes wl-wiggle{0%,86%,100%{transform:none}89%{transform:rotate(-4deg)}92%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}

/* rubbel: froh · staunt beim Antippen, Ziehen oder Fokus · jubelt beim Auspacken */
.wl-buddy{position:absolute;left:-62px;bottom:10px;z-index:3;width:86px;height:86px;rotate:-8deg;transition:translate .25s var(--ease),rotate .25s var(--ease)}
.wl-buddy .fig{position:absolute;inset:0;width:100%;height:100%;opacity:0;color:var(--wi-fig)}
.wl-buddy .wl-f0{opacity:1}
.wl-box:hover .wl-buddy,.wl-box:focus-visible .wl-buddy,.wl-box:active .wl-buddy,.wl-box[style*="--lift"] .wl-buddy{translate:0 -6px;rotate:-2deg}
.wl-box:hover .wl-f0,.wl-box:focus-visible .wl-f0,.wl-box:active .wl-f0,.wl-box[style*="--lift"] .wl-f0{opacity:0}
.wl-box:hover .wl-f1,.wl-box:focus-visible .wl-f1,.wl-box:active .wl-f1,.wl-box[style*="--lift"] .wl-f1{opacity:1}
.is-opening .wl-buddy .fig{opacity:0!important}
.is-opening .wl-buddy .wl-f2{opacity:1!important}
.is-opening .wl-buddy{translate:-6px -26px;rotate:-12deg;transition:translate .3s cubic-bezier(.3,1.6,.5,1),rotate .3s}
.wl-box .funkel{position:absolute;z-index:3;pointer-events:none}
.wl-box .wl-k1{right:-26px;top:20px;width:24px;height:24px}
.wl-box .wl-k2{left:-20px;top:46px;width:18px;height:18px;color:var(--coral)}
@media (prefers-reduced-motion:no-preference){
  .wl-box .funkel{animation:wl-twinkle 2.6s ease-in-out infinite}
  .wl-box .wl-k2{animation-delay:-1.3s}
  @keyframes wl-twinkle{50%{transform:scale(.55) rotate(25deg);opacity:.6}}
}
@media (max-width:359px){.wl-buddy{left:-34px;width:66px;height:66px}.wl-box .wl-k2{left:-6px;top:30px}}

.is-opening .wl-box{animation:wl-shake .35s ease-in-out}
.is-opening .wl-lid{transition:transform .55s var(--ease),opacity .5s .1s;transform:translate(-30px,-190px) rotate(-28deg);opacity:0}
.is-opening .wl-body{transition:transform .5s var(--ease) .1s,opacity .4s .2s;transform:scale(.9);opacity:0}
.is-opening .wl-tag{transition:opacity .2s;opacity:0}
@keyframes wl-shake{0%,100%{transform:none}25%{transform:rotate(-5deg) scale(1.03)}75%{transform:rotate(5deg) scale(1.03)}}
.wl-peek{font-size:.92rem;color:var(--ink-2);max-width:32ch;text-wrap:balance}
.wl-stage .btn-p{min-width:220px}

/* Konfetti in den Farben der Frag-Bande */
.wl-burst{position:fixed;left:50%;top:42%;width:0;height:0;z-index:5;pointer-events:none}
.wl-burst i{position:absolute;width:9px;height:14px;border-radius:2px;opacity:0;animation:wl-pop 1.5s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes wl-pop{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 160px)) rotate(var(--r))}}

/* Enthüllung */
.wl-card{position:relative;display:grid;gap:14px;justify-items:center;text-align:center;min-width:0;margin-top:44px;scroll-margin-top:62px;padding:62px 22px 22px;border-radius:var(--r);background:var(--white);color:var(--ink);
  box-shadow:var(--s2);animation:wl-in .6s var(--ease)}
@keyframes wl-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.wl-card-fig{position:absolute;left:50%;top:-50px;width:100px;height:100px;margin-left:-50px;color:var(--wi-fig);pointer-events:none}
.wl-card-k{position:absolute;width:22px;height:22px;pointer-events:none}
.wl-card-k.k1{left:calc(50% + 52px);top:-34px}
.wl-card-k.k2{left:calc(50% - 76px);top:-6px;width:16px;height:16px;color:var(--coral)}
@media (prefers-reduced-motion:no-preference){
  .wl-card:not(.still) .wl-card-fig{animation:wl-jump .7s cubic-bezier(.3,1.5,.5,1) .15s both}
  @keyframes wl-jump{from{transform:translateY(40px) scale(.5) rotate(-12deg);opacity:0}}
  .wl-card:not(.still) .wl-card-k{animation:wl-spark .5s var(--ease) .55s both}
  @keyframes wl-spark{from{transform:scale(0) rotate(-40deg);opacity:0}}
  .wl-card:not(.still) > :is(.wl-k,.wl-facts,.btn,.wl-psst,.link-btn,.wr-wish,.wr-nowish,.wr-avoid,.wr-changed){animation:wl-up .4s var(--ease) both}
  .wl-card:not(.still) > .wl-k{animation-delay:.2s}
  .wl-card:not(.still) > .wl-name{animation:wl-up .45s var(--ease) .28s both,wl-mark .45s var(--ease) .62s both}
  .wl-card:not(.still) > :is(.wl-facts,.wr-wish,.wr-nowish,.wr-avoid){animation-delay:.42s}
  .wl-card:not(.still) > .btn{animation-delay:.5s}
  .wl-card:not(.still) > .wl-msg{animation:wl-stick .5s cubic-bezier(.3,1.4,.5,1) .58s both}
  .wl-card:not(.still) > :is(.wl-psst,.link-btn){animation-delay:.68s}
  @keyframes wl-up{from{opacity:0;transform:translateY(12px)}}
  @keyframes wl-mark{from{text-decoration-color:transparent;text-decoration-thickness:0}}
  @keyframes wl-stick{from{opacity:0;transform:translateY(-10px) rotate(-5deg) scale(1.04)}}
}
.wl-k{display:inline-flex;align-items:center;gap:8px;font:700 .98rem/1.2 var(--f-body);color:var(--ink-2)}
.wl-k::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mint);flex:none}
.wl-name{max-width:100%;padding:0 4px;font:700 clamp(2.6rem,13vw,4.2rem)/1.02 var(--f-body);letter-spacing:-.04em;color:var(--ink);overflow-wrap:anywhere;hyphens:manual;text-wrap:balance;
  text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:.26em;text-underline-offset:-.1em;text-decoration-skip-ink:none}
.wl-name:focus{outline:none}
.wl-name-e{display:none}
.wl-facts{list-style:none;margin:4px 0 0;padding:4px 14px;display:grid;width:100%;border-radius:var(--r-sm);background:var(--paper)}
.wl-facts li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:0 12px;padding:10px 0;text-align:left}
.wl-facts li + li{border-top:1.5px solid var(--line)}
.wl-fi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--white);font-size:1.2rem;grid-row:1/3}
.wl-fk{font-size:.86rem;font-weight:700;color:var(--ink-3)}
.wl-facts b{overflow-wrap:anywhere;font-size:1.05rem;font-weight:700;line-height:1.3}
.wl-days{display:block;font-weight:700;font-size:.9rem;color:var(--mint-d)}
.wl-card .btn{width:100%}
/* Nachricht als Klebezettel */
.wl-msg{position:relative;width:calc(100% - 8px);margin:10px 0 2px;padding:18px 18px 16px;border-radius:3px 3px 16px 3px;background:var(--sun);rotate:-1.2deg;text-align:left;box-shadow:0 12px 18px -12px rgba(43,42,41,.5)}
.wl-msg::before{content:"";position:absolute;left:50%;top:-10px;width:74px;height:22px;margin-left:-37px;border-radius:3px;background:rgba(255,255,255,.6);rotate:3deg}
.wl-msg-k{font:700 .85rem/1.2 var(--f-body);color:var(--ink-2);margin-bottom:6px;overflow-wrap:anywhere}
.wl-msg blockquote{margin:0;font:700 1.4rem/1.25 var(--f-hand);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.wl-by{font-size:.92rem;color:var(--ink-3)}
.wl-psst{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--pill);background:var(--mint-1);font-weight:700;font-size:.95rem;color:var(--mint-d)}
.wl-card .link-btn{color:var(--ink-2)}
.wl-err{display:grid;gap:12px;justify-items:center;text-align:center;padding:32px 22px;border-radius:var(--r);background:var(--white);color:var(--ink)}
.wl-err-e{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--mint-1);font-size:2.6rem;line-height:1}
.wl-err h2{font:700 1.75rem/1.15 var(--f-body);letter-spacing:-.03em;text-wrap:balance}
.wl-err p{color:var(--ink-2);max-width:36ch}
.wl-foot{display:grid;gap:10px;justify-items:center;text-align:center;font-size:.9rem;color:var(--ink-2)}
.wl-foot a{color:var(--ink)}
.wl-start{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--pill);font-weight:700;text-decoration:none;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow var(--fast)}
.wl-start:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.wl-made{max-width:40ch;text-wrap:balance}
/* Fehler-Los: der blaue Knopf führt schon zum Auslosen, unten nicht nochmal dasselbe */
#wlApp:has(> #wlErr:not([hidden])) .wl-start{display:none}
.wl-made a{color:inherit}

/* Wenig Höhe: Geschenk kleiner · Handy quer: Text links, Geschenk rechts */
@media (max-height:700px){
  .wl-main{gap:20px}
  .wl-box{zoom:.84;margin-top:24px}
  .wl-hi{font-size:clamp(2rem,9vw,2.8rem)}
}
@media (max-height:620px) and (orientation:portrait){   /* z. B. 320×568: Auspacken-Knopf bleibt im ersten Bild (nur echte Los-Seiten, nicht die Studio-Vorschau) */
  .wl-page .wl-top{padding-top:calc(6px + env(safe-area-inset-top))}
  .wl-page .wl-main{gap:14px;padding-top:6px}
  .wl-page .wl-stage{gap:8px}
  .wl-page .wl-box{zoom:.7;margin:22px 0 2px}
  .wl-page .wl-hi{font-size:clamp(1.85rem,8.6vw,2.4rem)}
  .wl-page .wl-sub{font-size:.98rem;line-height:1.45}
}
@media (max-height:500px) and (orientation:landscape){
  .wl-main{width:min(820px,100% - 32px);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .wl-stage{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k box" "hi box" "sub box" "btn box" "peek box";column-gap:40px;row-gap:8px;text-align:left;justify-items:start;align-items:center}
  .wl-kicker{grid-area:k}.wl-hi{grid-area:hi}.wl-sub{grid-area:sub}.wl-stage > .btn{grid-area:btn}.wl-peek{grid-area:peek}
  .wl-main > .wl-card,.wl-main > .wl-err,.wl-main > .wl-foot{width:min(560px,100%);justify-self:center}
  .wl-stage > .wl-box{grid-area:box}.wl-stage > .wr-changed{grid-area:k}
  .wl-box{zoom:.8;margin:30px 0 0 60px;align-self:center}
}

@media (prefers-reduced-motion: reduce){
  .wl-sky i{animation:none}
  .wl-box{animation:none}
  .wl-buddy{transition:none}
}