/* AskForDates – Wichtel-Studio auf /wichteln (Rahmen: tool-studio.css, Bausteine wi-* aus wichteln.css), Designsystem „Sonnig“.
   Eigene Klassen: wis-* (Funnel) und .wi-pv (Live-Vorschau eines Loses mit den Klassen der Los-Seite /wichteln/los).
   Weil die Medienabfragen am echten Fenster hängen, legen die .wi-pv-Regeln die Handy-Fassung fest. */

/* Welt-Farbe Minze: Bühne hinter dem Handy (Desktop) */
.wi-page .ts{--ts-stage:#bfe9d1}
.wi-page .ts-kicker::before{background:var(--mint)}
/* Lange Namen dürfen die Spalte nie breiter machen */
.wi-page .ts-fld{grid-template-columns:minmax(0,1fr)}
.wi-page .ts-fld > *{min-width:0}

/* ---------- Schritt 1: Modus (Ich trage alle ein · Alle tragen sich selbst ein) ---------- */
.wis-modes{margin:4px 0 22px}
.wis-modes .ts-opt[aria-checked="true"] .ts-opt-ico{background:var(--mint-1)}
/* Ab 480 px: Symbol und Punkt oben, Text darunter über die ganze Kartenbreite (sonst bleiben in der schmalen Desktop-Spalte nur 2 Wörter je Zeile) */
@media (min-width:480px){
  .wis-modes .ts-opt{grid-template-columns:44px 1fr 24px;grid-template-areas:"i . d" "t t t";align-items:start;align-content:start;row-gap:10px;padding:14px 14px 16px}
  .wis-modes .ts-opt-ico{grid-area:i;width:44px;height:44px}
  .wis-modes .ts-opt-txt{grid-area:t;gap:3px}
  .wis-modes .ts-opt-dot{grid-area:d;margin-top:2px}
}

/* ---------- Schritt 1: Namen ---------- */
.wis-addrow{display:flex;gap:8px;min-width:0}
.wis-addrow .ts-inp{flex:1 1 auto;width:auto;min-width:0}
.wis-add{flex:none;display:grid;place-items:center;width:62px;height:62px;border:0;border-radius:var(--r-sm);color:#fff;font:700 1.9rem/1 var(--f-body);
  background:var(--ink);transition:background-color .15s,transform .15s var(--ts-ease),opacity .2s}   /* dunkel: Blau gehört „Weiter“ */
.wis-add:hover{background:#000}
.wis-add:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wis-add:active{transform:scale(.94)}
.wis-add:disabled{opacity:.4;cursor:not-allowed}
.wis-count{margin:2px 0 0;font-size:.92rem}
.wis-chips{margin:6px 0 2px;min-width:0}
.wis-chips .wi-chip{background:var(--ts-surface)}
.wis-chips .wi-chip.is-me{background:var(--mint-1)}
.wis-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 4px 0;font-size:.88rem;font-weight:600;color:var(--ts-ink-3);text-align:center}
.wis-mine-link{margin:4px 0 0;text-align:center}

/* ---------- Schritt 2: Ausschlüsse ---------- */
.wis-pick-hint{font-weight:700;font-size:.94rem;color:var(--ts-ink-2)}
.wis-picks .ts-chip{max-width:100%;min-width:0}
.wis-pick-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wis-pairs-fld .wi-pair{background:var(--ts-surface)}
.wis-state{font-weight:600}
.wis-state.ok{color:var(--ts-ok);font-weight:700}

/* ---------- Schritt 3: Details ---------- */
textarea.wis-msg{min-height:96px;resize:vertical;line-height:1.45}
.wis-ideas{margin-top:2px}
.wis-ideas .ts-chip{max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-block:8px}

/* Du bist automatisch dabei; ruhiger Ausweg „Ich lose nur aus“ (beide Wege) */
.wis-solo{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.wis-solo .wis-solo-btn{font-size:.9rem;font-weight:600;color:var(--ts-ink-3);text-align:left}
.wis-solo .wis-solo-btn[data-solo="off"]{color:var(--ts-ink-2);font-weight:700}

/* Lostrommel beim Auslosen: die Namen kreisen, rubbel staunt in der Mitte */
.wis-drum{position:fixed;inset:0;z-index:70;display:grid;place-content:center;justify-items:center;gap:26px;padding:24px;text-align:center;
  background:color-mix(in srgb,var(--mint-1) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tsFade .2s ease;transition:opacity .25s}
.wis-drum.out{opacity:0}
.wis-drum p{margin:0;font:700 1.45rem/1.2 var(--f-body);letter-spacing:-.025em;color:var(--ts-ink);text-wrap:balance}
.wis-drum-box{position:relative;width:220px;height:220px}
.wis-drum-box::before{content:"";position:absolute;inset:18px;border-radius:50%;border:2.5px dashed rgba(31,158,91,.35)}
/* Der Ring dreht sich, die Anfangsbuchstaben bleiben aufrecht (gegenläufig über --wis-spin) */
@property --wis-spin{syntax:"<angle>";inherits:true;initial-value:0deg}
.wis-drum-ring{position:absolute;inset:0;rotate:var(--wis-spin);animation:wisSpin 1.3s cubic-bezier(.45,0,.25,1) both}
.wis-drum-ring .wi-av{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;font-size:.98rem;
  transform:rotate(var(--a)) translateY(-88px) rotate(calc(-1 * var(--a) - var(--wis-spin)));box-shadow:0 6px 14px -6px rgba(43,42,41,.4),0 0 0 3px #fff}
.wis-drum-gift{position:absolute;left:50%;top:50%;width:96px;height:96px;font-size:3.4rem;line-height:1;translate:-50% -50%;display:grid;place-items:center;animation:wisHop .42s ease-in-out infinite alternate}
.wis-drum-gift .fig{grid-area:1/1;width:96px;height:96px}
/* rubbel staunt beim Mischen und jubelt, sobald die Lose verteilt sind */
.wis-drum-gift .wis-df1{opacity:0;animation:wisFace 1.3s linear both}
.wis-drum-gift .wis-df0{animation:wisFaceOut 1.3s linear both}
@keyframes wisSpin{from{--wis-spin:0deg}to{--wis-spin:900deg}}
@keyframes wisFace{0%,82%{opacity:0}84%,100%{opacity:1}}
@keyframes wisFaceOut{0%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes wisHop{from{transform:translateY(4px) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}

/* ---------- Ergebnis: Links verschicken ---------- */
.wis-res .ts-share-hero .fig{color:var(--wi-fig,#4cc98a)}
.wis-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 4px}
.wis-facts span{max-width:100%;padding:6px 12px;border-radius:999px;background:var(--ts-surface-2);font-size:.88rem;font-weight:700;color:var(--ts-ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wis-prog{margin:18px 0 12px}
.wis-links{margin:0 0 12px}
.wis-links .wi-link-act .btn{min-height:44px}
.wis-note{margin-top:14px}
.wis-keep{margin:12px 2px 0}
.wis-more{display:flex;justify-content:center;flex-wrap:wrap;gap:0 22px;margin-top:6px}

/* ---------- Alle tragen sich selbst ein (Runde · Teilen · Verwaltung) ---------- */
.wis-fair{margin:14px 4px 0}
.wis-jme{margin:14px 0 0;font-weight:700;color:var(--ts-ink-2)}
/* Verwaltung: eigener Wunsch der Organisation bzw. „Ich mache doch mit“ */
.wis-wish{margin-bottom:16px}
.wis-own + .wis-wish{margin:12px 0 0}
.wis-wish .wis-wish-t{margin-top:0}
.wis-wish-act{display:flex;justify-content:flex-end}
.wis-rejoin{margin:0 0 16px}
.wis-rejoin .ts-hint{margin-top:0}
.wis-rejoin-row{display:flex;gap:10px;align-items:stretch;min-width:0}
.wis-rejoin-row .ts-inp{flex:1 1 auto;width:auto;min-width:0}
.wis-rejoin-row .ts-btn-s{flex:none}
@media (max-width:420px){.wis-rejoin-row{flex-wrap:wrap}.wis-rejoin-row .ts-btn-s{flex:1 1 100%}}
.wis-jkeep{margin:14px 0 0}
.wis-jload .wis-spin{width:28px;height:28px;border-color:var(--ts-line);border-top-color:var(--ts-accent)}
.wis-adm{padding-top:4px}
.wis-adm .wr-adm-status{margin-top:10px}
.wis-ownbox{margin-top:12px;display:grid;gap:8px}
.wis-ownbox .ts-share-row{margin-top:0}
.wis-ownlink{color:var(--ts-ink-3);background:var(--ts-surface-2);min-height:44px}
.wis-rmwarn{margin:8px 0 0}
.wis-rmlink .ts-linkbox{margin-top:0}
.wis-own{margin-top:4px;grid-template-columns:44px minmax(0,1fr) 18px}
.wis-tag-join,.wis-tag-join.ok{background:var(--mint-1);color:var(--mint-d)}

/* Meine Wichtelrunden (Sheet) und Nachfragen */
.wis-mine-row{display:flex;align-items:center;gap:6px}
.wis-mine-row .ts-item{flex:1 1 auto;min-width:0;width:100%;text-align:left;font:inherit}
.wis-mine-row .ts-item-ico{background:var(--mint-1)}
/* Titel oben, Status darunter: so bleibt dem Titel die ganze Breite (vorher brach „Unsere Wichtelrunde“ buchstabenweise) */
.wis-mine-row .ts-item{grid-template-columns:44px minmax(0,1fr) 18px;grid-template-areas:"i t c" "i g c";row-gap:5px;column-gap:12px;padding-block:10px}
.wis-mine-row .ts-item-ico{grid-area:i}
.wis-mine-row .ts-item-t{grid-area:t;white-space:normal;overflow-wrap:break-word;hyphens:auto;line-height:1.25}
.wis-mine-row .ts-tag{grid-area:g;justify-self:start;white-space:normal;line-height:1.3}
.wis-mine-row .ts-chev{grid-area:c}
.wis-del{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:1.05rem;opacity:.75;transition:background-color .15s,opacity .15s}
.wis-del:hover{background:var(--ts-coral-1);opacity:1}
.wis-ask-p{margin:0 0 8px;color:var(--ts-ink-2)}
.wis-ask-act{display:flex;gap:10px;width:100%}
.wis-ask-act > *{flex:1 1 0;min-width:0}
.ts-sheet-foot .wis-ask-act .ts-btn-p{width:auto}
.ts-btn-p.wis-danger{background:var(--ts-danger)}
.ts-btn-p.wis-danger:hover{background:#962816}

/* =========================================================
   Live-Vorschau: das Los, wie es /wichteln/los zeigt (Handy-Fassung)
   ========================================================= */
.ts-pv-screen.wi-pv{font:500 17px/1.55 var(--f-body);color:var(--ink);display:flex;flex-direction:column;text-align:left;-webkit-user-select:none;user-select:none;
  background:linear-gradient(180deg,var(--mint-1) 0%,#e9f8ef 70%,#f4fbf7 100%)}
.wi-pv .wl-sky{position:absolute;inset:0;z-index:0}
.wi-pv .wl-top{position:relative;z-index:2;flex:none;padding:calc(var(--ts-notch,0px) + 10px) 16px 0}
.wi-pv .wl-logo{pointer-events:none}
.wi-pv-tag{position:absolute;right:14px;bottom:4px;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff;font:700 .8rem/1.4 var(--f-body);letter-spacing:.02em}
.wi-pv .wl-main{flex:1 0 auto;width:calc(100% - 32px);min-height:0;padding:12px 0 24px;gap:22px}
.wi-pv .wl-hi{font-size:2.5rem}
.wi-pv .wl-name{font-size:3.2rem}
.wi-pv .wl-box{display:block;cursor:pointer;touch-action:auto;margin:30px 0 4px;zoom:1}
.wi-pv .wl-stage{grid-template-columns:none;grid-template-areas:none;text-align:center;justify-items:center;row-gap:10px}
.wi-pv .wl-stage > *{grid-area:auto}
.wi-pv .wl-stage .btn,.wi-pv .link-btn{cursor:pointer}
.wi-pv .wl-card.still{animation:none}
.wi-pv .wl-burst{position:absolute;top:42%}
.wi-pv .wl-start{pointer-events:none}
@media (prefers-reduced-motion: reduce){ .wi-pv .wl-sky i{animation:none} }