/* ===== Cupd · Warteliste (Gaeste) + Beanspruchen oder Bewerben (Cafes & Roester) =====
   Zwei eigenstaendige Sektionen im Jade-Slab, direkt nach der Pour-Szene (#get bzw. #start).
   Markup: src/partials/waitlist.html, src/partials/partners.html. Logik: /assets/waitlist.js.
   Nutzt die Tokens und Klassen der Seite (.wrap .eyebrow .h2 .lead .btn), damit die Bloecke jede
   Aenderung am Seitenstil mitmachen.
   Gaeste: Bestellung an der Theke, dein Name wird gross. Rechts deine eigene Kaffeesorte: eine Tuete,
   bedruckt wie eine Specialty-Tuete, dein Name riesig darauf. Beim Tippen springen die Buchstaben
   einzeln rein, lange Namen werden kleiner statt abzubrechen.
   Cafes & Roester: das eigene Cafe in der App-Liste suchen und beanspruchen, oder sich bewerben.
   Daneben dein Laden von vorn, mit deinem Namen auf dem Schild, dazu die kostenlosen
   Business-Funktionen. Beim Beanspruchen geht das Licht an und der Zettel an der Tuer bekommt den
   Reserviert-Streifen, eine Bewerbung fliegt als Brief durch den Briefschlitz. */

.wl-sec{
  --wl-spring:var(--spring-bouncy,cubic-bezier(.3,1.45,.5,1));
  --wl-snap:var(--spring-snappy,cubic-bezier(.2,.9,.25,1));
  --wl-ease:var(--ease-standard,cubic-bezier(.2,.85,.2,1));
  --wl-expo:cubic-bezier(.16,1,.3,1);
  --wl-shade:rgba(0,62,46,.55);
  position:relative;z-index:8;background:var(--jade);color:var(--ink);
  padding-block:clamp(40px,6vw,96px) clamp(80px,9vw,136px);overflow:clip}
.pour+.wl-sec{padding-top:clamp(0px,1vw,16px)}
.wl-sec [hidden]{display:none!important}
.wl-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,72px);align-items:center}
.wl,.pb{display:grid;gap:22px;align-content:start;min-width:0}

.wl-sec .eyebrow{color:var(--ink)}
.wl-eye::before{animation:wl-pulse 2.4s var(--wl-ease) infinite}
@keyframes wl-pulse{0%{box-shadow:0 0 0 0 rgba(33,31,28,.45)}70%,100%{box-shadow:0 0 0 9px rgba(33,31,28,0)}}
.wl-sec .h2{max-width:12.5ch}
.wl-sec .lead,.wl-sec .lead b{color:var(--ink)}

/* Wort-Auftritt wie in der Pour-Szene: jedes Wort steigt aus seiner Zeile */
.wl-h2 .wd{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.22em;margin-bottom:-.22em}
.wl-h2 .wi{display:inline-block;transition:transform 1s var(--wl-expo);transition-delay:calc(var(--i,0) * 55ms)}
.wl-pre .wl-h2 .wi{transform:translate3d(0,110%,0)}
.wl-pre .wl .lead,.wl-pre .wl-card,.wl-pre .pb .lead,.wl-pre .wl-biz{opacity:0;transform:translate3d(0,22px,0)}
.wl .lead,.wl-card,.pb .lead,.wl-biz{transition:opacity .7s var(--wl-ease) .25s,transform .9s var(--wl-expo) .25s}
.wl-card{transition-delay:.38s}

/* ---------- Karte mit Formular (beide Bloecke) ---------- */
.wl-card{background:var(--paper);border-radius:28px;padding:clamp(20px,2.4vw,28px);max-width:580px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 60px -30px var(--wl-shade),0 10px 22px -16px rgba(0,62,46,.35)}
.wl-form{display:grid;gap:14px}
.wl-fields{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px}
.pb .wl-fields,.pb-sec .wl-fields{grid-template-columns:1fr 1fr}
.wl-f{display:grid;gap:6px;min-width:0}
.wl-f>span{font-size:13px;font-weight:700;color:var(--ink-body)}
.wl-f small{font-weight:500;color:var(--ink-muted)}
.wl-f input{font:inherit;font-size:16px;height:52px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--base);color:var(--ink);width:100%;min-width:0;transition:border-color .18s,box-shadow .18s,background-color .18s}
.wl-f input:focus{outline:none;border-color:var(--jade);background:var(--paper);box-shadow:0 0 0 4px var(--jade-wash)}
.wl-f input::placeholder{color:#A39B8E}
.wl-f input.bad{border-color:var(--like);box-shadow:0 0 0 4px rgba(210,80,74,.14);animation:wl-no .4s var(--wl-ease)}
@keyframes wl-no{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.wl-beta{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--base);border:1.5px dashed var(--line-strong);cursor:pointer;transition:background-color .25s,border-color .25s}
.wl-beta:hover{border-color:#CBC2B1}
.wl-beta.on{background:var(--bloom-wash);border:1.5px solid var(--bloom)}
.wl-beta input{position:absolute;opacity:0;width:1px;height:1px}
.wl-sw{position:relative;width:46px;height:28px;border-radius:999px;background:var(--line-strong);transition:background-color .25s}
.wl-sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(33,31,28,.25);transition:transform .5s var(--wl-spring)}
.wl-beta.on .wl-sw{background:var(--bloom)}
.wl-beta.on .wl-sw::after{transform:translateX(18px)}
.wl-beta input:focus-visible+.wl-sw{outline:3px solid var(--bloom);outline-offset:3px}
.wl-beta .t{font-size:14.5px;line-height:1.45;color:var(--ink-body)}
.wl-beta .t b{color:var(--ink)}
.wl-left{display:grid;justify-items:center;padding-left:14px;border-left:1.5px solid var(--line);font-family:var(--mono);color:var(--bloom-deep)}
.wl-left b{font-weight:500;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.wl-left small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.wl-more{display:grid;gap:8px}
.wl-more .hint{margin:0;font-size:13px;line-height:1.5;color:var(--ink-muted)}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

.wl-submit{width:100%;justify-content:center;border:0;cursor:pointer}
.wl-submit .bl{justify-content:center}
.wl-submit:disabled{cursor:progress}
.wl-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:wl-rot .7s linear infinite}
@keyframes wl-rot{to{transform:rotate(360deg)}}
.wl-err{margin:0;padding:12px 14px;border-radius:12px;background:rgba(210,80,74,.1);color:var(--like);font-size:14px;font-weight:600;line-height:1.45}
.wl-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-muted)}
.wl-note a{text-decoration:underline}

.wl-done{display:grid;gap:12px}
.wl-done .big{margin:0;font-weight:800;font-size:clamp(26px,2.5vw,34px);line-height:1.06;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.wl-pos,.pb-dn{color:var(--jade-deep)}
.wl-done .body{margin:0;font-size:16px;line-height:1.55;color:var(--ink-body);text-wrap:pretty}
.wl-sec .lead,.wl-note{text-wrap:pretty}
.nw{white-space:nowrap}
.wl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wl-acts .btn{border:0;cursor:pointer}
.wl-acts .btn-ghost{border:1.5px solid var(--sky)}
.wl-copied{margin:0;font-size:13px;font-weight:700;color:var(--jade-deep)}
.wl-done.in>*{animation:wl-up .7s var(--wl-expo) both}
.wl-done.in>*:nth-child(2){animation-delay:.08s}
.wl-done.in>*:nth-child(3){animation-delay:.16s}
@keyframes wl-up{from{opacity:0;transform:translate3d(0,14px,0)}}

.wl-biz{margin:0;font-size:15px;color:var(--ink)}
.wl-biz a{font-weight:800;border-bottom:2px solid currentColor;padding-bottom:1px;transition:color .2s}
.wl-biz a:hover{color:var(--paper)}

/* ---------- Gaeste: die Buehne neben dem Formular ---------- */
.wl-stage{position:relative;justify-self:center;width:320px;max-width:100%;padding-bottom:8px;display:grid;justify-items:center}

/* Der grosse Name: passt sich der Breite an (JS setzt font-size), neue Buchstaben ploppen rein */
.wl-namebox{position:relative;min-width:0}
.wl-name{display:inline-block;max-width:100%;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .5s var(--wl-expo),color .3s}
.wl-name .ch{display:inline-block;white-space:pre}
.wl-meas{position:absolute!important;left:0;top:0;visibility:hidden!important;pointer-events:none;max-width:none!important;transition:none!important;animation:none!important;transform:none!important}
.wl-bag .ch.new{animation:wl-ch-pop .7s var(--wl-spring) both}
@keyframes wl-ch-pop{from{opacity:0;transform:translate3d(0,.3em,0) scale(.35) rotate(-14deg)}}

/* ---------- Deine eigene Kaffeesorte. Die Tuete lebt ----------
   Bedruckt wie eine Specialty-Tuete: weisse Folie mit Zip, oben das Cupd-Logo, rechts die gedruckte
   Rosette, in der Mitte eine blaue Rastersonne (Canvas), die dein Name formt, als Kern die Cupd-Tasse,
   die sich mit jedem Buchstaben fuellt, quer darueber dein Name, unten zwei Farbbaender mit dem
   gedruckten Feld fuer den Chargen-Sticker. Die Punktfarben liest das Skript aus --dot1 bis --dot3. */
.wl-bag{position:relative;width:320px;max-width:100%;padding:34px 0 10px;
  --dot1:#1E5590;--dot2:#2E77C4;--dot3:#6FA3DC;--b1:var(--sky-wash);--b1t:var(--sky-deep);--rnd:var(--bloom)}
.wl-bag .wl-pouch{position:relative;z-index:2;height:452px;transform-origin:50% 100%;transition:rotate .6s var(--wl-spring)}
.wl-breath{position:relative;height:100%;transform-origin:50% 100%;animation:wl-breathe 4.6s ease-in-out infinite}
@keyframes wl-breathe{50%{transform:scale(1.007,1.013)}}
.wl-print{position:absolute;inset:0;overflow:hidden;border-radius:12px 12px 28px 28px;background:#FCFBF8;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -3px 0 rgba(0,0,0,.05) inset,0 46px 70px -30px var(--wl-shade),0 14px 26px -16px rgba(0,62,46,.45)}
/* Folie: ein weicher Glanz unter der Schrift (Name und Baender bleiben satt), darueber die Waelbung
   an den Raendern und oben die Siegelnaht */
.wl-print::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.34) 42%,rgba(255,255,255,0) 54%)}
.wl-print::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(90deg,rgba(33,31,28,.07) 0 1px,transparent 1px 4px) top/100% 13px no-repeat,linear-gradient(rgba(33,31,28,.05),rgba(33,31,28,0)) top/100% 13px no-repeat,linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0) 10%,rgba(0,0,0,0) 88%,rgba(0,0,0,.09))}
.wl-zip{position:absolute;left:0;right:0;top:25px;height:5px;z-index:5;border-top:1.5px solid rgba(33,31,28,.1);border-bottom:1.5px solid rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(33,31,28,.07)}
.wl-bag .wl-pouch::before,.wl-bag .wl-pouch::after{content:"";position:absolute;z-index:3;top:16px;width:9px;height:9px;background:var(--jade);transform:rotate(45deg)}
.wl-bag .wl-pouch::before{left:-5px}
.wl-bag .wl-pouch::after{right:-5px}
/* die Rastersonne */
.wl-dots{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wl-band1,.wl-band2{position:absolute;left:0;right:0;display:flex;flex-direction:column;justify-content:center;padding:0 112px 0 18px}
.wl-band1{top:336px;height:46px;background:var(--b1);z-index:0;transition:background-color .5s}
.wl-band1 span{font-weight:800;font-size:12.5px;line-height:1.25;letter-spacing:-.01em;color:var(--b1t);transition:color .5s}
.wl-band2{top:382px;bottom:0;background:var(--ink);z-index:2;gap:3px;padding-bottom:6px}
.wl-band2 b,.wl-band2 span{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;white-space:nowrap}
.wl-band2 b{color:#fff}
.wl-band2 span{color:var(--slab-jade)}
/* das Cupd-Logo wie in der Navigation: Marke und Schriftzug */
.wl-logo{position:absolute;z-index:4;left:18px;top:42px;display:inline-flex;align-items:center;gap:7px}
.wl-logo .mark{width:22px;height:22px}
.wl-logo .w{display:block;height:14px;width:auto;color:var(--ink)}
.wl-roundel{position:absolute;z-index:4;right:16px;top:48px;width:68px;height:68px;border-radius:50%;background:var(--rnd);box-shadow:0 0 0 3px #FCFBF8;transform:rotate(-8deg);transition:background-color .5s}
.wl-roundel svg{width:100%;height:100%;overflow:visible}
.wl-roundel text{font-family:var(--mono);font-size:8.6px;font-weight:500;fill:#fff}
.wl-roundel .ic circle{fill:#fff}
.wl-roundel .ic path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.wl-vert{position:absolute;z-index:4;right:9px;top:150px;writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;letter-spacing:.4em;color:var(--ink-muted)}
/* der Kern: die Cupd-Tasse fuellt sich mit jedem Buchstaben, die Oberflaeche schwappt; mit Beta-Cupping
   taucht ein Loeffel ein, beim Absenden laeuft sie voll */
.wl-core{position:absolute;z-index:3;left:50%;top:148px;width:80px;height:80px;margin:-40px 0 0 -40px}
.wl-core svg{width:100%;height:100%;overflow:visible}
.wl-core .disc{fill:var(--jade)}
.wl-core .liquid{fill:var(--ink)}
.wl-core .outline{fill:none;stroke:var(--ink);stroke-width:4.4;stroke-linejoin:round}
.wl-core .rim{fill:var(--ink)}
.wl-core .spoon{opacity:0;transform:translate(22px,-34px) rotate(28deg);transform-box:view-box;transform-origin:50% 50%;transition:opacity .25s,transform .8s var(--wl-spring)}
.wl-core .spoon path{fill:none;stroke:var(--ink);stroke-width:4.4;stroke-linecap:round}
.wl-core .spoon ellipse{fill:var(--ink)}
.wl-bag.beta .wl-core .spoon{opacity:1;transform:none}
.wl-core.bump{animation:wl-core .45s var(--wl-spring)}
@keyframes wl-core{35%{transform:scale(1.09) rotate(-4deg)}}
.wl-core.pop{animation:wl-corepop .9s var(--wl-spring)}
@keyframes wl-corepop{25%{transform:scale(1.22) rotate(8deg)}55%{transform:scale(.94) rotate(-3deg)}}
/* dein Name quer ueber die Sonne, darunter die Tasting Notes */
.wl-bag .wl-namebox{position:absolute;z-index:3;left:26px;right:26px;top:186px;height:110px;display:flex;align-items:center;justify-content:center}
.wl-bag-name{font-weight:800;font-size:116px;line-height:.84;letter-spacing:-.06em;text-transform:uppercase;color:var(--ink);padding:.02em .06em .06em 0}
.wl-bag-name.ph{color:#D9D2C6}
.wl-notes{position:absolute;z-index:3;left:14px;right:14px;top:302px;display:flex;justify-content:center;align-items:center;gap:8px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.wl-notes i{width:4px;height:4px;border-radius:50%;background:var(--dot2);flex:none;transition:background-color .5s}
.wl-notes .flip{display:inline-block;animation:wl-note .5s var(--wl-spring)}
@keyframes wl-note{from{opacity:0;transform:translate3d(0,8px,0) scale(.8)}}
/* gedrucktes Feld fuer den Chargen-Sticker: nach dem Anstellen klebt er genau hier */
.wl-bag .wl-spot{position:absolute;z-index:4;right:16px;top:338px;width:84px;height:84px}
.wl-spot-e{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#FCFBF8;border:1.5px dashed #BDB5A8;font-family:var(--mono);font-size:9px;line-height:1.45;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:#A39B8E}
.wl-badge{position:absolute;inset:-5px;display:grid;place-items:center;border-radius:50%;background:var(--jade);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 20px -10px rgba(0,62,46,.75);opacity:0;transform:rotate(-14deg) scale(.4)}
.wl-bag.in-line .wl-badge{opacity:1;transform:rotate(-14deg)}
.wl-badge.hit{animation:wl-stick .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes wl-stick{0%{opacity:0;transform:rotate(-50deg) scale(2.3)}55%{opacity:1}100%{opacity:1;transform:rotate(-14deg) scale(1)}}
.wl-badge-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:wl-spin 16s linear infinite}
.wl-badge-ring text{font-family:var(--mono);font-size:9.6px;font-weight:500;fill:var(--ink)}
@keyframes wl-spin{to{transform:rotate(360deg)}}
.wl-badge-n{position:relative;display:grid;justify-items:center;line-height:1}
.wl-badge-n small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;opacity:.8}
.wl-badge-n b{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:3px}
/* Beta-Siegel quer ueber den Zip, kommt mit dem Schalter */
.wl-seal{position:absolute;z-index:7;left:12px;top:6px;display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:5px;background:var(--bloom);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 14px -8px rgba(80,10,40,.6);opacity:0;transform:translate3d(0,-44px,0) rotate(-14deg) scale(.8);transition:opacity .25s var(--wl-ease),transform .75s var(--wl-spring)}
.wl-seal b{font-weight:500;padding-left:8px;border-left:1px solid rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.wl-bag.beta .wl-seal{opacity:1;transform:rotate(-4deg)}
.wl-seal.hit{animation:wl-seal .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes wl-seal{0%{transform:rotate(-4deg) scale(1)}35%{transform:rotate(-7deg) scale(1.16)}100%{transform:rotate(-4deg) scale(1)}}
/* Glanz auf der Folie, wenn der Zeiger die Tuete neigt (data-tilt, nur Desktop) */
.wl-bag.tilting .wl-print::before{background:radial-gradient(300px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 60%)}
/* Tuete: neigt sich neugierig zum Formular, atmet beim Tippen, faellt beim ersten Blick rein, huepft beim Anstellen */
.wl-bag.curious .wl-pouch{rotate:-2.5deg}
.wl-pouch.squish{animation:wl-squish .34s var(--wl-ease)}
@keyframes wl-squish{40%{transform:scale(1.014,.978)}}
.wl-pouch.drop{animation:wl-drop 1.05s both}
@keyframes wl-drop{0%{opacity:0;transform:translate3d(0,-80px,0) rotate(-5deg)}42%{opacity:1;transform:translate3d(0,0,0) scale(1.05,.93)}60%{transform:translate3d(0,-12px,0) scale(.98,1.02)}78%{transform:translate3d(0,0,0) scale(1.01,.99)}100%{transform:none}}
.wl-pouch.hop{animation:wl-hop .95s both}
@keyframes wl-hop{0%{transform:none}14%{transform:scale(1.06,.9)}34%{transform:translate3d(0,-38px,0) scale(.95,1.07) rotate(-2deg)}52%{transform:translate3d(0,-44px,0) rotate(1.5deg)}70%{transform:translate3d(0,0,0) scale(1.06,.92)}84%{transform:scale(.98,1.02)}100%{transform:none}}
.wl-sec.hold .wl-bag .wl-pouch{opacity:0}

/* Kaffeebohnen als Konfetti */
.wl-conf.wl-bean{border-radius:50%;background:var(--bc,#6B4430);box-shadow:inset -1.5px -1px 0 rgba(0,0,0,.28)}
.wl-conf.wl-bean::after{content:"";position:absolute;left:44%;top:14%;bottom:14%;width:22%;border-left:1.4px solid rgba(0,0,0,.42);border-radius:50%}

/* Konfetti wie bei den Coins der Seite */
.wl-conf{position:absolute;z-index:9;left:0;top:0;pointer-events:none;border-radius:1.5px}

/* ---------- Cafes & Roester: beanspruchen oder bewerben. Rechts das eigene Cafe als App-Profil ---------- */
.pb-guests{display:inline-flex;align-items:center;gap:12px;justify-self:start;margin:0;padding:6px 16px 6px 6px;border-radius:999px;background:var(--paper);font-size:15px;color:var(--ink-body);box-shadow:0 14px 26px -16px var(--wl-shade)}
.pb-guests b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-avs{display:inline-flex}
.pb-avs i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink);border:2px solid var(--paper);margin-left:-8px}
.pb-avs i:first-child{margin-left:0;background:var(--jade-wash)}
.pb-avs i:nth-child(2){background:var(--bloom-wash)}
.pb-avs i:nth-child(3){background:var(--sky-wash)}
.pb-kind{display:inline-flex;justify-self:start;padding:4px;border-radius:999px;background:var(--base);border:1.5px solid var(--line)}
.pb-kind label{position:relative;cursor:pointer}
.pb-kind input{position:absolute;opacity:0;width:1px;height:1px}
.pb-kind span{display:block;padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-body);transition:background-color .25s,color .25s}
.pb-kind label:hover span{color:var(--ink)}
.pb-kind input:checked+span{background:var(--ink);color:var(--on-ink)}
.pb-kind input:focus-visible+span{outline:3px solid var(--jade);outline-offset:2px}

/* Weg waehlen: schon auf Cupd (beanspruchen) oder noch nicht (bewerben) */
.pb-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:20px;background:var(--base);border:1.5px solid var(--line)}
.pb-mode label{position:relative;cursor:pointer;min-width:0}
.pb-mode input{position:absolute;opacity:0;width:1px;height:1px}
.pb-mode span{display:grid;align-content:start;gap:3px;height:100%;padding:11px 14px 12px;border-radius:16px;transition:background-color .25s,box-shadow .25s}
.pb-mode b{font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.pb-mode small{font-size:12.5px;line-height:1.35;color:var(--ink-muted)}
.pb-mode label:hover span{background:rgba(255,255,255,.55)}
.pb-mode input:checked+span{background:var(--paper);box-shadow:0 0 0 1px var(--line),0 10px 20px -12px rgba(33,31,28,.45)}
.pb-mode input:focus-visible+span{outline:3px solid var(--jade);outline-offset:2px}
/* Texte je Weg: data-for="claim" oder "apply", der jeweils andere ist ausgeblendet */
.pb-sec[data-mode="claim"] [data-for="apply"],.pb-sec[data-mode="apply"] [data-for="claim"]{display:none!important}

/* Suche nach dem eigenen Eintrag: dieselbe Tabelle, die die App durchsucht (nur freigegebene Cafes) */
.pb-find{position:relative;min-width:0;display:grid}
.pb-sug{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);min-width:min(340px,calc(100vw - 72px));padding:6px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 24px 44px -20px rgba(33,31,28,.45);display:grid;gap:2px;max-height:320px;overflow:auto}
.pb-opt{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);background:none;border:0;width:100%}
.pb-opt:hover,.pb-opt.on{background:var(--base)}
.pb-opt .th{width:34px;height:34px;border-radius:10px;background:var(--th,#4A5D53);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.pb-opt b{display:block;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-opt small{display:block;font-size:12.5px;line-height:1.3;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-opt .pl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:4px 8px;border-radius:999px;white-space:nowrap;background:var(--jade-wash);color:var(--jade-deep)}
.pb-opt .pl.off{background:var(--tint,#EFEBE3);color:var(--ink-muted)}
.pb-opt.new{grid-template-columns:34px minmax(0,1fr)}
.pb-opt.new .th{background:var(--bloom-wash);color:var(--bloom-deep);font-size:18px}
.pb-sug .none{padding:10px 12px 4px;font-size:13px;color:var(--ink-muted)}
.pb-hit{margin:-4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px;line-height:1.45;color:var(--ink-body)}
.pb-hit::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jade);flex:none}
.pb-hit.warn::before{background:var(--bloom)}
.pb-hit b{color:var(--ink)}
.pb-hit button{font:inherit;font-weight:800;color:var(--ink);background:none;border:0;padding:0;border-bottom:2px solid currentColor;cursor:pointer}
.pb-beta{font-size:14.5px!important;color:var(--ink-muted)!important}

/* Buehne: dein Laden von vorn. Schild mit deinem Namen, Markise, Schaufenster, Tuer mit Zettel,
   davor der Kundenstopper. Beim Tippen dimmt das Licht hoch und Bohnen fallen in den Trichter. Beim
   Beanspruchen geht das Licht an (mit Rasterpunkten wie auf der Tuete der Gaeste), die Neon-Tasse
   zuendet, der Zettel an der Tuer bekommt den Reserviert-Streifen. Eine Bewerbung fliegt als Brief
   durch den Briefschlitz. Alles in 460 x 470 px gezeichnet, schmale Bildschirme skalieren (--s). */
.pb-stage{position:relative;justify-self:stretch;min-width:0;padding-block:18px 196px;--s:1}
/* immer mittig, auch wenn der Laden breiter ist als die Spalte: dann skaliert er um die Mitte oben */
.pb-rig{position:relative;width:476px;height:470px;scale:var(--s);transform-origin:50% 0;margin:0 calc((100% - 476px) / 2) calc(470px * (var(--s) - 1))}
.pb-shop{position:absolute;left:16px;top:0;width:460px;height:470px;--dim:.64;--lv:.06;--px:0;--py:0}
.pb-body{position:absolute;inset:0}
.pb-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* das Schild: Art und Viertel klein, darunter dein Name, so gross wie es passt */
.pb-fascia{position:absolute;left:62px;top:47px;width:336px;height:56px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;gap:2px;color:#F4F1EA;pointer-events:none}
.pb-kl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:8px;letter-spacing:.26em;text-transform:uppercase;opacity:.62}
.pb-where:not(:empty)::before{content:" · "}
.pb-nbox{position:relative;width:100%;min-height:0;display:grid;place-items:center}
.pb-name{display:block;max-width:100%;font-weight:800;font-size:40px;line-height:.98;letter-spacing:.01em;text-transform:uppercase;text-align:center;text-wrap:balance;color:#FFFDF8;text-shadow:.07em .07em 0 var(--bloom);transition:text-shadow .8s}
.pb-name .wd{display:inline-block;white-space:nowrap}
.pb-name .ch{display:inline-block;white-space:pre}
.pb-name .ch.new{animation:pb-ch .75s var(--wl-spring) both}
@keyframes pb-ch{from{opacity:0;transform:translate3d(0,.35em,0) scale(.3) rotate(-12deg);text-shadow:0 0 0 var(--bloom)}}
/* Platzhalter wie vorgezeichnet: Buchstaben aus Rasterpunkten */
.pb-name.ph{text-shadow:none}
.pb-name.ph .ch{color:transparent;background:radial-gradient(circle,#F4F1EA 44%,transparent 50%) 0 0/3.4px 3.4px;-webkit-background-clip:text;background-clip:text}
.pb-meas{position:absolute!important;left:0;top:0;width:100%;visibility:hidden;pointer-events:none;animation:none!important}
.pb-shop.lit .pb-name:not(.ph){text-shadow:.07em .07em 0 var(--bloom),0 0 22px rgba(255,214,140,.45)}
.pb-ver{position:absolute;left:398px;top:21px;width:30px;height:30px;border-radius:50%;background:var(--jade);display:grid;place-items:center;box-shadow:0 0 0 3px #171513,0 8px 16px -6px rgba(0,0,0,.55);scale:0;rotate:-40deg;transition:scale .6s var(--wl-spring),rotate .6s var(--wl-spring)}
.pb-ver svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pb-sec[data-mode="claim"].pb-on .pb-ver{scale:1;rotate:0deg}
.pb-shop.seq .pb-ver{transition-delay:1.25s}

/* der Zettel an der Tuer, spaeter mit Streifen quer drueber */
.pb-note{position:absolute;left:326px;top:227px;width:72px;height:56px;padding:7px 4px 5px;border-radius:2px;background:#FFFDF7;color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;text-align:center;rotate:-3deg;box-shadow:0 4px 8px -3px rgba(0,0,0,.5)}
.pb-note::before,.pb-note::after{content:"";position:absolute;top:-4px;width:17px;height:8px;background:rgba(236,224,196,.88)}
.pb-note::before{left:-6px;rotate:-38deg}
.pb-note::after{right:-6px;rotate:38deg}
.pb-note>small{font-family:var(--mono);font-size:6.4px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.pb-nt{position:relative;width:100%;min-height:0;display:grid;place-items:center}
.pb-nt b{display:block;max-width:100%;font-weight:800;font-size:13px;line-height:1;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.pb-band{position:absolute;left:-12px;right:-12px;top:19px;height:20px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--jade);color:var(--ink);rotate:-13deg;box-shadow:0 3px 6px -2px rgba(0,0,0,.4);opacity:0;scale:1.6;pointer-events:none}
.pb-band b{font-weight:800;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pb-band small{font-family:var(--mono);font-size:7px;white-space:nowrap}
.pb-sec[data-mode="apply"] .pb-band{background:var(--bloom);color:#fff}
.pb-on .pb-band{opacity:1;scale:1}
.pb-on .pb-band.hold{opacity:0}
.pb-band.slap{animation:pb-slap .65s var(--wl-spring) both}
@keyframes pb-slap{0%{opacity:0;scale:2.6;rotate:-34deg}40%{opacity:1}100%{opacity:1;scale:1;rotate:-13deg}}
.pb-note.thud{animation:pb-thud .5s var(--wl-ease)}
@keyframes pb-thud{30%{translate:0 2px;scale:.96}}

/* Kundenstopper: heute 92 % Taste Match, mit Kreide */
.pb-aframe{position:absolute;left:-14px;top:338px;width:96px;height:124px;rotate:-2deg}
.pb-aframe svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pb-af{position:absolute;left:14px;right:14px;top:22px;display:grid;justify-items:center;gap:4px;color:#F4F1EA;text-align:center;text-shadow:0 0 1px rgba(244,241,234,.5)}
.pb-af small{font-family:var(--mono);font-size:6.3px;letter-spacing:.12em;text-transform:uppercase;opacity:.82;white-space:nowrap}
.pb-af b{font-weight:800;font-size:23px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pb-af b i{font-style:normal;font-size:.55em;margin-left:1px;vertical-align:.5em}
.pb-chalk{stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;transition:stroke-dashoffset .9s var(--wl-ease) 1.4s}
.pb-chalk.s2{transition-delay:2s}
.pb-on .pb-chalk{stroke-dashoffset:0}

/* Licht: gedimmt, beim Tippen etwas heller, beansprucht ganz an */
.pb-dim{opacity:var(--dim);transition:opacity .8s var(--wl-ease)}
.pb-shop.lit .pb-dim{opacity:0}
.pb-light,.pb-spill,.pb-dlit{opacity:0;transition:opacity .9s var(--wl-ease)}
.pb-shop.lit .pb-light,.pb-shop.lit .pb-spill{opacity:1}
/* Lichterkette ums Schild: aus als Punktrahmen, an als Lauflicht */
.pb-bulbs circle{fill:#57524B;transition:fill .25s}
.pb-shop.lit .pb-bulbs{filter:drop-shadow(0 0 2.5px rgba(255,210,122,.9))}
/* an: einmal rundherum, dann Lauflicht */
.pb-shop.lit .pb-bulbs circle{fill:#FFE6A6;transition-delay:calc(var(--i) * 12ms);animation:pb-chase .9s steps(1) infinite;animation-delay:calc(1.4s + var(--i) * .3s)}
@keyframes pb-chase{0%{opacity:1}66.6%{opacity:.28}}
.pb-shop.lit .pb-dlit{opacity:.92}
.pb-rays{mix-blend-mode:screen}
.pb-rays circle{fill:#FFD98A;opacity:0;scale:.1;transform-box:fill-box;transform-origin:center;transition:opacity .35s ease calc(var(--d) * 800ms + 150ms),scale .7s var(--wl-spring) calc(var(--d) * 800ms + 150ms)}
.pb-shop.lit .pb-rays circle{opacity:.58;scale:1}
.pb-dust circle{fill:#FFF3D6;animation:pb-dust 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)}
@keyframes pb-dust{0%,100%{translate:0 0;opacity:.15}50%{translate:3px -9px;opacity:.9}}
.pb-art .bulb{transition:fill .4s}
.pb-shop.lit .bulb{fill:#FFF6DA}

/* Neon-Tasse im Fenster (das Cupd-Zeichen): aus, kurzes Flackern beim Tippen, beansprucht an */
.pb-neon .tube path{stroke-width:3.4}
.pb-neon .core{stroke:#7A8480}
.pb-neon .g1{stroke:#FF4F93;stroke-width:7.5;opacity:0}
.pb-neon .g2{stroke:#FF4F93;stroke-width:15;opacity:0}
.pb-neon .halo{opacity:0;transition:opacity .4s}
.pb-shop.neon .pb-neon .core{stroke:#FFE7F1}
.pb-shop.neon .pb-neon .g1{opacity:.55}
.pb-shop.neon .pb-neon .g2{opacity:.2}
.pb-shop.neon .pb-neon .halo{opacity:1}
.pb-shop.neon .pb-neon{animation:pb-hum 7s steps(1) infinite}
.pb-neon.ignite{animation:pb-ignite 1s linear both!important}
@keyframes pb-ignite{0%{opacity:.15}7%{opacity:1}11%{opacity:.2}19%{opacity:1}23%{opacity:.35}36%,100%{opacity:1}}
@keyframes pb-hum{0%,93%,95%,100%{opacity:1}94%{opacity:.55}96%{opacity:.8}}
.pb-neon.buzz .g1{animation:pb-buzz .32s steps(1)}
@keyframes pb-buzz{0%{opacity:.5}30%{opacity:0}55%{opacity:.35}80%{opacity:0}}

/* das lebt: Markise im Wind, Lampen pendeln, Pflanze, Trommel, Nadeln */
.pb-val .sc{transform-box:fill-box;transform-origin:50% 0;animation:pb-wave 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.32s)}
@keyframes pb-wave{0%,100%{rotate:-4deg;scale:1 1}50%{rotate:4deg;scale:1 1.07}}
.pb-val{transform-box:fill-box;transform-origin:50% 0}
.pb-awn.flap .pb-val{animation:pb-flap .55s var(--wl-ease)}
@keyframes pb-flap{30%{scale:1 1.3}}
.pb-lamp{transform-box:view-box;animation:pb-sway 4.6s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes pb-sway{from{rotate:-2.2deg}to{rotate:2.2deg}}
.pb-plant .lf{transform-box:fill-box;transform-origin:50% 100%;animation:pb-leaf 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.4s)}
@keyframes pb-leaf{from{rotate:-4deg}to{rotate:4deg}}
.pb-tumble{animation:pb-turn 2.6s linear infinite}
@keyframes pb-turn{to{rotate:360deg}}
.pb-gauge .nd{transform-box:view-box;transition:rotate 1.2s var(--wl-spring)}
.pb-shop.lit .pb-gauge .nd{rotate:118deg;animation:pb-needle 2.4s ease-in-out 1.4s infinite alternate;animation-delay:calc(1.4s + var(--dl,0s))}
@keyframes pb-needle{from{rotate:112deg}to{rotate:126deg}}
.pb-in{translate:calc(var(--px) * -5px) calc(var(--py) * -3px);transition:translate .5s var(--wl-ease)}
.pb-refl{translate:calc(var(--px) * 12px) 0;transition:translate .5s var(--wl-ease)}
.pb-shop.lit .pb-refl{opacity:.55}

/* Kaffeebohnen im Trichter: Fuellstand --lv (0 bis 1) */
.pb-pile{translate:0 calc((1 - var(--lv)) * 24px);transition:translate .7s var(--wl-ease)}
.pb-grinder.grind{animation:pb-grind .07s linear 10}
@keyframes pb-grind{50%{translate:.7px 0}}
.pb-shot{scale:1 0;transform-box:fill-box;transform-origin:50% 100%;transition:scale 1.4s var(--wl-ease) 1.6s}
.pb-shop.lit .pb-shot{scale:1 1}

/* Cafe, Roesterei oder beides: was im Fenster steht */
.pb-art .k{transition:opacity .4s var(--wl-ease),translate .6s var(--wl-spring)}
.pb-art .k-roast{opacity:0;translate:0 10px}
.pb-sec[data-kind="roaster"] .k-roast,.pb-sec[data-kind="both"] .k-roast{opacity:1;translate:0 0}
.pb-sec[data-kind="roaster"] .k-grind,.pb-sec[data-kind="roaster"] .k-mach,.pb-sec[data-kind="both"] .k-grind{opacity:0;translate:0 10px}
.pb-roaster{translate:198px 262px;transition:translate .6s var(--wl-spring)}
.pb-sec[data-kind="both"] .pb-roaster{translate:150px 262px}
.pb-sconce .glow{opacity:0;transition:opacity .9s var(--wl-ease)}
.pb-shop.lit .pb-sconce .glow{opacity:1}

/* Tuer: Hausnummer in Blattgold, Briefschlitz */
.pb-no{font-family:var(--sans);font-weight:800;font-size:12.5px;letter-spacing:.06em;fill:#D3A75E}
.pb-slot .flap{transform-box:fill-box;transform-origin:50% 0}
.pb-slot.clack .flap{animation:pb-clack .55s var(--wl-ease)}
@keyframes pb-clack{25%{scale:1 .15}55%{scale:1 1.15}}
.pb-env{position:absolute;left:0;top:0;width:30px;height:20px;border-radius:2px;opacity:0;pointer-events:none;background:#FFFDF7;box-shadow:0 4px 10px -3px rgba(0,0,0,.35)}
.pb-env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 48%,#D9CFBD 49%,#D9CFBD 53%,transparent 54%) 0 0/50% 100% no-repeat,linear-gradient(to bottom left,transparent 48%,#D9CFBD 49%,#D9CFBD 53%,transparent 54%) 100% 0/50% 100% no-repeat}
.pb-body.hop{animation:pb-hop .7s var(--wl-ease)}
@keyframes pb-hop{0%{scale:1 1}18%{scale:1.015 .975}45%{scale:.99 1.02;translate:0 -6px}75%{scale:1.006 .995;translate:0 0}100%{scale:1 1}}
.pb-body{transform-origin:50% 100%}
.pb-shop.idle,.pb-shop.idle *,.pb-shop.idle *::before{animation-play-state:paused!important}

/* was im Business-Tab steckt: Aufkleber unten rechts */
.pb-feat{position:absolute;z-index:6;left:calc(50% + 238px * var(--s) - 238px);top:calc(18px + 446px * var(--s));width:238px;padding:15px 17px 17px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow-sticker,0 16px 32px -12px rgba(42,36,24,.3));display:grid;gap:10px;rotate:2deg}
.pb-feat .cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--jade-deep);text-transform:uppercase}
.pb-feat .row{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:10px;align-items:center}
.pb-feat .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--tint,#EFEBE3);color:var(--ink)}
.pb-feat .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb-feat b{display:block;font-size:13.5px;line-height:1.2}
.pb-feat small{display:block;font-size:11.5px;line-height:1.3;color:var(--ink-muted)}
.pb-feat .ok{width:18px;height:18px;border-radius:50%;background:var(--jade);display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--wl-spring);transition-delay:calc(var(--i,0) * 140ms + .5s)}
.pb-sec.pb-seq .pb-feat .ok{transition-delay:calc(var(--i,0) * 150ms + 1.6s)}
.pb-feat .ok svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pb-sec[data-mode="claim"].pb-on .pb-feat .ok{transform:none}

/* ---------- Breiten ---------- */
@media(max-width:900px){
  .wl-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .wl-sec .h2{max-width:none}
  .wl-card{max-width:none}
  .wl,.wl-stage{display:contents}
  /* Handy: Formular oben, darunter die Buehne, alles etwas knapper, damit beides zusammen auf den Bildschirm
     passt, sobald die Tastatur zu ist. Die Tuete auf 66 %, der Laden auf 80 % der Breite (scaleShop) */
  .wl-card{order:2;padding:16px}
  .wl-bag{order:3;justify-self:center;scale:.66;transform-origin:50% 0;margin:-8px 0 calc(496px * -.34)}
  .wl-biz{order:4}
  .wl-form,.wl-fields{gap:10px}
  .wl-f input{height:46px}
  .wl-beta{padding:10px 12px;gap:10px}
  .wl-beta .t{font-size:13.5px;line-height:1.4}
  .wl-note{font-size:11px;line-height:1.45}
  /* Cafes: Formular, darunter der Laden, darunter die Funktionen */
  .pb{display:contents}
  .pb-sec .wl-card{order:2}
  .pb-stage{order:3;padding-block:4px 0}
  .pb-feat{position:relative;left:auto;top:auto;margin:6px auto 0;rotate:1.5deg}
  .pb-mode span{padding:8px 11px 9px}
  .pb-mode small{font-size:11.5px}
  .pb-kind span{padding:7px 12px;font-size:13px}
}
@media(max-width:640px){
  .wl-fields,.pb-sec .wl-fields{grid-template-columns:minmax(0,1fr)}
  .wl-beta{grid-template-columns:auto minmax(0,1fr);padding:10px 12px}
  .wl-left{grid-column:1/-1;justify-self:start;display:flex;gap:6px;align-items:baseline;padding:8px 0 0;border-left:0;border-top:1.5px solid var(--line);width:100%}
  .wl-left b{font-size:16px}
  .pb-kind span{padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .wl-eye::before,.wl-done.in>*{animation:none}
  .pb-ver,.pb-feat .ok{transition:none}
  .pb-shop *,.pb-shop *::before,.pb-shop *::after{animation:none!important;transition:none!important}
  .wl-bag .ch.new,.wl-breath,.wl-core.bump,.wl-core.pop,.wl-seal.hit,.wl-badge.hit,.wl-badge-ring,.wl-pouch.squish,.wl-pouch.drop,.wl-pouch.hop,.wl-notes .flip{animation:none}
  .wl-seal,.wl-name,.wl-bag .wl-pouch,.wl-core .spoon{transition:none}
}