/*
 * helloheidi.me - Trinkgeld & Zahlung (Pakete 1011-1912 und 1011-2312-trinkgeld-redesign, A-20261011-24/-30).
 * Uebernommen aus referenz/trinkgeld.css; nur die Vorschau-Teile (Chat-Platzhalter, Finger, "Trinkgeld geben") sind weg,
 * dazu: fester Platz ueber der Seite, mittige Karte auf breiten Bildschirmen, echter QR-Code als Bild.
 * Schriften: die im Projekt eingebetteten Manrope/Sacramento (styles.css), nichts von aussen.
 */
.tg-wurzel{
  --bg:#F7F6F4;--surface:#FFFFFF;--text:#2F2A2A;--muted:#6A6260;--line:#E9E6E2;
  --accent:#9E3A49;--rose:#C97B86;--btn:#9E3A49;--btn-hi:#AD4656;--on-btn:#FFFFFF;
  --tint:rgba(158,58,73,.07);--ok:#2E7558;--on-ok:#FFFFFF;--scrim:rgba(47,42,42,.44);
  --up:6px 6px 16px rgba(47,42,42,.08),-6px -6px 16px rgba(255,255,255,.95);
  --up-sm:3px 3px 9px rgba(47,42,42,.08),-3px -3px 9px rgba(255,255,255,.95);
  --in:inset 2px 2px 5px rgba(47,42,42,.10),inset -2px -2px 5px rgba(255,255,255,.95);
  -webkit-font-smoothing:antialiased;
}
.tg-wurzel.tg-dunkel{
  --bg:#26282C;--surface:#2E3035;--text:#F1ECE6;--muted:#B5AEA7;--line:#3B3E44;
  --accent:#D08A94;--rose:#D08A94;--btn:#A84452;--btn-hi:#B85362;--on-btn:#FFFFFF;
  --tint:rgba(208,138,148,.11);--ok:#86C9A8;--on-ok:#1C2A23;--scrim:rgba(10,11,13,.6);
  --up:6px 6px 16px rgba(0,0,0,.34),-5px -5px 14px rgba(255,255,255,.035);
  --up-sm:3px 3px 9px rgba(0,0,0,.32),-3px -3px 8px rgba(255,255,255,.035);
  --in:inset 2px 2px 6px rgba(0,0,0,.42),inset -2px -2px 5px rgba(255,255,255,.04);
}
.tg-wurzel *{box-sizing:border-box}
.tg-wurzel [hidden]{display:none!important}
:where(.tg-wurzel) button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tg-wurzel button:focus-visible,.tg-wurzel a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tg-ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}



/* Fester Platz ueber der Seite */
.tg-wurzel{position:fixed;inset:0;z-index:80;font-family:'Manrope',system-ui,sans-serif;color:var(--text)}
.tg-scrim{position:absolute;inset:0;background:var(--scrim);animation:tg-fade .45s ease both;transition:opacity .4s ease}
.tg-scrim.is-closed{opacity:0;pointer-events:none}

/* Das Blatt */
.tg-sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 28px);margin:0 auto;max-width:560px;padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:var(--bg);border-radius:30px 30px 0 0;box-shadow:0 -14px 44px -18px rgba(0,0,0,.28);animation:tg-sheet-in .7s cubic-bezier(.2,1.05,.3,1) both;transition:height .46s cubic-bezier(.3,1.1,.35,1),transform .5s cubic-bezier(.4,0,.2,1)}
.tg-sheet::-webkit-scrollbar{display:none}
.tg-sheet.is-closed{transform:translateY(104%)}
.tg-grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto;animation:tg-nudge .9s .55s cubic-bezier(.3,1.4,.5,1) both}
.tg-round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg);box-shadow:var(--up-sm);transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s}
.tg-round:active{transform:scale(.88);box-shadow:var(--in)}
.tg-round.is-close:hover svg,.tg-round.is-close:active svg{transform:rotate(90deg)}
.tg-round.is-back:hover svg,.tg-round.is-back:active svg{transform:translateX(-3px)}
.tg-round svg{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}

/* Seitenwechsel: Inhalt kommt gestaffelt herein */
.tg-screen{--dx:54px;display:flex;flex-direction:column}
.tg-screen.tg-from-left{--dx:-54px}
.tg-screen>*{animation:tg-enter .55s cubic-bezier(.2,.9,.25,1) both}
.tg-screen>*:nth-child(2){animation-delay:.06s}
.tg-screen>*:nth-child(3){animation-delay:.12s}
.tg-screen>*:nth-child(4){animation-delay:.18s}
.tg-screen>*:nth-child(5){animation-delay:.24s}
.tg-screen>*:nth-child(6){animation-delay:.3s}
.tg-screen>*:nth-child(7){animation-delay:.36s}
.tg-screen>*:nth-child(n+8){animation-delay:.42s}
.tg-panel{animation:tg-rise .4s cubic-bezier(.2,.9,.25,1) both}
.tg-panel.from-r{animation:tg-from-r .5s cubic-bezier(.2,1.05,.3,1) both}
.tg-panel.from-l{animation:tg-from-l .5s cubic-bezier(.2,1.05,.3,1) both}

/* Tipp-Welle auf allem, was man antippt */
.tg-rip{position:relative;overflow:hidden}
.tg-rip::before{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}
.tg-rip[data-rip="a"]::before{animation:tg-rip-a .65s cubic-bezier(.2,.7,.3,1)}
.tg-rip[data-rip="b"]::before{animation:tg-rip-b .65s cubic-bezier(.2,.7,.3,1)}

/* Betrag: Leuchten, Zählwerk, Herzen, Handschrift */
.tg-glow{position:absolute;left:50%;top:0;width:240px;height:140px;margin-left:-120px;border-radius:50%;background:radial-gradient(closest-side,var(--accent),transparent);filter:blur(20px);opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .7s,transform .8s cubic-bezier(.3,1.3,.5,1);animation:tg-breathe 3.8s ease-in-out infinite}
.tg-glow.t1{opacity:.10;transform:scale(.75)}
.tg-glow.t2{opacity:.15;transform:scale(.92)}
.tg-glow.t3{opacity:.21;transform:scale(1.08)}
.tg-glow.t4{opacity:.28;transform:scale(1.28)}
.tg-num{position:relative;display:inline-block;color:var(--muted);opacity:.5;font-variant-numeric:tabular-nums;transition:color .35s,opacity .35s}
.tg-num.is-set{color:var(--text);opacity:1}
.tg-odo{display:inline-flex;align-items:flex-start;line-height:1}
.tg-slot{display:inline-block;height:1em;width:0;opacity:0;overflow:hidden;transition:width .42s cubic-bezier(.3,1.2,.5,1),opacity .3s}
.tg-slot.is-on{width:1ch;margin:0 -.028em;opacity:1}
.tg-strip{display:block;line-height:1;text-align:center;transition:transform .7s cubic-bezier(.2,1.2,.3,1)}
.tg-slot:nth-last-child(2) .tg-strip{transition-delay:.05s}
.tg-slot:nth-last-child(3) .tg-strip{transition-delay:.1s}
.tg-slot:nth-last-child(4) .tg-strip{transition-delay:.15s}
.tg-hearts{position:absolute;left:50%;top:48px;width:0;height:0;pointer-events:none}
.tg-pf{position:absolute;left:-10px;top:-10px;width:20px;height:20px;fill:var(--accent);opacity:0}
.tg-hearts.go-a .tg-pf{animation:tg-burst 1.15s var(--d,0s) cubic-bezier(.15,.8,.3,1) both}
.tg-hearts.go-b .tg-pf{animation:tg-burst-b 1.15s var(--d,0s) cubic-bezier(.15,.8,.3,1) both}
.tg-pf:nth-child(1){--x:92px;--y:-34px;--s:1.1;--r:14deg}
.tg-pf:nth-child(2){--x:-96px;--y:-26px;--s:.9;--r:-16deg;--d:.05s}
.tg-pf:nth-child(3){--x:70px;--y:-62px;--s:.7;--r:22deg;--d:.09s}
.tg-pf:nth-child(4){--x:-66px;--y:-64px;--s:.8;--r:-10deg;--d:.12s}
.tg-pf:nth-child(5){--x:118px;--y:6px;--s:.6;--r:28deg;--d:.15s}
.tg-pf:nth-child(6){--x:-122px;--y:10px;--s:.65;--r:-24deg;--d:.18s}
.tg-pf:nth-child(7){--x:4px;--y:-84px;--s:1;--r:6deg;--d:.07s}
.tg-hearts.t0 .tg-pf,.tg-hearts.t1 .tg-pf:nth-child(n+2),.tg-hearts.t2 .tg-pf:nth-child(n+3),.tg-hearts.t3 .tg-pf:nth-child(n+5){display:none}
.tg-sub{transition:color .25s}
.tg-sub.is-need{color:var(--accent);font-weight:700}
.tg-chips{position:relative}
.tg-pill{position:absolute;left:0;top:0;bottom:0;z-index:1;width:calc((100% - 30px) / 4);border-radius:17px;background:var(--btn);box-shadow:0 12px 22px -10px var(--btn);opacity:0;transform:translateX(0);pointer-events:none;transition:transform .55s cubic-bezier(.3,1.4,.4,1),opacity .25s}
.tg-pill.p0,.tg-pill.p1,.tg-pill.p2,.tg-pill.p3{opacity:1}
.tg-pill.p1{transform:translateX(calc(100% + 10px))}
.tg-pill.p2{transform:translateX(calc(200% + 20px))}
.tg-pill.p3{transform:translateX(calc(300% + 30px))}
.tg-pill.mv-a{animation:tg-squash-a .55s ease}
.tg-pill.mv-b{animation:tg-squash-b .55s ease}
.tg-chip{height:54px;border-radius:17px;background:var(--bg);box-shadow:var(--up-sm);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .22s}
.tg-chip>span{position:relative;z-index:2;display:inline-block;transition:color .3s}
.tg-chip:hover{transform:translateY(-2px)}
.tg-chip:active{transform:scale(.92);box-shadow:var(--in)}
.tg-chip.is-on,.tg-chip.is-on:hover,.tg-chip.is-on:active{transform:none;box-shadow:var(--up-sm)}
.tg-chip.is-on>span{color:var(--on-btn);animation:tg-labelpop .5s cubic-bezier(.3,1.5,.5,1)}
.tg-num.bump-a{animation:tg-bump-a .5s cubic-bezier(.3,1.5,.5,1)}
.tg-num.bump-b{animation:tg-bump-b .5s cubic-bezier(.3,1.5,.5,1)}
.tg-odo>span{display:inline-block}
.tg-fcur{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:var(--up-sm);color:var(--muted);font-size:17px;font-weight:800;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.tg-fcur>span{display:block;line-height:1}
.tg-fcur::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none}
.tg-fcur:active{box-shadow:var(--in);scale:.86}
.tg-field:focus-within .tg-fcur,.tg-field.is-filled .tg-fcur{background:var(--btn);color:var(--on-btn);box-shadow:0 8px 16px -8px var(--btn)}
.tg-field.is-idle:not(:focus-within) .tg-fcur::after{animation:tg-fidle 3.6s 1.4s ease-out infinite}
.tg-fcur.pop-a{animation:tg-fpop-a .65s cubic-bezier(.3,1.5,.5,1)}
.tg-fcur.pop-b{animation:tg-fpop-b .65s cubic-bezier(.3,1.5,.5,1)}
.tg-fcur.pop-a::after{animation:tg-fring-a .75s ease-out}
.tg-fcur.pop-b::after{animation:tg-fring-b .75s ease-out}
.tg-fcur.roll-a{animation:tg-fnudge-a .4s cubic-bezier(.3,1.5,.5,1)}
.tg-fcur.roll-b{animation:tg-fnudge-b .4s cubic-bezier(.3,1.5,.5,1)}
.tg-fcur.roll-a>span{animation:tg-froll-a .4s cubic-bezier(.4,0,.2,1)}
.tg-fcur.roll-b>span{animation:tg-froll-b .4s cubic-bezier(.4,0,.2,1)}
.tg-field{display:flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 10px;border-radius:17px;background:var(--bg);box-shadow:var(--in);transition:box-shadow .3s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.tg-field:focus-within{box-shadow:var(--in),0 0 0 2px var(--accent),0 0 0 7px var(--tint);transform:scale(1.012)}
.tg-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-weight:800;font-size:17px;color:var(--text)}
.tg-field input::placeholder{color:var(--muted);font-weight:500}

/* Zahlungsart */
.tg-method{width:100%;display:flex;align-items:center;gap:14px;min-height:70px;padding:12px 16px 12px 12px;border-radius:21px;background:var(--surface);box-shadow:var(--up-sm);text-align:left;color:var(--text);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,opacity .35s}
.tg-method:hover{transform:translateY(-3px);box-shadow:var(--up)}
.tg-method:active{transform:scale(.97)}
.tg-open>*{animation:tg-slideup .6s cubic-bezier(.2,1.1,.3,1) both}
.tg-open>*:nth-child(2){animation-delay:.08s}
.tg-open>*:nth-child(3){animation-delay:.16s}
.tg-badge{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none;color:var(--accent);background:var(--tint);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tg-method:hover .tg-badge,.tg-method:active .tg-badge{transform:rotate(-8deg) scale(1.1)}
.tg-method.is-busy .tg-badge{animation:tg-beat .7s ease-in-out infinite}
/* Übersicht Krypto / Bank */
.tg-coins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tg-coin{display:flex;align-items:center;gap:10px;min-height:74px;padding:10px 12px;border-radius:19px;background:var(--surface);box-shadow:var(--up-sm);text-align:left;color:var(--text);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;animation:tg-tile .5s cubic-bezier(.2,1.1,.3,1) backwards}
.tg-coin:nth-child(2){animation-delay:.06s}
.tg-coin:nth-child(3){animation-delay:.12s}
.tg-coin:nth-child(4){animation-delay:.18s}
.tg-coin:hover{transform:translateY(-3px);box-shadow:var(--up)}
.tg-coin:active{transform:scale(.95)}
.tg-coin .tg-badge{width:40px;height:40px;border-radius:50%}
.tg-coin:hover .tg-badge,.tg-coin:active .tg-badge{transform:rotate(-8deg) scale(1.1)}
.tg-coin .tg-spin{position:absolute;right:11px;top:11px;width:16px;height:16px;border-width:2px;color:var(--accent)}
.tg-coin.is-busy .tg-badge{animation:tg-beat .7s ease-in-out infinite}
.tg-net{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:var(--tint);color:var(--accent);font-weight:700;font-size:12.5px;white-space:nowrap}
.tg-chev{color:var(--muted);transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.tg-method:hover .tg-chev{transform:translateX(5px)}
.tg-method .tg-spin{position:absolute;right:18px;top:50%;margin-top:-10px;color:var(--accent)}
.tg-method.is-busy .tg-chev{opacity:0}
.tg-spin{display:block;width:20px;height:20px;border-radius:50%;border:2.4px solid currentColor;border-right-color:transparent;opacity:0;transition:opacity .2s;animation:tg-spin .7s linear infinite}
.is-busy .tg-spin{opacity:1}

/* Knöpfe */
.tg-btn{width:100%;min-height:56px;padding:0 18px;border-radius:19px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--btn);color:var(--on-btn);font-weight:800;font-size:16px;box-shadow:0 14px 26px -14px var(--btn);margin:0 auto;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .2s,box-shadow .2s,width .45s cubic-bezier(.5,0,.2,1),padding .45s,border-radius .45s}
.tg-btn:hover{background:var(--btn-hi);transform:translateY(-1px)}
.tg-btn:active{transform:scale(.965)}
.tg-btn.is-ghost{background:var(--bg);color:var(--text);box-shadow:var(--up-sm)}
.tg-btn.is-ghost:hover{background:var(--bg);box-shadow:var(--up)}
.tg-btn.is-ghost:active{box-shadow:var(--in)}
.tg-btn{white-space:nowrap}
.tg-btn>span,.tg-btn>svg{transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.tg-btn.is-busy>span,.tg-btn.is-busy>svg{opacity:0;transform:translateY(10px) scale(.9)}
.tg-btn .tg-spin{position:absolute}
.tg-btn.is-busy{width:56px;padding:0;border-radius:28px}
.tg-btn.is-shine::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);pointer-events:none;animation:tg-sheen 3.6s .6s ease-out infinite}
.tg-btn.is-shine svg{animation:tg-tilt 3.6s .6s ease-in-out infinite}
.tg-btn.is-done,.tg-btn.is-ghost.is-done,.tg-btn.is-ghost.is-done:hover{background:var(--ok);color:var(--on-ok);box-shadow:none;animation:tg-jelly .5s cubic-bezier(.3,1.4,.5,1)}
.tg-link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:700;font-size:14.5px;color:var(--accent);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1.5px;background-position:10px calc(50% + 12px);transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.tg-link:hover,.tg-link:active{background-size:calc(100% - 20px) 1.5px}
.tg-link.is-quiet{color:var(--muted)}

/* Warten, Ablaufzeit */
.tg-wait{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--muted)}
.tg-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tg-dot::before,.tg-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:tg-pulse 2s ease-out infinite}
.tg-dot::after{animation-delay:1s}
.tg-seek{position:relative;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.tg-seek::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:tg-seek 1.9s cubic-bezier(.5,0,.5,1) infinite}
.tg-timer{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 9px;border-radius:18px;background:var(--bg);box-shadow:var(--up-sm);font-weight:800;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.tg-timer svg{transform:rotate(-90deg)}
.tg-timer circle{fill:none;stroke-width:2.6}
.tg-timer .t-bg{stroke:var(--line)}
.tg-timer .t-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:56.55;transition:stroke-dashoffset 1s linear}
.tg-timer .tg-strip{transition:transform .45s cubic-bezier(.3,1.3,.4,1);transition-delay:0s}

/* Umschalter */
.tg-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;background:var(--bg);box-shadow:var(--in)}
.tg-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:12px;background:var(--surface);box-shadow:var(--up-sm);transition:transform .45s cubic-bezier(.3,1.35,.45,1);animation:tg-squash-a .45s ease}
.tg-seg.is-b .tg-seg-thumb{transform:translateX(100%);animation:tg-squash-b .45s ease}
.tg-seg button{position:relative;height:44px;font-weight:700;font-size:14.5px;color:var(--muted);transition:color .25s,transform .2s}
.tg-seg button:active{transform:scale(.95)}
.tg-seg button[aria-pressed="true"]{color:var(--text)}

/* Datenzeilen mit Kopieren */
.tg-card{border-radius:21px;background:var(--surface);box-shadow:var(--up-sm);overflow:hidden}
.tg-row{display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 10px 8px 16px;border-top:1px solid var(--line);transition:background .45s}
.tg-row:first-child{border-top:0}
.tg-row.is-copied{background:var(--tint)}
.tg-copy{position:relative;width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;color:var(--accent);background:var(--bg);box-shadow:var(--up-sm);transition:transform .18s cubic-bezier(.3,1.5,.5,1),box-shadow .2s,background .3s,color .3s}
.tg-copy:hover{transform:translateY(-1px)}
.tg-copy:active{transform:scale(.86);box-shadow:var(--in)}
.tg-copy svg{grid-area:1/1;transition:opacity .2s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.tg-copy .i-ok{opacity:0;transform:scale(.3) rotate(-50deg)}
.tg-copy::after{content:"Kopiert";position:absolute;right:calc(100% + 8px);top:50%;padding:5px 10px;border-radius:10px;background:var(--text);color:var(--bg);font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transform:translate(10px,-50%) scale(.8);transform-origin:100% 50%;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.is-copied .tg-copy{background:var(--ok);color:var(--on-ok);box-shadow:none}
.is-copied .tg-copy .i-copy{opacity:0;transform:scale(.3)}
.is-copied .tg-copy .i-ok{opacity:1;transform:none}
.is-copied .tg-copy::after{opacity:1;transform:translate(0,-50%)}

/* QR-Code: immer dunkel auf Weiß, damit er scannbar bleibt */
.tg-qr{position:relative;width:158px;height:158px;padding:12px;border-radius:20px;background:#FFFFFF;color:#2F2A2A;overflow:hidden;animation:tg-jelly .6s cubic-bezier(.3,1.3,.5,1) both}
.tg-qr svg,.tg-qr img{display:block;width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges;image-rendering:pixelated;animation:tg-iris .8s .1s cubic-bezier(.3,.9,.3,1) both}
.tg-qr::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(158,58,73,.22),transparent);animation:tg-scan 3.4s .7s cubic-bezier(.4,0,.2,1) infinite}

/* Danke und Fehler */
.tg-veil{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:30px 30px 0 0}
.tg-veil span{position:absolute;left:50%;top:150px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--accent);opacity:0;animation:tg-reveal 1s cubic-bezier(.2,.7,.3,1) both}
.tg-seal{position:relative;width:96px;height:96px;animation:tg-jelly .7s .75s cubic-bezier(.3,1.4,.5,1)}
.tg-seal>svg{width:96px;height:96px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tg-seal .s-ring{stroke:var(--ok);stroke-width:3;stroke-dasharray:252;stroke-dashoffset:252;transform:rotate(-90deg);transform-origin:50% 50%;animation:tg-draw .7s .15s cubic-bezier(.5,0,.2,1) forwards}
.tg-seal .s-tick{stroke:var(--ok);stroke-width:4;stroke-dasharray:48;stroke-dashoffset:48;animation:tg-draw .4s .7s cubic-bezier(.3,.9,.3,1) forwards}
.tg-fire{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.tg-fire svg{position:absolute;left:-10px;top:-10px;width:20px;height:20px;fill:var(--accent);opacity:0;animation:tg-burst 1.7s var(--d,.85s) cubic-bezier(.15,.8,.3,1) both}
.tg-fire svg:nth-child(1){--x:-70px;--y:-52px;--s:1.15;--r:-18deg;--d:.85s}
.tg-fire svg:nth-child(2){--x:74px;--y:-58px;--s:.95;--r:16deg;--d:.9s}
.tg-fire svg:nth-child(3){--x:-96px;--y:6px;--s:.7;--r:-8deg;--d:.96s}
.tg-fire svg:nth-child(4){--x:98px;--y:2px;--s:.8;--r:12deg;--d:1s}
.tg-fire svg:nth-child(5){--x:6px;--y:-92px;--s:.85;--r:6deg;--d:.92s}
.tg-fire svg:nth-child(6){--x:-40px;--y:-88px;--s:.6;--r:-22deg;--d:1.05s}
.tg-fire svg:nth-child(7){--x:44px;--y:-90px;--s:.65;--r:24deg;--d:1.1s}
.tg-fire svg:nth-child(8){--x:-118px;--y:-36px;--s:.55;--r:-30deg;--d:1.14s}
.tg-fire svg:nth-child(9){--x:120px;--y:-40px;--s:.6;--r:30deg;--d:1.18s}
.tg-fire svg:nth-child(10){--x:0px;--y:-126px;--s:.5;--r:0deg;--d:1.22s}
.tg-wurzel .tg-screen .tg-hand{font-family:'Sacramento',cursive;font-weight:400;color:var(--accent);animation:tg-write-a 1s .8s cubic-bezier(.4,0,.2,1) both}
.tg-oops{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--tint);animation:tg-wobble .8s .25s cubic-bezier(.36,.07,.19,.97) both}

@keyframes tg-fade{from{opacity:0}to{opacity:1}}
@keyframes tg-sheet-in{from{transform:translateY(42%);opacity:0}to{transform:none;opacity:1}}
@keyframes tg-nudge{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.6)}}
@keyframes tg-enter{from{opacity:0;transform:translate(var(--dx),8px)}to{opacity:1;transform:none}}
@keyframes tg-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tg-jelly{0%{transform:scale(.9)}35%{transform:scale(1.08,.96)}60%{transform:scale(.98,1.03)}100%{transform:scale(1)}}
@keyframes tg-slideup{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tg-fpop-a{0%{transform:scale(.8) rotate(-18deg)}45%{transform:scale(1.24) rotate(9deg)}75%{transform:scale(.96) rotate(-3deg)}100%{transform:none}}
@keyframes tg-fpop-b{0%{transform:scale(.8) rotate(-18deg)}45%{transform:scale(1.24) rotate(9deg)}75%{transform:scale(.96) rotate(-3deg)}100%{transform:none}}
@keyframes tg-fring-a{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
@keyframes tg-fring-b{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
@keyframes tg-fnudge-a{0%,100%{transform:none}40%{transform:scale(1.12)}}
@keyframes tg-fnudge-b{0%,100%{transform:none}40%{transform:scale(1.12)}}
@keyframes tg-froll-a{0%{transform:translateY(0);opacity:1}45%{transform:translateY(120%);opacity:0}46%{transform:translateY(-120%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes tg-froll-b{0%{transform:translateY(0);opacity:1}45%{transform:translateY(120%);opacity:0}46%{transform:translateY(-120%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes tg-fidle{0%{opacity:.4;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.8)}}
@keyframes tg-tile{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes tg-from-r{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes tg-from-l{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes tg-labelpop{0%{scale:1}45%{scale:1.2}100%{scale:1}}
@keyframes tg-bump-a{0%{scale:1}40%{scale:1.1}100%{scale:1}}
@keyframes tg-bump-b{0%{scale:1}40%{scale:1.1}100%{scale:1}}
@keyframes tg-tap-a{0%{scale:1}45%{scale:.6}100%{scale:1}}
@keyframes tg-tap-b{0%{scale:1}45%{scale:.6}100%{scale:1}}
@keyframes tg-breathe{0%,100%{scale:1}50%{scale:1.1}}
@keyframes tg-burst{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s,1)) rotate(var(--r,0deg))}}
@keyframes tg-burst-b{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s,1)) rotate(var(--r,0deg))}}
@keyframes tg-write-a{from{clip-path:inset(-30% 105% -30% -5%);opacity:.4}to{clip-path:inset(-30% -5% -30% -5%);opacity:1}}
@keyframes tg-rip-a{from{opacity:.24;transform:scale(0)}to{opacity:0;transform:scale(36)}}
@keyframes tg-rip-b{from{opacity:.24;transform:scale(0)}to{opacity:0;transform:scale(36)}}
@keyframes tg-pulse{from{transform:scale(1);opacity:.5}to{transform:scale(3.4);opacity:0}}
@keyframes tg-seek{from{left:-34%}to{left:100%}}
@keyframes tg-spin{to{transform:rotate(360deg)}}
@keyframes tg-sheen{0%{left:-40%}30%,100%{left:125%}}
@keyframes tg-tilt{0%,30%,100%{transform:none}10%{transform:rotate(-12deg) scale(1.12)}20%{transform:rotate(6deg)}}
@keyframes tg-squash-a{0%,100%{scale:1}45%{scale:1.14 .9}}
@keyframes tg-squash-b{0%,100%{scale:1}45%{scale:1.14 .9}}
@keyframes tg-iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes tg-scan{0%{top:-30%}45%,100%{top:100%}}
@keyframes tg-draw{to{stroke-dashoffset:0}}
@keyframes tg-reveal{0%{opacity:.3;transform:scale(0)}100%{opacity:0;transform:scale(26)}}
@keyframes tg-wobble{0%,100%{transform:none}20%{transform:rotate(-10deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
@keyframes tg-beat{0%,100%{transform:scale(1)}18%{transform:scale(1.18)}36%{transform:scale(1)}}

/* Breite Bildschirme: mittige Karte, alle Ecken rund, sanftes Einblenden mit leichtem Hochrutschen */
@media (min-width:640px){
  .tg-sheet{top:50%;bottom:auto;max-width:420px;max-height:calc(100% - 48px);border-radius:30px;transform:translateY(-50%);box-shadow:0 24px 60px -20px rgba(0,0,0,.35);animation:tg-card-in .5s cubic-bezier(.2,.9,.3,1) both}
  .tg-sheet.is-closed{transform:translateY(-46%);opacity:0;transition:transform .4s,opacity .3s}
  .tg-grab{display:none}
  .tg-veil{border-radius:30px}
}
@keyframes tg-card-in{from{opacity:0;transform:translateY(-46%)}to{opacity:1;transform:translateY(-50%)}}
/* Text, der kopiert werden kann, wenn die Zwischenablage gesperrt ist */
.tg-ersatz{width:100%;font:inherit;font-size:14px;padding:10px;border-radius:14px;border:0;background:var(--bg);box-shadow:var(--in);color:var(--text)}
.tg-hinweis{margin:12px 4px 0;padding:10px 14px;border-radius:16px;background:var(--tint);font-size:13.5px;font-weight:600;line-height:1.5;color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .tg-wurzel *,.tg-wurzel *::before,.tg-wurzel *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}