/* Seitenpanel rechts. Die Referenz nutzt dieselbe Huelle (.cvr + .cart) fuer
 * Filter und Warenkorb-Drawer; sie steht deshalb nicht bei einer der beiden
 * Seiten, sondern hier.
 *
 * Quelle: design/handoff/Kategorie-Steaks.dc.html (<style>-Block).
 *
 * Abweichung: die Referenz haengt das Panel mit
 * right:max(0px,calc((100vw - 1440px)/2)) an ihren 1440er-Seitenkasten. Den
 * Kasten gibt es hier nicht (siehe Worklog, Paket startseite) - das Panel
 * saesse auf breiten Schirmen frei in der Flaeche. Es klebt deshalb am
 * Fensterrand.
 */
.cvr{position:fixed;inset:0;background:rgba(11,19,38,.5);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:90;overscroll-behavior:contain}
.cvr.open{opacity:1;visibility:visible}
/* height: erst 100vh als Rueckfall, dann 100dvh. Auf iOS meint 100vh die
   Hoehe OHNE eingeblendete Browserleiste - das Panel ragt darunter und der
   Knopf am Fuss ist nicht erreichbar. 100dvh misst, was wirklich da ist.
   overscroll-behavior:contain haelt die Wischgeste im Panel: ohne sie
   uebernimmt am Listenende die Seite dahinter (gemeldet 08.09.2026, iPhone -
   "die Seite scrollt, nicht der Warenkorb"). Den zweiten Teil dieser
   Ursache - die Seite bewegt sich auch, wenn der Finger gar nicht in der
   Liste landet - loest der Body-Lock in js/tw-panel.js. */
.cart{position:fixed;top:0;right:0;width:min(420px,94vw);height:100vh;height:100dvh;background:var(--color-surface);z-index:95;box-shadow:-16px 0 40px -12px rgba(11,19,38,.35);transform:translateX(110%);transition:transform .3s ease,visibility .3s ease;visibility:hidden;display:flex;flex-direction:column;overscroll-behavior:contain}
.cart.open{transform:none;visibility:visible}
/* Enger seit 04.10.2026: Jeder Pixel im Kopf fehlt der Positionsliste, und
   die ist auf einem 375er Telefon der knappste Platz im ganzen Drawer. */
.chead{display:flex;align-items:center;justify-content:space-between;padding:11px 16px}
.chead b{font:800 16px/1 var(--font-body)}
.cclose{width:38px;height:38px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--navy-800);display:grid;place-items:center;cursor:pointer}
.cclose:hover{background:var(--sky-50)}
.cclose:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .cclose{color:var(--navy-100)}
[data-theme="dark"] .cclose:hover{background:rgba(160,218,254,.1)}
.cfoot{margin-top:auto;padding:16px 20px 22px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:9px}
@media (prefers-reduced-motion:reduce){.cvr,.cart{transition:none}}

/* ================= In den Warenkorb =================
 * Die Zahl am Symbol huepft einmal, dann klappt der Drawer auf
 * (js/tw-cart.js). Bei prefers-reduced-motion ohne Huepfen.
 */
@keyframes cartbump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.cartn.bump{animation:cartbump .45s ease}
@media (prefers-reduced-motion:reduce){.cartn.bump{animation:none}}

/* Body-Lock, waehrend ein Panel offen ist. position:fixed statt
   overflow:hidden, weil iOS Safari overflow:hidden am body schlicht
   ignoriert - die Seite scrollt trotzdem weiter. Den Versatz setzt
   js/tw-panel.js als --tw-scroll, damit die Seite beim Schliessen wieder
   dort steht, wo sie war, statt nach oben zu springen. */
body.panel-offen{position:fixed;top:calc(var(--tw-scroll,0px) * -1);left:0;right:0;width:100%;overflow:hidden}