/* ============================================================
   LADENPILOT — HERO-TRIO „DREI TAPS"
   Drei Handys, ein Slider. Jedes zeigt genau das, was ein Gast
   im echten Ladenpilot-System tut:
     01 online bestellen — 0 % Provision
     02 Personal an den Tisch rufen (Service-Ruf)
     03 bewerten — ab 4 ★ direkt zu Google
   Die Oberflächen sind Nachbauten der Demos, die wir ohnehin
   ausliefern (doener.html, burger.html, Bewertungs-Router),
   damit im Hero nichts steht, was es im Produkt nicht gibt.

   Aufbau: ein Schritt-Zähler pro Karte (data-step 0/1/2). CSS
   macht daraus Zustände, nicht Keyframe-Ketten — dadurch ist
   jeder Moment anhaltbar, springbar und ohne Bewegung lesbar.
   Maße kommen aus Container-Queries: im Display ist 1cqw = 1 %
   der Displaybreite, 1cqh = 1 % der Displayhöhe.
   ============================================================ */

.lp-trio{
  --pw:clamp(196px,42cqw,256px);         /* Breite eines Handys */
  --trio-edge:max(0px,calc(50% - var(--pw) * .898));  /* Rand bis zur Stapelkante */
  --settle:cubic-bezier(.16,1,.3,1);
  --swing:cubic-bezier(.22,1,.28,1);
  min-width:0;width:100%;align-self:center;container-type:inline-size;color:var(--ink)
}

/* Nullspezifischer Grundriss: nimmt Browser- und home.css-Vorgaben
   heraus, verliert aber gegen jede Klassenregel weiter unten. */
:where(.lp-trio *){margin:0;padding:0;border:0;background:none;list-style:none}

/* ---------- Bühne ---------- */
.lp-trio-stage{
  position:relative;height:calc(var(--pw) * 2.06);
  direction:ltr;perspective:1500px;perspective-origin:50% 42%
}
.lp-trio-glow{
  position:absolute;inset:-6% -10% 4%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 38% at 50% 34%,rgba(255,138,92,.2),transparent 72%),
    radial-gradient(58% 44% at 50% 88%,rgba(255,90,31,.1),transparent 70%)
}

/* ---------- Eine Karte im Karussell ---------- */
/* Drei Plätze: Mitte, rechts, links. Die Seitenplätze drehen sich
   zur Mitte, damit der Stapel Tiefe bekommt statt nur zu skalieren. */
.lp-trio-card{
  position:absolute;left:50%;top:0;width:var(--pw);height:100%;
  margin-left:calc(var(--pw) / -2);transform-style:preserve-3d;
  transition:transform .82s var(--swing),opacity .5s ease,filter .5s ease;
  will-change:transform
}
.lp-trio-card[data-pos="center"]{z-index:3;transform:none;opacity:1}
.lp-trio-card[data-pos="right"]{
  z-index:2;opacity:.42;filter:saturate(.72);
  transform:translate3d(58%,3.4%,-120px) scale(.78) rotateY(-19deg)
}
.lp-trio-card[data-pos="left"]{
  z-index:1;opacity:.42;filter:saturate(.72);
  transform:translate3d(-58%,3.4%,-120px) scale(.78) rotateY(19deg)
}

/* Gehäuse */
.lp-trio-device{
  position:absolute;inset:0;border-radius:14% / 6.8%;padding:2%;
  background:linear-gradient(152deg,#4c423c,#15100e 46%,#2c2422);
  box-shadow:
    0 52px 74px -36px rgba(4,2,1,.9),
    0 14px 30px -16px rgba(4,2,1,.62),
    0 0 0 1px rgba(255,243,228,.13)
}
[data-theme="light"] .lp-trio-device{
  box-shadow:
    0 52px 74px -38px rgba(28,22,17,.5),
    0 14px 28px -16px rgba(28,22,17,.28),
    0 0 0 1px rgba(28,22,17,.2)
}
/* Seitenkarten bekommen einen Schleier, damit die Mitte gewinnt. */
.lp-trio-device::after{
  content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,8,6,.5),rgba(12,8,6,.26));
  opacity:0;transition:opacity .5s ease
}
.lp-trio-card:not([data-pos="center"]) .lp-trio-device::after{opacity:1}

/* Display */
.lp-trio-screen{
  position:relative;height:100%;border-radius:12.2% / 5.7%;overflow:hidden;
  container-type:size;display:flex;flex-direction:column;
  background:var(--p);color:var(--i);font-family:var(--f-body);
  box-shadow:0 0 0 1px rgba(255,243,228,.14) inset
}
.lp-trio-screen b,.lp-trio-screen strong{color:inherit}
.lp-trio-screen img{display:block;width:100%;height:100%;object-fit:cover}
/* Insel */
.lp-trio-screen::after{
  content:"";position:absolute;left:50%;top:1.55%;width:26%;height:2.4%;z-index:8;
  transform:translateX(-50%);border-radius:99px;background:#0a0807;
  box-shadow:0 0 0 1px rgba(255,255,255,.16)
}

/* Auf die Seitenkarte klicken = sie in die Mitte holen. */
.lp-trio-hit{
  position:absolute;inset:0;z-index:10;border-radius:14% / 6.8%;
  background:transparent;border:0;cursor:pointer;font:inherit;color:transparent
}
.lp-trio-card[data-pos="center"] .lp-trio-hit{display:none}
.lp-trio-hit:focus-visible{outline:2px solid var(--acc);outline-offset:6px}

/* ---------- Statusleiste: für alle drei gleich ---------- */
.tr-bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  height:6.4cqh;padding:2.4cqh 7cqw 0;
  font-size:max(7px,4.4cqw);font-weight:600;letter-spacing:-.01em;opacity:.85
}
.tr-bar svg{width:11cqw;height:auto;fill:currentColor;opacity:.9}

/* ---------- Kopfzeile der App ---------- */
.tr-nav{
  flex:none;display:flex;align-items:center;gap:3cqw;height:8.4cqh;padding:0 6cqw;
  border-bottom:1px solid var(--ln)
}
.tr-nav>b{flex:1;min-width:0;font-size:max(8px,5cqw);font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-back{font-style:normal;font-size:max(11px,8cqw);line-height:.7;opacity:.6;flex:none}
.tr-mark{flex:1;display:flex;align-items:center;gap:2.4cqw;font-size:max(9px,5.6cqw);font-weight:700;letter-spacing:-.02em}
.tr-nav em{flex:none;font-style:normal;font-size:max(7px,4cqw);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--s);border:1px solid var(--ln);border-radius:99px;padding:1cqh 2.6cqw}

/* Warenkorb mit Zähler */
.tr-cart{position:relative;flex:none;display:block;width:7.4cqw;height:7.4cqw;color:var(--i)}
.tr-cart svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tr-cart u{
  position:absolute;right:-3.2cqw;top:-2.4cqw;display:grid;place-items:center;
  width:5.6cqw;height:5.6cqw;border-radius:50%;text-decoration:none;
  background:var(--a);color:var(--ai);font-size:max(6px,3.5cqw);font-weight:700;
  opacity:0;transform:scale(.3);transition:opacity .28s ease,transform .42s var(--settle)
}

/* ---------- Der Zeiger des Gastes ---------- */
.lp-trio-tap{
  position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;
  transform:translate3d(calc(var(--tx) + 13cqw),calc(var(--ty) + 11cqh),0)
}
/* Tipp-Hand statt Mauszeiger: am Handy tippt niemand mit der Maus.
   Die Fingerkuppe liegt im Bild bei 9,2/1 von 28×36 — die --tx/--ty
   der Karten sind um genau diesen Versatz vorgezogen, damit sie auf
   dem Ziel landet und nicht daneben. */
.lp-trio-tap svg{
  position:absolute;left:0;top:0;width:10cqw;min-width:19px;height:auto;display:block;
  fill:#ff5a1f;stroke:#2c1509;stroke-width:1.2;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))
}
.lp-trio-tap i{
  position:absolute;left:0;top:0;width:19cqw;height:19cqw;margin:-5cqw 0 0 -5cqw;display:block;
  border:1.1cqw solid rgba(255,110,45,.9);border-radius:50%;opacity:0;transform:scale(.25)
}
.lp-trio-card[data-step="1"] .lp-trio-tap{animation:trioTap 1.45s var(--settle) both}
.lp-trio-card[data-step="1"] .lp-trio-tap i{animation:trioRing .62s ease-out .58s both}
@keyframes trioTap{
  0%  {opacity:0;transform:translate3d(calc(var(--tx) + 13cqw),calc(var(--ty) + 11cqh),0) scale(1)}
  12% {opacity:1;transform:translate3d(calc(var(--tx) + 13cqw),calc(var(--ty) + 11cqh),0) scale(1)}
  38% {opacity:1;transform:translate3d(var(--tx),var(--ty),0) scale(1)}
  44% {opacity:1;transform:translate3d(var(--tx),var(--ty),0) scale(.84)}
  52% {opacity:1;transform:translate3d(var(--tx),var(--ty),0) scale(1)}
  78% {opacity:1;transform:translate3d(var(--tx),var(--ty),0) scale(1)}
  100%{opacity:0;transform:translate3d(calc(var(--tx) + 9cqw),calc(var(--ty) + 8cqh),0) scale(1)}
}
@keyframes trioRing{
  0%  {opacity:.95;transform:scale(.25)}
  100%{opacity:0;transform:scale(1.45)}
}

/* ---------- Das Blatt, das den Ablauf quittiert ---------- */
/* Es deckt nur den unteren Teil ab — die App bleibt dahinter sichtbar,
   genau wie die bsheet-Blätter in den echten Demos. */
.tr-scrim{
  position:absolute;inset:0;z-index:4;background:rgba(10,7,5,.44);
  opacity:0;transition:opacity .4s ease;pointer-events:none
}
.tr-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.5cqh;
  padding:5.5cqw 6cqw 7cqw;border-radius:7cqw 7cqw 0 0;
  background:var(--sh,#fff);color:var(--shi,var(--i));
  box-shadow:0 -2cqh 6cqh -2cqh rgba(10,6,3,.45);
  transform:translateY(104%);transition:transform .62s var(--settle)
}
.tr-sheet::before{
  content:"";align-self:center;width:12cqw;height:.9cqh;border-radius:99px;
  background:currentColor;opacity:.22;margin-bottom:.6cqh
}
.tr-sheet>b{font-size:max(10px,6.4cqw);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.tr-sub{font-size:max(7px,4.3cqw);line-height:1.45;color:var(--shs,var(--s))}
.lp-trio-card[data-step="2"] .tr-sheet{transform:translateY(0)}
.lp-trio-card[data-step="2"] .tr-scrim{opacity:1}

/* Quittungs-Symbole */
.tr-badge{
  display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;flex:none;
  background:var(--a);color:var(--ai)
}
.tr-badge svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   01 · ONLINE BESTELLEN — URFA Döner & Grill (Sand, Petrol, Glut)
   ============================================================ */
.lp-t-order{
  --p:#f5ecdc;--i:#1c2422;--s:#5d6966;--a:#e0531f;--ai:#fff6ef;
  --ln:rgba(28,36,34,.14);--sh:#fffdf7;
  --tx:83.3cqw;--ty:30.5cqh
}
.lp-t-order .tr-nav{background:#fffdf7}

/* Kategorie-Reiter */
.tr-cats{
  flex:none;display:flex;gap:2cqw;padding:2.6cqh 6cqw 2cqh;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
  mask-image:linear-gradient(90deg,#000 84%,transparent)
}
.tr-cats span{
  flex:none;padding:.9cqh 3cqw;border-radius:99px;border:1px solid var(--ln);
  font-size:max(6px,3.9cqw);font-weight:600;color:var(--s);white-space:nowrap
}
.tr-cats span[data-on]{background:#0a514b;border-color:#0a514b;color:#f5ecdc}

/* Eine Zeile der Karte */
/* Die Liste ist länger als der Schirm — die letzte Zeile läuft weich
   aus, damit man sieht, dass die Karte weitergeht. */
.tr-menu{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:1.8cqh;padding:0 6cqw;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
  mask-image:linear-gradient(180deg,#000 82%,transparent)
}
.tr-dish{
  flex:none;display:flex;align-items:center;gap:3cqw;padding:2cqw;border-radius:3cqw;
  background:#fffdf7;border:1px solid var(--ln)
}
.tr-dish figure{position:relative;flex:none;width:18cqw;height:18cqw;border-radius:2.2cqw;overflow:hidden;background:#e6d9c3}
.tr-dish figure b{
  position:absolute;left:.8cqw;top:.8cqw;padding:.35cqh 1.4cqw;border-radius:99px;
  background:#0a514b;color:#f5ecdc;font-size:max(5px,2.9cqw);font-weight:700;line-height:1.3
}
.tr-dish figure b.tr-veg{background:#3f8f5a}
.tr-dish>div{flex:1;min-width:0}
.tr-dish h4{
  font-size:max(8px,5cqw);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tr-dish p{
  margin-top:.3cqh;font-size:max(6px,3.7cqw);line-height:1.3;color:var(--s);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tr-dish strong{display:block;margin-top:.5cqh;font-size:max(8px,5cqw);font-weight:700;
  letter-spacing:-.02em;color:var(--a)}
.tr-add{
  flex:none;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;
  background:rgba(10,81,75,.1);color:#0a514b;
  transition:transform .22s var(--settle),background .22s ease,color .22s ease
}
.tr-add svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
/* Der Druckpunkt liegt genau dort, wo der Zeiger aufsetzt. */
.lp-t-order[data-step="1"] .tr-dish[data-pick] .tr-add{animation:trioPress .6s var(--settle) .56s both}
.lp-t-order[data-step="1"] .tr-dish[data-pick],
.lp-t-order[data-step="2"] .tr-dish[data-pick]{border-color:var(--a)}
@keyframes trioPress{
  0%  {transform:scale(1);background:rgba(10,81,75,.1);color:#0a514b}
  35% {transform:scale(.82)}
  60% {transform:scale(1.12);background:#0a514b;color:#f5ecdc}
  100%{transform:scale(1);background:#0a514b;color:#f5ecdc}
}

/* Die Warenkorb-Leiste — erscheint erst, wenn etwas drin liegt. */
.tr-basket{
  position:absolute;left:6cqw;right:6cqw;bottom:3.4cqh;z-index:3;
  display:flex;align-items:center;gap:2.6cqw;height:7.6cqh;padding:0 3.4cqw;border-radius:99px;
  background:var(--a);color:var(--ai);
  box-shadow:0 2.4cqh 4cqh -2cqh color-mix(in srgb,var(--a) 60%,transparent);
  opacity:0;transform:translateY(180%);
  transition:opacity .3s ease,transform .55s var(--settle)
}
.tr-basket b{flex:1;min-width:0;font-size:max(7px,4.8cqw);font-weight:700;text-align:center;white-space:nowrap}
.tr-basket strong{flex:none;font-size:max(7px,4.8cqw);font-weight:700;letter-spacing:-.02em}
.tr-bq{
  flex:none;display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:.9cqw;
  background:rgba(255,255,255,.22);font-size:max(6px,3.8cqw);font-weight:700
}
.lp-t-order[data-step="1"] .tr-basket{opacity:1;transform:none;transition-delay:.66s}
.lp-t-order[data-step="2"] .tr-basket{opacity:1;transform:none}
.lp-t-order[data-step="1"] .tr-cart u,
.lp-t-order[data-step="2"] .tr-cart u{opacity:1;transform:scale(1);transition-delay:.66s,.66s}
.lp-t-order[data-step="2"] .tr-cart u{transition-delay:0s}

/* Die Abrechnung im Blatt — das eigentliche Versprechen. */
.tr-split{width:100%;display:flex;flex-direction:column;gap:1cqh;margin-top:.6cqh}
.tr-split>div{display:flex;align-items:baseline;justify-content:space-between;gap:3cqw;
  font-size:max(7px,4.3cqw);color:var(--s)}
.tr-split dd{font-weight:600;color:var(--i)}
.tr-split .tr-keep{
  margin-top:.8cqh;padding-top:1.4cqh;border-top:1px solid var(--ln);
  font-size:max(8px,4.8cqw);font-weight:700;color:var(--i)
}
.tr-split .tr-keep dd{font-size:max(11px,7.4cqw);font-weight:700;letter-spacing:-.03em;color:var(--a)}
.tr-zero{
  display:inline-flex;align-items:center;gap:1.8cqw;align-self:stretch;
  font-size:max(6px,3.8cqw);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--a)
}
.tr-zero::before{content:"";flex:none;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--a)}

/* ============================================================
   02 · SERVICE-RUF — SMASH Kassel (Schwarz, Säuregelb)
   ============================================================ */
.lp-t-call{
  --p:#0c0c0d;--i:#f6f5f0;--s:#a29f96;--a:#ffe400;--ai:#161200;
  --ln:rgba(255,255,255,.14);--sh:#17171a;--shi:#f6f5f0;--shs:#a29f96;
  --tx:47cqw;--ty:46.1cqh
}
/* Dunkles Blatt auf dunklem Grund braucht eine Kante, sonst verschwimmt es. */
.lp-t-call .tr-sheet{border-top:1px solid rgba(255,255,255,.13)}
.lp-t-call .tr-mark i{
  width:7cqw;height:7cqw;border-radius:1.9cqw;display:grid;place-items:center;flex:none;
  background:var(--a);color:var(--ai);font-style:normal;font-weight:900;
  font-size:max(7px,4.4cqw);transform:rotate(-5deg)
}
.lp-t-call .tr-mark{font-family:var(--f-sans);font-weight:900;text-transform:uppercase}
.tr-head{flex:none;padding:3.4cqh 6cqw 2.6cqh;display:flex;flex-direction:column;gap:.8cqh}
.tr-head>b{font-family:var(--f-sans);font-size:max(12px,8.4cqw);font-weight:900;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.95}
.tr-head>span{font-size:max(7px,4.2cqw);color:var(--s)}
.tr-opts{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.6cqh;padding:0 6cqw 5cqh}
.tr-opts li{
  display:flex;align-items:center;gap:3.4cqw;padding:2cqh 3.4cqw;border-radius:3.4cqw;
  background:rgba(255,255,255,.05);border:1px solid var(--ln);
  transition:border-color .3s ease,background .3s ease,transform .4s var(--settle)
}
.tr-ic{
  flex:none;display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:2.4cqw;
  background:var(--a);color:var(--ai);transform:rotate(-4deg)
}
.tr-ic svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tr-opts li>span{min-width:0;display:block}
.tr-opts b{display:block;font-size:max(8px,4.9cqw);font-weight:700;letter-spacing:-.01em}
.tr-opts small{display:block;font-size:max(6px,3.8cqw);color:var(--s);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-t-call[data-step="1"] .tr-opts li[data-pick],
.lp-t-call[data-step="2"] .tr-opts li[data-pick]{
  border-color:var(--a);background:rgba(255,228,0,.1);transform:translateX(1.6cqw);
  transition-delay:.6s
}
.lp-t-call[data-step="2"] .tr-opts li[data-pick]{transition-delay:0s}

/* Die Quittung: derselbe Satz wie in burger.html. */
.lp-t-call .tr-badge{animation:none}
.lp-t-call[data-step="2"] .tr-badge{animation:trioPulse 1.9s ease-out .3s infinite}
@keyframes trioPulse{
  0%{box-shadow:0 0 0 0 rgba(255,228,0,.5)}
  70%{box-shadow:0 0 0 4.5cqw rgba(255,228,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,228,0,0)}
}
.tr-note{
  display:flex;align-items:center;gap:2.4cqw;width:100%;margin-top:.8cqh;
  padding:1.9cqh 3.4cqw;border-radius:3cqw;background:rgba(255,255,255,.06);
  border:1px solid var(--ln)
}
.tr-note b{flex:1;min-width:0;font-size:max(7px,4.4cqw);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-note em{flex:none;font-style:normal;font-size:max(6px,3.6cqw);letter-spacing:.08em;
  text-transform:uppercase;color:var(--shs)}
.tr-live{position:relative;flex:none;width:2.2cqw;height:2.2cqw;min-width:4px;min-height:4px;
  border-radius:50%;background:#ff5a1f}
.tr-live i{position:absolute;inset:-1.6cqw;display:block;border-radius:50%;
  border:1px solid rgba(255,90,31,.75);opacity:0}
.lp-t-call[data-step="2"] .tr-live i{animation:trioRing 1.8s ease-out .5s infinite}

/* ============================================================
   03 · BEWERTEN — Trattoria Sole (Ivory, Seeblau, Safran)
   ============================================================ */
.lp-t-rate{
  --p:#faf3e1;--i:#123c59;--s:#5e6f7c;--a:#f4b73a;--ai:#3a2a05;
  --ln:rgba(28,43,56,.15);--sh:#fffdf6;
  --tx:73.3cqw;--ty:61.2cqh
}
.lp-t-rate .tr-mark{font-family:var(--f-serif);font-style:italic;font-weight:600;letter-spacing:-.02em}
.tr-rate{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.6cqh;padding:0 6cqw;text-align:center}
/* Monogramm des Lokals — sonst steht die Frage in einer leeren Fläche. */
.tr-crest{
  display:grid;place-items:center;width:16cqw;height:16cqw;border-radius:50%;
  margin-bottom:1.4cqh;background:rgba(18,60,89,.07);border:1px solid var(--ln);
  font-family:var(--f-serif);font-style:italic;font-size:max(9px,6.4cqw);letter-spacing:-.02em
}
.lp-t-rate .tr-foot{
  flex:none;display:flex;align-items:center;justify-content:center;gap:2cqw;
  padding:2.4cqh 6cqw 4cqh;font-size:max(6px,3.7cqw);color:var(--s);text-align:center;
  border-top:1px solid var(--ln)
}
.lp-t-rate .tr-foot i{font-style:normal;color:var(--a)}
.tr-rate>b{font-family:var(--f-serif);font-weight:400;font-size:max(13px,10cqw);
  line-height:1;letter-spacing:-.035em}
.tr-rate>span{font-size:max(7px,4.2cqw);line-height:1.45;color:var(--s);max-width:80%}
.tr-stars{display:flex;gap:1.8cqw;margin-top:.6cqh}
.tr-stars i{display:block;width:11.5cqw;height:11.5cqw}
.tr-stars svg{width:100%;height:100%;fill:rgba(28,43,56,.16);
  transition:fill .3s ease,transform .45s var(--settle)}
.tr-gate{
  margin-top:1.2cqh;font-size:max(6px,3.6cqw);letter-spacing:.02em;color:var(--s);
  border-top:1px solid var(--ln);padding-top:1.6cqh
}
/* Die Sterne füllen sich nacheinander — der Daumen wandert ja auch. */
.lp-t-rate[data-step="1"] .tr-stars svg,
.lp-t-rate[data-step="2"] .tr-stars svg{fill:var(--a);transform:scale(1.06)}
.lp-t-rate[data-step="1"] .tr-stars i:nth-child(1) svg{transition-delay:.58s}
.lp-t-rate[data-step="1"] .tr-stars i:nth-child(2) svg{transition-delay:.64s}
.lp-t-rate[data-step="1"] .tr-stars i:nth-child(3) svg{transition-delay:.70s}
.lp-t-rate[data-step="1"] .tr-stars i:nth-child(4) svg{transition-delay:.76s}
.lp-t-rate[data-step="1"] .tr-stars i:nth-child(5) svg{transition-delay:.82s}
.tr-g{flex:none;display:block;width:10cqw;height:10cqw}
.tr-g svg{width:100%;height:100%}
.tr-score{
  display:flex;align-items:center;gap:2.6cqw;width:100%;padding:1.6cqh 3.4cqw;
  border-radius:3cqw;background:rgba(18,60,89,.06);border:1px solid var(--ln)
}
.tr-score strong{font-family:var(--f-sans);font-size:max(11px,7cqw);font-weight:700;letter-spacing:-.03em}
.tr-fives{display:flex;gap:.8cqw;flex:none}
.tr-fives svg{width:3.9cqw;height:3.9cqw;fill:var(--a)}
.tr-score em{margin-left:auto;font-style:normal;font-size:max(6px,3.7cqw);color:var(--s);white-space:nowrap}
.tr-go{
  width:100%;margin-top:.6cqh;display:grid;place-items:center;height:7cqh;border-radius:99px;
  background:var(--i);color:#fffdf6;font-size:max(8px,5cqw);font-weight:700
}

/* ============================================================
   Bildunterschrift, Reiter, Fußzeile
   ============================================================ */
/* Die Zeile steht exakt auf der Breite des Handystapels: links der
   Pausenknopf, rechts der Text, beide bündig zur äußeren Kante.
   Der Faktor ist gemessen, nicht gerechnet — Versatz und
   Verkleinerung ergäben .97, die Perspektive (translateZ) zieht die
   Kante auf rund .898 der Handybreite. Ragt der Stapel über die
   Spalte hinaus (Handy), bleibt der Rand bei 0. */
.lp-trio-cap{
  display:flex;align-items:flex-start;gap:20px;
  margin:5% var(--trio-edge) 0
}
.lp-trio-caps{position:relative;flex:1;min-width:0;min-height:86px;text-align:end}
.lp-trio-caps>div{
  position:absolute;left:0;right:0;top:0;
  opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .4s ease,transform .5s var(--settle)
}
.lp-trio-caps>div[data-on]{opacity:1;transform:none;pointer-events:auto}
.lp-trio-caps b{
  display:block;font-family:var(--f-sans);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:7px
}
.lp-trio-caps p{font-size:12px;line-height:1.7;color:var(--mut);max-width:46ch;margin-inline-start:auto}
.lp-trio-caps strong{color:var(--ink);font-weight:600}
.lp-trio-caps em{font-style:normal;color:var(--acc);font-weight:600}

.lp-trio-toggle{
  display:grid;place-items:center;width:32px;height:32px;flex:none;margin-top:1px;
  background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:background .2s ease,color .2s ease
}
.lp-trio-toggle svg{width:11px;height:11px;fill:currentColor}
.lp-trio-toggle .lp-trio-play{display:none}
.lp-trio-toggle[aria-pressed="true"] .lp-trio-play{display:block}
.lp-trio-toggle[aria-pressed="true"] .lp-trio-pause{display:none}
.lp-trio-toggle[hidden]{display:none}
.lp-trio-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
@media(hover:hover) and (pointer:fine){
  .lp-trio-toggle:hover{background:var(--line);color:var(--ink)}
  .lp-trio-card:not([data-pos="center"]):hover{opacity:.72}
}

/* ---------- Anhalten: eine Schaltung friert alles ein ---------- */
.lp-trio[data-playing="false"] .lp-trio-card *{animation-play-state:paused}

/* ---------- Ohne Bewegung: drei Endzustände, per Reiter wählbar ---------- */
.lp-trio[data-static] .lp-trio-card{transition:none}
.lp-trio[data-static] .lp-trio-tap{display:none}
.lp-trio[data-static] .tr-sheet{transition:none}

/* ---------- Ränder ---------- */
@media(max-width:1100px) and (min-width:901px){
  .lp-trio-caps b{font-size:15px}
  .lp-trio-caps p{font-size:11px}
}
@media(max-width:900px) and (min-width:641px){
  .lp-hero-grid{grid-template-columns:1fr;gap:40px}
  .lp-trio{width:min(100%,600px);justify-self:center}
}
@media(max-width:640px){
  .lp-trio{--pw:clamp(178px,60cqw,226px)}
  .lp-trio-card[data-pos="right"]{transform:translate3d(60%,3%,-110px) scale(.72) rotateY(-17deg)}
  .lp-trio-card[data-pos="left"]{transform:translate3d(-60%,3%,-110px) scale(.72) rotateY(17deg)}
  .lp-trio-cap{margin:22px var(--trio-edge) 0;gap:14px}
  .lp-trio-caps{min-height:78px}
  .lp-trio-caps b{font-size:15px}
  .lp-trio-caps p{font-size:12px;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .lp-trio-card,.tr-sheet,.tr-scrim,.lp-trio-caps>div{transition:none}
  .lp-trio-card *{animation:none !important}
}
/* Bündig bleibt bündig: Rand, Textachse und Reihenfolge hängen an
   logischen Eigenschaften und spiegeln sich mit der Leserichtung. */
[dir="rtl"] .lp-trio-cap{direction:rtl}