/* Treueprogramm: Tablet am Tresen bestaetigt den Besuch mit PIN, am Handy steigen Punkte und Stufe. Takt 12 s */
.tr-szene{order:2;position:relative;width:min(100%,960px);margin-top:clamp(36px,4.5vw,60px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,56px);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.tr-szene *{text-align:left}

/* Tablet */
.tr-tablet{container-type:inline-size;width:52%;padding:clamp(8px,1vw,14px);border-radius:clamp(18px,2vw,28px);background:linear-gradient(145deg,#3C3C3C,#151515 40%,#0C0C0C);box-shadow:0 0 0 1px #4A4A4A,inset 0 1px 0 rgba(255,255,255,.18),0 60px 120px -50px rgba(0,0,0,.95),0 40px 90px -40px rgba(224,36,107,.4)}
.tr-tab-screen{--m:#B8661E;position:relative;aspect-ratio:4/3;border-radius:clamp(10px,1.2vw,16px);overflow:hidden;background:#F6F1EA;color:#2A2420;padding:5cqw 6cqw;display:flex;flex-direction:column;align-items:center}
.tr-k{align-self:stretch;display:flex;justify-content:space-between;margin:0;font-size:2.6cqw;color:#7A6E66}
.tr-k b{color:#2A2420;font-family:Georgia,serif;font-size:3.4cqw}
.tr-titel{color:#2A2420;margin:4cqw 0 3cqw;font-size:4.6cqw;font-weight:800;text-align:center!important}
.tr-mitglied{align-self:stretch;display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 .6cqw 2cqw rgba(60,40,20,.1)}
.tr-mitglied i{display:grid;place-items:center;width:7cqw;aspect-ratio:1;border-radius:50%;background:#34405E;color:#fff;font-style:normal;font-weight:800;font-size:3cqw}
.tr-mitglied b{display:block;font-size:3.2cqw}
.tr-mitglied span{font-size:2.5cqw;color:#7A6E66}
.tr-mitglied > div{flex:1}
.tr-mitglied em{font-style:normal;font-weight:800;font-size:3.6cqw;color:var(--m);opacity:0;animation:tr-plus 12s infinite}
@keyframes tr-plus{0%,26%{opacity:0;transform:translateY(40%)}29%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
.tr-pin-l{margin:3.6cqw 0 1.6cqw;font-size:2.4cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A6E66}
.tr-pin{display:flex;gap:2.6cqw}
.tr-pin i{width:3.4cqw;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 .4cqw #C9BFB5;animation:tr-pin 12s infinite}
.tr-pin i:nth-child(2){animation-name:tr-pin2}.tr-pin i:nth-child(3){animation-name:tr-pin3}.tr-pin i:nth-child(4){animation-name:tr-pin4}
@keyframes tr-pin{0%,7%{background:transparent}8%,94%{background:#2A2420;box-shadow:none}100%{background:transparent}}
@keyframes tr-pin2{0%,11%{background:transparent}12%,94%{background:#2A2420;box-shadow:none}100%{background:transparent}}
@keyframes tr-pin3{0%,15%{background:transparent}16%,94%{background:#2A2420;box-shadow:none}100%{background:transparent}}
@keyframes tr-pin4{0%,19%{background:transparent}20%,94%{background:#2A2420;box-shadow:none}100%{background:transparent}}
.tr-ok{margin-top:4cqw;padding:2cqw 8cqw;border-radius:999px;background:var(--m);color:#fff;font-size:3cqw;font-weight:800;animation:tr-ok 12s infinite}
@keyframes tr-ok{0%,22%{transform:none;opacity:.55}23%{opacity:1}24.5%{transform:scale(.9)}26%,100%{transform:none;opacity:1}}
.tr-gebucht{position:absolute;left:6cqw;right:6cqw;bottom:4cqw;margin:0;padding:2cqw;border-radius:2cqw;background:#E7F4EC;color:#1E6B3E;font-size:3cqw;font-weight:800;text-align:center!important;opacity:0;animation:tr-gebucht 12s infinite}
@keyframes tr-gebucht{0%,26%{opacity:0;transform:translateY(30%)}29%,92%{opacity:1;transform:none}96%,100%{opacity:0}}

/* Handy mit Mitgliedskarte */
.tr-handy{container-type:inline-size;width:26%;padding:clamp(6px,.7vw,10px);border-radius:clamp(30px,3.4vw,46px);background:linear-gradient(145deg,#3C3C3C,#151515 40%,#0C0C0C);box-shadow:0 0 0 1px #4A4A4A,inset 0 1px 0 rgba(255,255,255,.2),0 60px 120px -40px rgba(0,0,0,.95),0 30px 80px -30px rgba(224,36,107,.45)}
.tr-display{--m:#B8661E;position:relative;aspect-ratio:9/19;border-radius:clamp(24px,2.8vw,38px);overflow:hidden;background:#F6F1EA;color:#2A2420;padding:16cqw 7cqw 0;display:flex;flex-direction:column;gap:5cqw}
.tr-display::before{content:"";position:absolute;top:3cqw;left:50%;width:30cqw;height:7cqw;translate:-50% 0;border-radius:999px;background:#000}
.tr-karte{border-radius:6cqw;padding:6cqw;background:linear-gradient(145deg,#C8762C,#8A4416);color:#fff;box-shadow:0 4cqw 10cqw -4cqw rgba(138,68,22,.7)}
.tr-brand{display:flex;justify-content:space-between;align-items:baseline;margin:0}
.tr-brand b{font-family:Georgia,serif;font-size:6cqw}
.tr-brand span{font-size:3.6cqw;opacity:.8}
.tr-name{margin:6cqw 0 1cqw;font-size:7cqw;font-weight:800}
.tr-stufe{display:inline-grid;margin:0}
.tr-stufe span{grid-area:1/1;width:fit-content;padding:1cqw 3.4cqw;border-radius:999px;background:rgba(255,255,255,.22);font-size:3.6cqw;font-weight:800}
.tr-stufe .s1{animation:tr-a 12s infinite}
.tr-stufe .s2{background:#fff;color:#8A4416;animation:tr-b 12s infinite}
@keyframes tr-a{0%,37%{opacity:1}40%,96%{opacity:0}100%{opacity:1}}
@keyframes tr-b{0%,37%{opacity:0;transform:scale(.7)}41%{opacity:1;transform:scale(1.12)}44%,96%{opacity:1;transform:none}100%{opacity:0}}
.tr-qr{width:42cqw;margin:5cqw auto 0;padding:2cqw;border-radius:3cqw;background:#fff}
.tr-qr svg{display:block;width:100%;height:auto}
.tr-punkte p{margin:0;font-size:4cqw;color:#7A6E66}
.tr-punkte b{display:inline-grid;font-size:9cqw;color:#2A2420;margin-right:1.4cqw;vertical-align:-1cqw}
.tr-punkte .z1,.tr-punkte .z2{grid-area:1/1}
.tr-naechste{display:grid}
.tr-punkte .z1{animation:tr-a 12s infinite}
.tr-punkte .z2{animation:tr-b 12s infinite;animation-name:tr-z}
@keyframes tr-z{0%,31%{opacity:0;transform:translateY(40%)}34%,96%{opacity:1;transform:none}100%{opacity:0}}
.tr-punkte b .z1{animation-name:tr-z1}
@keyframes tr-z1{0%,31%{opacity:1;transform:none}34%,96%{opacity:0;transform:translateY(-40%)}100%{opacity:1}}
.tr-naechste .z1{animation:tr-a 12s infinite}
.tr-naechste .z2{animation:tr-c 12s infinite}
@keyframes tr-c{0%,38%{opacity:0}41%,96%{opacity:1}100%{opacity:0}}
.tr-balken{height:2.4cqw;margin:2cqw 0;border-radius:2cqw;background:#E4DCD2;overflow:hidden}
.tr-balken i{display:block;height:100%;border-radius:2cqw;background:var(--m);animation:tr-balken 12s infinite}
@keyframes tr-balken{0%,30%{width:90%}34%{width:100%}39%{width:100%;opacity:1}40%{width:0;opacity:0}42%,96%{width:4%;opacity:1}100%{width:90%}}
.tr-praemie{display:flex;align-items:center;gap:3cqw;padding:3.4cqw;border-radius:4cqw;background:#fff;box-shadow:0 2cqw 6cqw -2cqw rgba(60,40,20,.2)}
.tr-praemie > span{font-size:7cqw}
.tr-praemie div{flex:1;min-width:0}
.tr-praemie b{display:block;font-size:4.2cqw}
.tr-praemie small{font-size:3.4cqw;color:#7A6E66}
.tr-praemie em{font-style:normal;padding:1.6cqw 3cqw;border-radius:999px;background:#EFE7DE;color:#8A4416;font-size:3.4cqw;font-weight:800;animation:tr-tausch 12s infinite}
@keyframes tr-tausch{0%,58%{background:#EFE7DE;color:#8A4416;transform:none}62%,64%{background:var(--m);color:#fff;transform:scale(1.08)}67%,94%{background:var(--m);color:#fff;transform:none}98%,100%{background:#EFE7DE;color:#8A4416}}
.tr-toast{position:absolute;left:6cqw;right:6cqw;top:14cqw;padding:3.4cqw 4cqw;border-radius:4cqw;background:rgba(30,30,30,.9);color:#fff;font-size:3.8cqw;text-align:center!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;animation:tr-toast 12s infinite}
@keyframes tr-toast{0%,38%{opacity:0;transform:translateY(-30%)}42%,55%{opacity:1;transform:none}59%,100%{opacity:0;transform:translateY(-30%)}}

@media (max-width:860px){
  .tr-szene{gap:0}
  .tr-tablet{display:none}
  .tr-handy{width:min(270px,78%)}
}
@media (prefers-reduced-motion:reduce){
  .tr-szene{opacity:1;animation:none}
  .tr-szene *{animation:none!important}
  .tr-pin i{background:#2A2420}.tr-gebucht,.tr-mitglied em{opacity:1}
  .tr-stufe .s1,.tr-punkte .z1,.tr-naechste .z1{opacity:0}.tr-toast{opacity:0}
  .tr-balken i{width:4%}
}