:root {
  --celosys-bg: #000000;
  --celosys-surface: #1a1a1a;
  --celosys-surface-elevated: #242424;
  --celosys-purple: #B0358B;
  --celosys-purple-hover: #c34cae;
  --celosys-purple-light: #c34cae;
  --celosys-text: #F8F8F8;
  --celosys-text-muted: #B5B5B5;
  --celosys-border: #353535;
  --celosys-radius: 14px;
  --celosys-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --celosys-header-offset: calc(3.2rem + env(safe-area-inset-top, 0px));
  /* Android-nosat only sets this (CriticalHead). iOS / desktop stay 0 — layout unchanged. */
  --celosys-android-lift: 0px;
  --celosys-teal: #2EB7A5;
  --celosys-amber: #F5A623;
  --celosys-coral: #E76F51;
  --celosys-lavendel: #695da5;

  /*
   * Shared Figma sheet / scroll-card metrics (artboard 390).
   * Widen ALL wired plates with e.g. --celosys-card-w-nudge: 5;
   * --celosys-card-w ≈ list plates (Credits/Punkte/Partner hub/Stamp/loyalty)
   * --celosys-bar-w  ≈ Partner finden / Gutscheine / Meet&Trust rails (~350)
   * --celosys-d-gap  ≈ vertical gap between D-scroll boxes (shared; 8.97 @ 390 = +2 vs original 6.97)
   */
  --celosys-figma-w: 390;
  --celosys-u: calc(min(100vw, 30rem) / var(--celosys-figma-w));
  --celosys-card-w-base: 358;
  --celosys-bar-w-base: 350;
  --celosys-card-w-nudge: 0;
  --celosys-card-w: calc((var(--celosys-card-w-base) + var(--celosys-card-w-nudge)) * var(--celosys-u));
  --celosys-bar-w: calc((var(--celosys-bar-w-base) + var(--celosys-card-w-nudge)) * var(--celosys-u));
  --celosys-card-side: calc((var(--celosys-figma-w) - var(--celosys-card-w-base) - var(--celosys-card-w-nudge)) / 2 * var(--celosys-u));
  --celosys-bar-side: calc((var(--celosys-figma-w) - var(--celosys-bar-w-base) - var(--celosys-card-w-nudge)) / 2 * var(--celosys-u));
  --celosys-card-chevron: calc(12 * var(--celosys-u));
  --celosys-d-gap: 8.97;

  /*
   * Unified portal overlay (Meet&Trust QR chrome = law).
   * Tune size/color here only — all celosys-overlay-sheet panels inherit.
   */
  --celosys-overlay-panel-h-base: 750;
  --celosys-overlay-panel-h: min(
    calc(var(--celosys-overlay-panel-h-base) * var(--celosys-u)),
    calc(100dvh - 2.5rem - env(safe-area-inset-top, 0px))
  );
  --celosys-overlay-panel-w: calc(var(--celosys-figma-w) * var(--celosys-u)); /* 390 full artboard */
  --celosys-overlay-panel-bg: rgba(0, 0, 0, 0.95);
  --celosys-overlay-radius: calc(18 * var(--celosys-u));
  --celosys-overlay-backdrop: rgba(0, 0, 0, 0.95);

  /*
   * Shop logo disc — Stempelkarte is source of truth (Figma).
   * Wrap = full frame; ring inset into wrap; logo inset = ring + gap.
   * Tightened ring vs old PNG pad (0.127/0.04) so stroke hugs the mark.
   */
  --celosys-shop-logo-size: 5.85rem;
  --celosys-shop-logo-ring-inset: 0.145;
  --celosys-shop-logo-gap: 0.022;
  /* Soft neon halo on logo rings (CSS-only; colors per surface) */
  --celosys-shop-logo-neon-magenta: 176, 53, 139;
  --celosys-shop-logo-neon-lavendel: 105, 93, 165;

  /*
   * C Page chrome — Meet&Trust geometry/type (shared).
   * Change once → Credits/Punkte/Stamp/Bonus/Aktionen/Gift/Meet inherit.
   * Colors stay per-page. Gift summary is an optional extra block.
   */
  --celosys-c-heading-h: 47;
  --celosys-c-heading-gap-x: 11;
  --celosys-c-heading-pad-x: 20.62;
  --celosys-c-gap-after-heading: 7.75;
  --celosys-c-gap-after-seg: 10;
  --celosys-c-gap-after-partner: 10.12;
  --celosys-c-icon-w: 40;
  --celosys-c-icon-h: 40;
  --celosys-c-title-size: 20;
  --celosys-c-title-tracking: -0.005em;
  --celosys-c-info: 23.18;
  --celosys-c-info-icon: 20;
  --celosys-c-partner-ratio-w: 350;
  --celosys-c-partner-ratio-h: 42.52;
  --celosys-c-partner-title: 14;
  --celosys-c-partner-sub: 10;
  --celosys-c-partner-lupe: 18;
  --celosys-c-partner-arrow: 14;
  --celosys-c-partner-pad-x: 12;
  --celosys-c-partner-grid-gap: 12;
  --celosys-c-partner-icon-col: 23;
  --celosys-c-partner-arrow-col: 12;
  --celosys-c-partner-text-gap: 3;
  --celosys-c-seg-ratio-w: 348.19;
  --celosys-c-seg-ratio-h: 35;
  --celosys-c-tab-size: 9;
  --celosys-c-tab-icon: 12;
  --celosys-c-tab-gap: 8;
  --celosys-c-tab-tracking: 0.06em;
  --celosys-c-gift-summary-ratio-w: 351.93;
  --celosys-c-gift-summary-ratio-h: 87.99;
  --celosys-c-gift-summary-gap: 7.76;

  /*
   * Partner Vorteile plate (Home + hub D boxes).
   * Figma 185:497 radial + #9B307C stroke fade. Change once → all inherit.
   */
  --celosys-partner-plate-rx: 283.5;
  --celosys-partner-plate-ry: 212.5;
  --celosys-partner-plate-cx: 283.5;
  --celosys-partner-plate-cy: 0;
  --celosys-partner-plate-a: rgba(176, 53, 139, 0.325);
  --celosys-partner-plate-b: rgba(89, 28, 71, 0.1625);
  --celosys-partner-plate-c: rgba(2, 2, 2, 0);
  --celosys-partner-plate-stop-a: 25%;
  --celosys-partner-plate-stop-b: 62.5%;
  --celosys-partner-plate-radius: 7;
  --celosys-partner-stroke: #9b307c;
  --celosys-partner-stroke-rgb: 155, 48, 124;
  --celosys-partner-stroke-fade-at: 72%;
  --celosys-partner-stroke-w: 1.25px;
  --celosys-partner-stroke-clip-bottom: 1.25px;
  --celosys-partner-stroke-gradient: linear-gradient(
    to bottom,
    rgba(var(--celosys-partner-stroke-rgb), 1) 0%,
    rgba(var(--celosys-partner-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );

  /*
   * Gutscheine plate (Home + gift D boxes).
   * Same radial geometry as Partner; lavendel #695DA5 / stroke #5C5190.
   */
  --celosys-gutscheine-plate-rx: 283.5;
  --celosys-gutscheine-plate-ry: 212.5;
  --celosys-gutscheine-plate-cx: 283.5;
  --celosys-gutscheine-plate-cy: 0;
  --celosys-gutscheine-plate-a: rgba(105, 93, 165, 0.325);
  --celosys-gutscheine-plate-b: rgba(54, 48, 84, 0.1625);
  --celosys-gutscheine-plate-c: rgba(2, 2, 2, 0);
  --celosys-gutscheine-plate-stop-a: 25%;
  --celosys-gutscheine-plate-stop-b: 62.5%;
  --celosys-gutscheine-plate-radius: 7;
  --celosys-gutscheine-stroke: #5c5190;
  --celosys-gutscheine-stroke-rgb: 92, 81, 144;
  --celosys-gutscheine-stroke-fade-at: 72%;
  --celosys-gutscheine-stroke-w: 1.25px;
  --celosys-gutscheine-stroke-clip-bottom: 1.25px;

  /*
   * Tickets plate (Home + tickets D boxes).
   * Same radial geometry; coral #E76F51 / stroke #C35E46.
   */
  --celosys-tickets-plate-rx: 283.5;
  --celosys-tickets-plate-ry: 212.5;
  --celosys-tickets-plate-cx: 283.5;
  --celosys-tickets-plate-cy: 0;
  --celosys-tickets-plate-a: rgba(231, 111, 81, 0.325);
  --celosys-tickets-plate-b: rgba(117, 57, 42, 0.1625);
  --celosys-tickets-plate-c: rgba(2, 2, 2, 0);
  --celosys-tickets-plate-stop-a: 25%;
  --celosys-tickets-plate-stop-b: 62.5%;
  --celosys-tickets-plate-radius: 7;
  --celosys-tickets-stroke: #c35e46;
  --celosys-tickets-stroke-rgb: 195, 94, 70;
  --celosys-tickets-stroke-fade-at: 72%;
  --celosys-tickets-stroke-w: 1.25px;
  --celosys-tickets-stroke-clip-bottom: 1.25px;

  /*
   * Meet&Trust plate (Home + appointment D boxes).
   * Same radial geometry; amber #EBA021 / stroke #D08D1D.
   */
  --celosys-meet-plate-rx: 283.5;
  --celosys-meet-plate-ry: 212.5;
  --celosys-meet-plate-cx: 283.5;
  --celosys-meet-plate-cy: 0;
  --celosys-meet-plate-a: rgba(235, 160, 33, 0.325);
  --celosys-meet-plate-b: rgba(119, 81, 18, 0.1625);
  --celosys-meet-plate-c: rgba(2, 2, 2, 0);
  --celosys-meet-plate-stop-a: 25%;
  --celosys-meet-plate-stop-b: 62.5%;
  --celosys-meet-plate-radius: 7;
  --celosys-meet-stroke: #d08d1d;
  --celosys-meet-stroke-rgb: 208, 141, 29;
  --celosys-meet-stroke-fade-at: 72%;
  --celosys-meet-stroke-w: 1.25px;
  --celosys-meet-stroke-clip-bottom: 1.25px;

  /*
   * Segmented tab thumb — Figma 215:533 radial (167×25.58, radius 7).
   * Default = Partner purple; Gift/Meet remap stops via section vars.
   */
  --celosys-seg-track-bg: rgba(24, 24, 24, 0.4);
  --celosys-seg-track-radius: 10;
  --celosys-seg-thumb-radius: 7;
  --celosys-seg-thumb-a: rgba(176, 53, 139, 1);
  --celosys-seg-thumb-b: rgba(176, 53, 139, 0.6);
  --celosys-seg-thumb-c: rgba(119, 36, 94, 0.5);
  --celosys-seg-thumb-d: rgba(89, 28, 71, 0.4);
  --celosys-seg-thumb-e: rgba(44, 14, 35, 0.3);
  --celosys-seg-thumb-f: rgba(0, 0, 0, 0.2);

  /* Title icon circle — Figma 204:528 (40×40, radius 20); remap a/b per page */
  --celosys-title-circle-a: rgba(176, 53, 139, 0.95);
  --celosys-title-circle-b: rgba(176, 53, 139, 0.4);
}

/* Category remaps of Figma 204:528 (same geometry, page accent only) */
.gift-cards-page {
  --celosys-title-circle-a: rgba(105, 93, 165, 0.95);
  --celosys-title-circle-b: rgba(105, 93, 165, 0.4);
}

.appointments-page {
  --celosys-title-circle-a: rgba(245, 166, 35, 0.95);
  --celosys-title-circle-b: rgba(245, 166, 35, 0.4);
}

.tickets-page {
  --celosys-title-circle-a: rgba(231, 111, 81, 0.95);
  --celosys-title-circle-b: rgba(231, 111, 81, 0.4);
}

.tickets-page__hub-link {
  color: inherit;
  text-decoration: none;
}

.tickets-page__hub-link:hover,
.tickets-page__hub-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

html {
  background: #000;
  color-scheme: dark;
  font-size: 14px;
  position: relative;
  min-height: 100%;
  min-height: -webkit-fill-available;
  overscroll-behavior-y: none;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body.celosys-app {
  background: #000;
  -webkit-tap-highlight-color: transparent;
  color: var(--celosys-text);
  display: flex;
  flex-direction: column;
  font-family: var(--celosys-font);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overscroll-behavior-y: none;
  position: relative;
  touch-action: manipulation;
}

/* No leftover “selection square” after tap/click (entire app). */
body.celosys-app *:focus,
body.celosys-app *:focus-visible {
  outline: none !important;
}

body.celosys-app a:focus,
body.celosys-app a:focus-visible,
body.celosys-app button:focus,
body.celosys-app button:focus-visible,
body.celosys-app [role="button"]:focus,
body.celosys-app [role="button"]:focus-visible,
body.celosys-app [tabindex]:focus,
body.celosys-app [tabindex]:focus-visible,
body.celosys-app .btn:focus,
body.celosys-app .btn:active:focus,
body.celosys-app .btn-link.nav-link:focus,
body.celosys-app .form-control:focus,
body.celosys-app .form-check-input:focus,
body.celosys-app .form-select:focus {
  box-shadow: none !important;
}

/* Content fits the viewport: no page scroll; pull-down still refreshes via JS.
   Do NOT set touch-action: pan-x — that blocks pull-to-refresh swipe on cold start. */
html {
  scrollbar-gutter: stable;
}

html.celosys-scroll-fit-locked,
html.celosys-scroll-fit-locked body.celosys-app {
  overscroll-behavior-y: none;
}

html.celosys-scroll-fit-locked {
  overflow: hidden;
}

html.celosys-scroll-fit-locked body.celosys-app {
  overflow: hidden;
  overscroll-behavior-y: none;
  position: relative;
  width: 100%;
}

/* While pulling to refresh: body content may translate; keep chrome fixed. */
html.celosys-scroll-fit-locked body.celosys-app--pulling [data-ptr-shift] {
  will-change: transform;
}

/* Full-viewport app background (HG_screen) — all pages, under chrome */
.celosys-app-bg {
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  right: 0;
  /* Extend into status-bar / home-indicator when viewport-fit=cover */
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  view-transition-name: none;
  z-index: 0;
}

.celosys-app-bg img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

/*
 * Android without safe-area (page starts below status bar): shift HG up by the same
 * lift as panel B so the visible crop matches iOS below the status bar. Status bar
 * itself stays system chrome (theme-color #000 ≈ HG top). iOS untouched.
 */
html.celosys-android-nosat .celosys-app-bg img {
  height: calc(100% + var(--celosys-android-lift, 0px));
  transform: translateY(calc(-1 * var(--celosys-android-lift, 0px)));
}

.celosys-header {
  border-bottom: 1px solid var(--celosys-border);
}

.celosys-header-fixed {
  border-bottom: 1px solid var(--celosys-border);
}

.celosys-header--sticky {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.celosys-header--fixed {
  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
  left: 0;
  overflow: hidden;
  padding-top: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

/* Single HG: .celosys-app-bg only — no header underlay clone. */

.celosys-header--fixed {
  background: transparent;
}

.celosys-header--fixed > * {
  position: relative;
  z-index: 1;
}

/* Exact copy of Home topbar (logo + hamburger) — used on every page */
.celosys-app-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 30rem;
  min-height: 2rem;
  padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 1rem 0.55rem;
  width: 100%;
}

.celosys-app-topbar__logo img {
  display: block;
  height: 1.65rem;
  object-fit: contain;
  width: auto;
}

.celosys-app-topbar__menu {
  background: transparent;
  border: 0;
  line-height: 0;
  padding: 0.35rem;
}

.celosys-app-topbar__menu img,
.celosys-app-topbar__menu-icon {
  color: #F8F8F8;
  display: block;
  font-size: 1.35rem;
  height: 1.35rem;
  line-height: 1;
  speak: never;
}

/* Menu panel — same as Home on every page */
.celosys-nav-wrap {
  left: 0;
  padding: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1080;
}

.celosys-nav-wrap .navbar {
  padding: 0;
}

.celosys-nav-wrap .navbar-collapse {
  background: rgba(17, 17, 17, 0.97);
  border-bottom: 1px solid var(--celosys-border);
  margin: 0;
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 1rem;
  pointer-events: auto;
}

.celosys-header-spacer {
  display: block;
  flex-shrink: 0;
  height: calc(3.2rem + env(safe-area-inset-top, 0px));
}

.celosys-nav-toggler {
  align-items: center;
  background: transparent;
  border: none;
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0.35rem;
}

.celosys-nav-toggler__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.celosys-nav-toggler__bars span {
  background: #ffffff;
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 100%;
}

.celosys-user-strip {
  align-items: flex-start;
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  min-height: 3.1rem;
}

.celosys-user-strip__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.celosys-user-strip-slot {
  min-height: 3.1rem;
}

.celosys-user-strip__profile {
  align-items: flex-start;
  color: inherit;
  display: flex;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
}

a.celosys-user-strip__profile:hover .celosys-user-strip__greeting,
a.celosys-user-strip__profile:focus-visible .celosys-user-strip__greeting {
  color: var(--celosys-purple-light);
}

.celosys-user-strip__avatar {
  align-items: center;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.celosys-user-strip__greeting {
  color: var(--celosys-text);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.celosys-user-strip__text {
  min-width: 0;
}

.celosys-user-strip__badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.45rem;
}

.celosys-membership-badge {
  align-items: center;
  color: #c4b5fd;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 600;
  gap: 0.28rem;
  line-height: 1.2;
}

.celosys-membership-badge__icon {
  flex-shrink: 0;
  height: 0.95rem;
  width: 0.95rem;
}

.celosys-user-strip__membership {
  color: var(--celosys-purple-light);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0.15rem 0 0;
}

.celosys-user-strip__verify {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.celosys-verify-badge {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: 999px;
  color: #4ade80;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 0.28rem;
  line-height: 1.2;
  padding: 0.22rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}

.celosys-verify-badge__icon {
  flex-shrink: 0;
  height: 0.85rem;
  width: 0.85rem;
}

.celosys-verify-badge:hover,
.celosys-verify-badge:focus-visible {
  color: #86efac;
  text-decoration: none;
}

.celosys-verify-badge--warn {
  background: transparent;
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
}

.celosys-verify-badge--warn:hover,
.celosys-verify-badge--warn:focus-visible {
  color: #fecaca;
}

.celosys-verify-help {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
}

.celosys-verify-help:hover,
.celosys-verify-help:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.celosys-user-strip__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
}

.celosys-user-strip__points {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.celosys-user-strip__points-label {
  color: var(--celosys-text);
}

.celosys-user-strip__points-value {
  color: var(--celosys-purple-light);
  margin-left: 0.2rem;
}

.celosys-qr-btn {
  align-items: center;
  background: rgba(18, 12, 28, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(142, 90, 213, 0.18);
  color: #ffffff;
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.28rem;
  justify-content: center;
  min-height: 4.35rem;
  min-width: 4.35rem;
  padding: 0.55rem 0.6rem;
}

.celosys-qr-btn:hover,
.celosys-qr-btn:focus {
  background: rgba(142, 90, 213, 0.16);
  border-color: rgba(196, 181, 253, 0.7);
  color: #ffffff;
}

.celosys-qr-btn__icon {
  height: 1.55rem;
  width: 1.55rem;
}

.celosys-qr-btn__label {
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.celosys-modal {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  color: var(--celosys-text);
}

.celosys-modal__qr {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
}

.celosys-modal__qr--large {
  height: min(72vw, 320px);
  max-width: 100%;
  width: min(72vw, 320px);
}

.celosys-nav {
  background: var(--celosys-bg);
  padding-block: 0.75rem;
}

.celosys-brand {
  padding: 0;
}

.celosys-logo-wrap {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  min-height: 32px;
  width: 120px;
}

.celosys-logo {
  display: block;
  height: 28px;
  width: 105px;
  object-fit: contain;
  object-position: left center;
}

.celosys-wordmark {
  color: var(--celosys-text);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.celosys-wordmark[hidden] {
  display: none;
}

.validation-summary {
  display: none;
}

.validation-summary.validation-summary-errors {
  display: block;
}

.wizard-feedback-banner {
  flex-shrink: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u, var(--celosys-u)));
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 calc(10 * var(--mt-u, var(--celosys-u)));
}

.appointment-wizard__form > .wizard-feedback-banner,
.appointment-wizard__form > .validation-summary.validation-summary-errors {
  scroll-margin-top: calc(12 * var(--mt-u, var(--celosys-u)));
}

.ticket-event-wizard-page > .alert[role="alert"],
.appointment-wizard-page > .alert[role="alert"] {
  margin: 0 var(--celosys-card-side, 1rem) calc(10 * var(--mt-u, var(--celosys-u)));
}

.validation-summary ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

@media (min-width: 768px) {
  .celosys-logo {
    height: 32px;
  }
}

.celosys-nav .nav-link {
  color: var(--celosys-text-muted);
  font-weight: 500;
  padding-inline: 0.85rem;
}

.celosys-nav .nav-link:hover,
.celosys-nav .nav-link:focus {
  color: var(--celosys-text);
}

.celosys-nav .nav-link.active {
  color: var(--celosys-purple-light);
}

.celosys-main {
  flex: 1 0 auto;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  position: relative;
  /* No z-index: traps Bootstrap modals under fixed bottom-nav (z-index 1040). */
}

.celosys-footer {
  border-top: 1px solid var(--celosys-border);
  color: var(--celosys-text-muted);
  flex-shrink: 0;
  font-size: 0.875rem;
  margin-top: auto;
  padding: 1.25rem 0 2rem;
  position: relative;
}

.celosys-footer a {
  color: var(--celosys-purple-light);
  text-decoration: none;
}

.celosys-footer a:hover {
  color: var(--celosys-purple);
}

.form-control,
.form-select {
  background-color: var(--celosys-surface-elevated);
  border: 1px solid transparent;
  border-radius: var(--celosys-radius);
  color: var(--celosys-text);
  padding: 0.75rem 1rem;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--celosys-surface-elevated);
  border-color: var(--celosys-purple);
  box-shadow: 0 0 0 0.15rem rgba(142, 90, 213, 0.35);
  color: var(--celosys-text);
}

.form-select option,
.form-select optgroup {
  background-color: var(--celosys-surface-elevated);
  color: var(--celosys-text);
}

.form-select.celosys-select--inactive {
  background-color: var(--celosys-surface-elevated);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.form-label {
  color: var(--celosys-text);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.form-check-input {
  background-color: var(--celosys-surface-elevated);
  border-color: rgba(255, 255, 255, 0.25);
}

.form-check-input:checked {
  background-color: var(--celosys-purple);
  border-color: var(--celosys-purple);
}

.form-check-label {
  color: var(--celosys-text);
}

.btn-dark,
.btn-celosys-primary {
  background-color: var(--celosys-purple);
  border: none;
  border-radius: var(--celosys-radius);
  color: #000000;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-celosys-primary:hover,
.btn-celosys-primary:focus {
  background-color: var(--celosys-purple-hover);
  color: #000000;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: none;
}

.text-danger {
  color: #f87171 !important;
}

.text-muted {
  color: var(--celosys-text-muted) !important;
}

.alert {
  border: none;
  border-radius: var(--celosys-radius);
}

.alert-warning {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
}

.alert-info {
  background: rgba(142, 90, 213, 0.15);
  color: var(--celosys-purple-light);
}

.alert-success {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}

.portal-page {
  margin: 0 auto;
  max-width: 760px;
}

.portal-page__greeting {
  color: var(--celosys-text);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.portal-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.portal-page__subtitle {
  color: var(--celosys-text-muted);
  margin-bottom: 1.5rem;
}

.company-reject-form {
  border-top: 1px solid var(--celosys-border);
}

.portal-panel--narrow {
  max-width: 420px;
  margin-inline: auto;
}

.portal-panel {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: calc(var(--celosys-radius) + 4px);
  padding: 1.5rem;
}

.portal-panel--success {
  border-color: rgba(34, 197, 94, 0.35);
}

.required-mark,
.required-field::after {
  color: #f87171;
  content: " *";
  font-weight: 700;
}

.privacy-note {
  background: rgba(142, 90, 213, 0.12);
  border-left: 4px solid var(--celosys-purple);
  border-radius: var(--celosys-radius);
  color: var(--celosys-purple-light);
  padding: 0.85rem 1rem;
}

.appointment-date-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.appointment-date-list__item {
  align-items: center;
  background: var(--celosys-surface-elevated);
  border-radius: var(--celosys-radius);
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}

.appointment-date-list__item span {
  color: var(--celosys-text-muted);
  font-size: 0.85rem;
}

.appointment-date-list__item strong {
  color: var(--celosys-text);
}

.appointment-date-list__item--muted {
  opacity: 0.55;
}

.appointment-date-list__item--muted span,
.appointment-date-list__item--muted strong {
  color: var(--celosys-text-muted);
}

.appointment-date-list__item--selected {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.45);
}

.appointment-date-list__item--selected span {
  color: rgba(34, 197, 94, 0.85);
}

.appointment-date-list__item--selected strong {
  color: rgb(34, 197, 94);
}

.confirmed-box {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: var(--celosys-radius);
  color: var(--celosys-text);
  padding: 1rem;
}

.celosys-header--minimal {
  border-bottom: none;
}

.celosys-app--company .celosys-main {
  padding-top: 0;
}

.celosys-main--company {
  padding-top: 2rem;
}

.portal-home {
  max-width: 720px;
}

.portal-home-wallets {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1.35rem;
}

.portal-home-wallet {
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(142, 90, 213, 0.28) 0%, transparent 55%),
    linear-gradient(160deg, rgba(36, 24, 52, 0.95), rgba(16, 12, 24, 0.98));
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 18px;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 7.6rem;
  overflow: hidden;
  padding: 0.95rem 1rem 0.85rem;
  position: relative;
  text-decoration: none;
}

.portal-home-wallet:hover,
.portal-home-wallet:focus-visible {
  border-color: rgba(196, 181, 253, 0.45);
  color: inherit;
  outline: none;
}

.portal-home-wallet__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  position: relative;
  z-index: 1;
}

.portal-home-wallet__content {
  flex: 1;
  min-width: 0;
}

.portal-home-wallet__label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  font-weight: 500;
}

.portal-home-wallet__value {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  position: relative;
  z-index: 1;
}

.portal-home-wallet__membership {
  color: var(--celosys-purple-light);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.portal-home-wallet__subtitle {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.portal-home-wallet__art {
  bottom: -0.15rem;
  height: 3.6rem;
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
  right: 0.15rem;
  width: 3.6rem;
  z-index: 0;
}

.portal-home-wallet__art svg {
  display: block;
  height: 100%;
  width: 100%;
}

.portal-home-wallet__icon {
  align-items: center;
  background: rgba(142, 90, 213, 0.18);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  display: inline-flex;
  flex-shrink: 0;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.portal-home-wallet__icon svg {
  height: 1.5rem;
  width: 1.5rem;
}

.portal-home-wallet__arrow {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.portal-home__section-title {
  color: var(--celosys-text);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.portal-highlights {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-d-gap) * var(--celosys-u));
}

.portal-highlight-card {
  align-items: center;
  background: rgba(18, 18, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: inherit;
  display: flex;
  gap: 0.9rem;
  min-height: 4.6rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.portal-highlight-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: inherit;
  text-decoration: none;
  transform: translateY(-1px);
}

.portal-highlight-card__icon {
  align-items: center;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: #c084fc;
  display: inline-flex;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.45));
  flex-shrink: 0;
  height: 2.85rem;
  justify-content: center;
  width: 2.85rem;
}

.portal-highlight-card__icon--purple {
  color: #c084fc;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.65));
}

.portal-highlight-card__icon--pink {
  color: #f472b6;
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6));
}

.portal-highlight-card__icon--orange {
  color: #fb923c;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.55));
}

.portal-highlight-card__icon--blue {
  color: #60a5fa;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.55));
}

.portal-highlight-card__icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

.portal-highlight-card__body {
  flex: 1;
  min-width: 0;
}

.portal-highlight-card__title {
  color: var(--celosys-text);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.portal-highlight-card__text {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.portal-highlight-card__arrow {
  color: rgba(255, 255, 255, 0.88);
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 420px) {
  .portal-home-wallet__value {
    font-size: 1.15rem;
  }

  .portal-home-wallet__art {
    height: 3rem;
    width: 3rem;
  }
}

.portal-home-card {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: calc(var(--celosys-radius) + 4px);
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.portal-home-card:hover {
  border-color: var(--celosys-purple);
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}

.portal-home-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.portal-home-card__title {
  color: var(--celosys-text);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.portal-home-card__text {
  color: var(--celosys-text-muted);
  flex-grow: 1;
  margin-bottom: 1rem;
}

.portal-home-card__action {
  color: var(--celosys-purple-light);
  font-weight: 600;
}

.language-switcher {
  align-items: center;
  display: flex;
  gap: 0.35rem;
}

.language-switcher__link {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.language-switcher__link:hover {
  color: var(--celosys-purple-light);
}

.language-switcher__link--active {
  color: var(--celosys-purple-light);
  text-decoration: underline;
}

.language-switcher__divider {
  color: rgba(255, 255, 255, 0.2);
}

.stamp-cards-page {
  margin: 0 auto;
  max-width: 1100px;
}

.appointments-page .appointment-wizard-page {
  margin: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
}

.appointments-page .appointment-wizard {
  margin-top: 0;
}

.appointments-page.appointment-wizard-navigating .appointment-wizard__form {
  pointer-events: none;
}

.stamp-cards-page__chrome {
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: var(--celosys-home-hero-offset, 10rem);
  z-index: 20;
}

.stamp-cards-page__chrome {
  background: transparent;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: var(--celosys-home-hero-offset, 10rem);
  z-index: 20;
}

/* Single HG via .celosys-app-bg — no chrome::before clone. */

.stamp-cards-page__chrome > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   Shared C Page chrome (Meet&Trust standard) — sizes/gaps/type only
   ========================================================================== */
body.celosys-app--app-hero .stamp-cards-page > .stamp-cards-page__chrome {
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.stamp-cards-page > .stamp-cards-page__chrome > .stamp-cards-page__heading {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: calc(var(--celosys-c-heading-gap-x) * var(--celosys-u));
  height: calc(var(--celosys-c-heading-h) * var(--celosys-u));
  margin: 0 0 calc(var(--celosys-c-gap-after-heading) * var(--celosys-u));
  min-height: calc(var(--celosys-c-heading-h) * var(--celosys-u));
  padding-left: calc(var(--celosys-c-heading-pad-x) * var(--celosys-u));
  padding-right: calc(var(--celosys-c-heading-pad-x) * var(--celosys-u));
  position: relative;
  width: 100%;
}

.stamp-cards-page > .stamp-cards-page__chrome .partner-hub__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .appointments-page__logo,
.stamp-cards-page > .stamp-cards-page__chrome .credits-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .punkte-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .stamps-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .bonus-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .aktionen-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-page__heading-icon,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-events-page__heading-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: calc(var(--celosys-c-icon-h) * var(--celosys-u));
  justify-content: center;
  position: relative;
  width: calc(var(--celosys-c-icon-w) * var(--celosys-u));
}

.stamp-cards-page > .stamp-cards-page__chrome .partner-hub__heading-icon img,
.stamp-cards-page > .stamp-cards-page__chrome .appointments-page__logo img,
.stamp-cards-page > .stamp-cards-page__chrome .credits-page__heading-icon img,
.stamp-cards-page > .stamp-cards-page__chrome .punkte-page__heading-icon img,
.stamp-cards-page > .stamp-cards-page__chrome .stamps-page__heading-icon img,
.stamp-cards-page > .stamp-cards-page__chrome .bonus-page__heading-icon img,
.stamp-cards-page > .stamp-cards-page__chrome .aktionen-page__heading-icon img {
  display: block;
  height: calc(var(--celosys-c-icon-h) * var(--celosys-u));
  max-height: none;
  max-width: none;
  object-fit: contain;
  width: calc(var(--celosys-c-icon-w) * var(--celosys-u));
}

.stamp-cards-page > .stamp-cards-page__chrome .credits-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .punkte-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .stamps-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .bonus-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .aktionen-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .gift-cards-page__heading-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .appointments-page__logo-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-events-page__heading-icon-glyph,
.stamp-cards-page > .stamp-cards-page__chrome .partner-hub__heading-icon-glyph {
  color: #F8F8F8;
  font-size: calc(18 * var(--celosys-u));
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.stamp-cards-page > .stamp-cards-page__chrome .partner-hub__title,
.stamp-cards-page > .stamp-cards-page__chrome .appointments-page__title {
  flex: 1 1 auto;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-title-size) * var(--celosys-u));
  font-weight: 600;
  letter-spacing: var(--celosys-c-title-tracking);
  line-height: 1;
  margin: 0;
  min-width: 0;
  position: static;
  top: auto;
  transform: none;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-page__info-btn {
  align-items: center;
  align-self: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: calc(var(--celosys-c-info) * var(--celosys-u));
  justify-content: center;
  left: auto;
  margin: 0 0 0 auto;
  padding: 0;
  position: static;
  top: auto;
  transform: none;
  width: calc(var(--celosys-c-info) * var(--celosys-u));
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-page__info-btn img {
  display: none;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find {
  aspect-ratio: var(--celosys-c-partner-ratio-w) / var(--celosys-c-partner-ratio-h);
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--celosys-u));
  display: block;
  height: auto;
  left: auto;
  margin: 0 0 calc(var(--celosys-c-gap-after-partner) * var(--celosys-u)) var(--celosys-bar-side);
  overflow: hidden;
  padding: 0;
  position: relative;
  top: auto;
  width: var(--celosys-bar-w);
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__bg {
  display: none !important;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__row {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: calc(var(--celosys-c-partner-grid-gap) * var(--celosys-u));
  grid-template-columns:
    calc(var(--celosys-c-partner-icon-col) * var(--celosys-u))
    minmax(0, 1fr)
    calc(var(--celosys-c-partner-arrow-col) * var(--celosys-u));
  height: 100%;
  padding: 0 calc(var(--celosys-c-partner-pad-x) * var(--celosys-u));
  position: relative;
  width: 100%;
  z-index: 1;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__lupe,
.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__arrow {
  display: inline-flex;
  justify-content: center;
  left: auto;
  position: static;
  top: auto;
  transform: none;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__lupe {
  font-size: calc(var(--celosys-c-partner-lupe) * var(--celosys-u));
  line-height: 1;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__arrow {
  font-size: calc(var(--celosys-c-partner-arrow) * var(--celosys-u));
  line-height: 1;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-c-partner-text-gap) * var(--celosys-u));
  height: auto;
  justify-content: center;
  left: auto;
  min-width: 0;
  position: static;
  top: auto;
  width: auto;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__title,
.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__sub {
  display: block;
  left: auto;
  margin: 0;
  position: static;
  right: auto;
  top: auto;
  transform: none;
  white-space: normal;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__title {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-partner-title) * var(--celosys-u));
  font-weight: 700;
  line-height: 1;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-partner-find .stamp-cards-partner-find__sub {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-partner-sub) * var(--celosys-u));
  font-weight: 500;
  line-height: 1.15;
}

.stamp-cards-page > .stamp-cards-page__chrome > .stamp-cards-seg {
  aspect-ratio: var(--celosys-c-seg-ratio-w) / var(--celosys-c-seg-ratio-h);
  height: auto;
  isolation: isolate;
  left: auto;
  margin: 0 0 calc(var(--celosys-c-gap-after-seg) * var(--celosys-u)) var(--celosys-bar-side);
  overflow: visible;
  position: relative;
  top: auto;
  width: var(--celosys-bar-w);
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-seg__btn {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-tab-size) * var(--celosys-u) + 1pt);
  font-weight: 500;
  gap: calc(var(--celosys-c-tab-gap) * var(--celosys-u));
  height: 100%;
  justify-content: center;
  letter-spacing: var(--celosys-c-tab-tracking);
  line-height: 1;
  margin: 0;
  min-height: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0;
  text-decoration: none;
  transform: none;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-seg__btn .home-sf-icon,
.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-seg__btn .mt-sf-icon,
.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-seg__btn [class*="__icon"] {
  flex-shrink: 0;
  font-size: calc(var(--celosys-c-tab-icon) * var(--celosys-u));
  line-height: 1;
}

/* GiftCards optional extra: Gesamtes Guthaben */
.stamp-cards-page > .stamp-cards-page__chrome > .gift-cards-summary {
  aspect-ratio: var(--celosys-c-gift-summary-ratio-w) / var(--celosys-c-gift-summary-ratio-h);
  margin: 0 0 calc(var(--celosys-c-gift-summary-gap) * var(--celosys-u)) var(--celosys-bar-side);
  width: var(--celosys-bar-w);
}

/* Persistent sticky host removed — page chrome stays in RenderBody (avoids buried titles / layout bugs). */

.stamp-cards-page__heading {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin: 0 0 0.9rem;
  width: 100%;
}

.stamp-cards-page__heading .partner-hub__title {
  flex: 1;
  min-width: 0;
}

/* Tab switch: dissolve list instead of flashing remounted cards. */
.stamp-cards-page__body {
  transition: opacity 0.24s ease;
}

.stamp-cards-page__body--fading {
  opacity: 0;
  pointer-events: none;
}

.stamp-cards-page.is-tab-enter .stamp-cards-page__body {
  animation: stamp-cards-body-in 0.28s ease forwards;
}

@keyframes stamp-cards-body-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Info only (replaces "So funktioniert's") — vertically centered with title, right edge = QR right edge */
.stamp-cards-page__info-btn {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  flex-shrink: 0;
  height: 3.35rem;
  justify-content: center;
  line-height: 0;
  margin-left: auto;
  padding: 0;
  width: auto;
}

.stamp-cards-page__info-btn img {
  aspect-ratio: 158 / 157;
  display: block;
  height: 1.85rem;
  object-fit: contain;
  width: auto;
}

/* Lente + i — same as Events (replaces Partner finden bar) */
.stamp-cards-page__heading-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: calc(6 * var(--celosys-u));
  margin-left: auto;
}

.stamp-cards-page__heading-actions .stamp-cards-page__info-btn {
  margin-left: 0;
}

.stamp-cards-page > .stamp-cards-page__chrome .stamp-cards-page__heading-actions .stamp-cards-page__info-btn {
  margin-left: 0;
}

.stamp-cards-page__heading-actions .mt-sf-icon {
  font-size: calc(var(--celosys-c-info-icon) * var(--celosys-u));
  line-height: 1;
}

/* Segmented control: CSS track + Figma 215:533 thumb (no PNGs) */
.stamp-cards-seg {
  --stamp-cards-chrome-gap: 0.85rem;
  aspect-ratio: 2903 / 292;
  isolation: isolate;
  margin: 0 auto var(--stamp-cards-chrome-gap);
  max-width: 100%;
  position: relative;
  width: var(--celosys-card-w);
}

.stamp-cards-seg__track {
  background: var(--celosys-seg-track-bg);
  border: 0;
  border-radius: calc(var(--celosys-seg-track-radius) * var(--celosys-u));
  display: block;
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.stamp-cards-seg__track img {
  display: none !important;
}

.stamp-cards-seg__thumb {
  background-color: transparent;
  background-image: radial-gradient(
    106.6% 244.3% at 0% 0%,
    var(--celosys-seg-thumb-a) 0%,
    var(--celosys-seg-thumb-b) 49.648%,
    var(--celosys-seg-thumb-c) 62.236%,
    var(--celosys-seg-thumb-d) 74.824%,
    var(--celosys-seg-thumb-e) 87.412%,
    var(--celosys-seg-thumb-f) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-seg-thumb-radius) * var(--celosys-u));
  height: 72%;
  left: 1.6%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: 47.5%;
  z-index: 1;
}

.stamp-cards-seg__thumb img {
  display: none !important;
}

.stamp-cards-seg--offers .stamp-cards-seg__thumb {
  transform: translate3d(100%, -50%, 0);
}

.stamp-cards-seg__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

.stamp-cards-seg__btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: #B5B5B5;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
  padding: 0 0.45rem;
  text-decoration: none;
  white-space: nowrap;
}

.stamp-cards-seg__btn:hover,
.stamp-cards-seg__btn:focus-visible {
  color: #F8F8F8;
  text-decoration: none;
}

.stamp-cards-seg__btn--active {
  color: #F8F8F8;
}

/* Tab icons follow label color on every section (inactive B5 / active F8). */
.stamp-cards-seg__btn .home-sf-icon,
.stamp-cards-seg__btn .mt-sf-icon,
.stamp-cards-seg__btn .stamp-cards-seg__icon,
.stamp-cards-seg__btn [class*="seg__icon"] {
  color: inherit;
}

.stamp-cards-seg__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 1.15rem;
  line-height: 1;
  overflow: visible;
  width: 1.15rem;
}

.stamp-cards-seg__btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stamp-cards-seg__btn .home-sf-icon,
.stamp-cards-seg__btn .mt-sf-icon,
.stamp-cards-seg__btn .stamp-cards-seg__icon,
.stamp-cards-seg__btn [class*="seg__icon"] {
  flex-shrink: 0;
  overflow: visible;
  text-overflow: clip;
}

.stamp-cards-partner-find {
  --stamp-partner-find-inline: 1.1rem; /* left edge→icon = icon→text */
  --pf-plate-u: var(--celosys-u);
  /* Same radial + stroke as D-panel plates; colors remapped per section. */
  aspect-ratio: 2925 / 358;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--pf-plate-u))
      calc(var(--celosys-partner-plate-ry) * var(--pf-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--pf-plate-u))
      calc(var(--celosys-partner-plate-cy) * var(--pf-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--pf-plate-u));
  color: inherit;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  width: var(--celosys-bar-w);
}

/* Partner finden: no plate stroke — fill only (all categories share this class). */
.stamp-cards-partner-find::before {
  content: none;
  display: none;
}

.stamp-cards-partner-find__bg {
  display: none !important;
}

.stamp-cards-partner-find__row {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--stamp-partner-find-inline);
  height: 100%;
  padding: 16px var(--stamp-partner-find-inline);
  position: relative;
  width: 100%;
  z-index: 1;
}

.stamp-cards-partner-find__lupe {
  aspect-ratio: 153 / 155;
  display: block;
  flex-shrink: 0;
  height: 1.85rem;
  object-fit: contain;
  width: auto;
}

.stamp-cards-partner-find__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  text-align: left;
}

.stamp-cards-partner-find__title {
  color: #B0358B;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(1.35rem - 1pt); /* same as shop name on stamp cards */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stamp-cards-partner-find__sub {
  color: #B5B5B5; /* same as shop address */
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.stamp-cards-partner-find__arrow {
  aspect-ratio: 75 / 132;
  display: block;
  flex-shrink: 0;
  height: 1.1rem;
  margin-left: auto;
  object-fit: contain;
  width: auto;
}

.stamp-cards-partner-find:hover .stamp-cards-partner-find__title,
.stamp-cards-partner-find:focus-visible .stamp-cards-partner-find__title {
  color: #c34cae;
}

/* —— Stempelkarte plates (mine tab) — Partner plate tokens —— */
.stamp-plate {
  --stamp-plate-inset: 0.38rem;
  --stamp-logo-size: var(--celosys-shop-logo-size);
  --stamp-logo-ring-inset: var(--celosys-shop-logo-ring-inset);
  --stamp-logo-gap: var(--celosys-shop-logo-gap);
  --stamp-size: 1.35rem;
  --stamp-gap: calc(var(--stamp-size) / 2); /* half of square width */
  --stamp-plate-u: var(--celosys-u);
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-ry) * var(--stamp-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-cy) * var(--stamp-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--stamp-plate-u));
  color: #F8F8F8;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--celosys-card-w);
  overflow: hidden;
  position: relative;
  text-align: left;
  width: var(--celosys-card-w);
}

.stamp-plate::before {
  background: var(--celosys-partner-stroke-gradient);
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.stamp-plate--rows-1 {
  aspect-ratio: 2917 / 833;
}

.stamp-plate--rows-2 {
  --stamp-logo-size: 6.1rem;
  --stamp-size: 1.25rem;
  aspect-ratio: 2917 / 994;
}

.stamp-plate--rows-3 {
  --stamp-logo-size: 6.1rem;
  --stamp-size: 1.15rem;
  aspect-ratio: 2917 / 1168;
}

.stamp-plate__shop-btn {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.75);
  border-radius: 999px;
  box-sizing: border-box;
  color: #F8F8F8;
  cursor: pointer;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  padding: 0.38rem 0.7rem;
  pointer-events: auto;
  position: absolute;
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  /* Same top inset as the visible logo circle (not the transparent PNG pad) */
  top: calc(
    var(--stamp-plate-inset)
    + var(--stamp-logo-size) * var(--stamp-logo-ring-inset)
  );
  z-index: 5;
}

.stamp-plate__shop-btn:hover,
.stamp-plate__shop-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Meine Stempelkarten — same Shop öffnen edge inset as Karten entdecken */
.stamp-plate > .stamp-plate__shop-btn {
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  top: calc(var(--stamp-plate-inset) + 0.3rem);
}

.stamp-plate__main {
  /* Top of circle aligns with shop name; equal inset top/left (= gap to text) */
  align-items: flex-start;
  display: flex;
  gap: var(--stamp-plate-inset);
  height: 100%;
  padding: var(--stamp-plate-inset);
  position: relative;
  z-index: 1;
}

.stamp-plate__logo-wrap {
  flex-shrink: 0;
  height: var(--stamp-logo-size);
  position: relative;
  width: var(--stamp-logo-size);
}

.stamp-plate__logo-ring {
  background: transparent;
  border: 1.5px solid rgba(224, 100, 185, 0.95);
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: auto;
  inset: calc(var(--stamp-logo-ring-inset) * 100%);
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 1;
}

/* Shop logo centered in optical disc (inside ring stroke) */
.stamp-plate__logo {
  border-radius: 50%;
  display: block;
  height: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  left: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  width: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  z-index: 2;
}

.stamp-plate__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  /* Shop name top = visible circle top (not the transparent PNG padding) */
  padding-top: calc(var(--stamp-logo-size) * var(--stamp-logo-ring-inset));
  padding-right: var(--stamp-plate-inset);
}

.stamp-plate__shop {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* Same as Gutscheine list .gift-card__shop-name */
  font-size: calc(14 * var(--celosys-u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: calc(14 * var(--celosys-u));
  margin: 0;
  padding-right: 5.75rem; /* room for Shop öffnen */
}

.stamp-plate__address {
  /* Same as button description text */
  color: #B5B5B5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0.15rem 0 0;
}

.stamp-plate__reward {
  /* Same as partner-hub active-count line, +2pt for premio emphasis */
  color: #B0358B;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(0.76rem + 2pt);
  font-weight: 600;
  line-height: 1.25;
  margin: 0.28rem 0 0.45rem;
}

.stamp-plate__reward-banner {
  align-items: center;
  color: #bbf7d0;
  display: flex;
  font-size: 0.78rem;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}

.stamp-plate__reward-banner-count {
  align-items: center;
  background: rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.35rem;
}

.stamp-plate__stamps {
  /* Align count to stamp-row baseline; QR/chevron are separate (vertically centered) */
  align-items: flex-end;
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
  width: 100%;
}

/* Pin stamps/QR to bottom so count sits at equal inset on 1/2/3-row plates */
.stamp-plate--rows-1 .stamp-plate__content,
.stamp-plate--rows-2 .stamp-plate__content,
.stamp-plate--rows-3 .stamp-plate__content {
  align-self: stretch;
  padding-right: 0;
}

.stamp-plate--rows-1 .stamp-plate__stamps,
.stamp-plate--rows-2 .stamp-plate__stamps,
.stamp-plate--rows-3 .stamp-plate__stamps {
  margin-top: auto;
}

.stamp-plate__grid {
  display: grid;
  flex: 0 0 auto;
  gap: var(--stamp-gap);
  grid-auto-rows: var(--stamp-size);
  grid-template-columns: repeat(5, var(--stamp-size));
  min-width: 0;
}

.stamp-plate__slot {
  height: 100%;
  position: relative;
  width: 100%;
}

.stamp-plate__feld,
.stamp-plate__stempel {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.stamp-plate__feld {
  background: transparent;
  border: 0.7px solid rgba(176, 53, 139, 0.75);
  box-sizing: border-box;
  z-index: 0;
}

.stamp-plate__stempel {
  object-fit: contain;
  z-index: 1;
}

/* 2/10 — centered in space between grid and tools ≈ half prior (far-right) distance */
.stamp-plate__count {
  color: #F8F8F8;
  flex: 1 1 auto;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1;
  min-width: 0;
  padding-bottom: 0.1rem;
  padding-right: calc(52 * var(--celosys-u));
  text-align: center;
  white-space: nowrap;
}

/* Meine Stempelkarten tools — same as Meet&Trust bestätigt */
.stamp-plate__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--celosys-u));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.stamp-plate__qr,
.stamp-plate__chevron {
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--celosys-u));
  line-height: 1;
}

/* —— Angebot entdecken offer plates — Partner plate tokens —— */
.stamp-offer {
  --stamp-plate-inset: 0.38rem;
  --stamp-logo-size: var(--celosys-shop-logo-size);
  --stamp-logo-ring-inset: var(--celosys-shop-logo-ring-inset);
  --stamp-logo-gap: var(--celosys-shop-logo-gap);
  --stamp-offer-inset: var(--stamp-plate-inset);
  --stamp-offer-logo: var(--stamp-logo-size);
  --stamp-plate-u: var(--celosys-u);
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-ry) * var(--stamp-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-cy) * var(--stamp-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--stamp-plate-u));
  color: #F8F8F8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--celosys-card-w);
  overflow: hidden;
  position: relative;
  text-align: left;
  width: var(--celosys-card-w);
  aspect-ratio: 2917 / 1168;
}

.stamp-offer::before {
  background: var(--celosys-partner-stroke-gradient);
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.stamp-offer .stamp-plate__shop-btn {
  z-index: 5;
}

.stamp-offer__main {
  align-items: flex-start;
  display: flex;
  gap: var(--stamp-offer-inset);
  height: 100%;
  padding: var(--stamp-offer-inset);
  position: relative;
  z-index: 1;
}

.stamp-offer__logo-wrap {
  flex-shrink: 0;
  height: var(--stamp-offer-logo);
  position: relative;
  width: var(--stamp-offer-logo);
}

.stamp-offer__logo-ring {
  background: transparent;
  border: 1.5px solid rgba(176, 53, 139, 0.9);
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: auto;
  inset: calc(var(--stamp-logo-ring-inset) * 100%);
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 1;
}

.stamp-offer__logo {
  border-radius: 50%;
  display: block;
  height: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  left: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  width: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  z-index: 2;
}

.stamp-offer__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding-right: var(--stamp-offer-inset);
  padding-top: calc(var(--stamp-offer-logo) * 0.127);
}

.stamp-offer__shop {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* Same as Gutscheine list .gift-card__shop-name */
  font-size: calc(14 * var(--celosys-u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: calc(14 * var(--celosys-u));
  margin: 0;
  padding-right: 5.75rem;
}

.stamp-offer__address {
  color: #B5B5B5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0.15rem 0 0;
}

.stamp-offer__program {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.55rem 0 0;
}

.stamp-offer__reward {
  color: #B0358B;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.2rem 0 0;
}

.stamp-offer__stamps {
  align-items: center;
  color: #B5B5B5;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  gap: 0.4rem;
  line-height: 1.2;
  margin: 0.55rem 0 0;
}

.stamp-offer__stamps-icon {
  display: block;
  flex-shrink: 0;
  height: 1.15rem;
  object-fit: contain;
  width: 1.15rem;
}

.stamp-offer__activate-form {
  margin: 0.7rem 0 0;
}

.stamp-offer__activate {
  background: #B0358B;
  border: 0;
  border-radius: 999px;
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.7rem;
}

.stamp-offer__activate:hover,
.stamp-offer__activate:focus-visible {
  background: #c34cae;
  color: #fff;
}

.stamp-offer__badge {
  align-self: flex-start;
  background: rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  color: #bbf7d0;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.7rem;
  padding: 0.35rem 0.75rem;
}

/* Stempelkarten entdecken — no Shop öffnen; corner pills; Meine-like chevron */
.stamp-offer--stamp-discover {
  --stamp-discover-edge: calc(var(--stamp-plate-inset) + 0.3rem);
  aspect-ratio: auto;
  height: auto;
}

.stamp-offer--stamp-discover .stamp-offer__main {
  height: auto;
  min-height: var(--stamp-offer-logo);
}

.stamp-offer--stamp-discover .stamp-offer__content {
  padding-right: calc(28 * var(--celosys-u));
}

.stamp-offer--stamp-discover .stamp-offer__reward {
  margin-top: 0.12rem;
}

.stamp-offer--stamp-discover.stamp-offer--openable {
  cursor: pointer;
}

.stamp-offer--stamp-discover .stamp-offer__badge--corner {
  align-items: center;
  bottom: var(--stamp-discover-edge);
  box-sizing: border-box;
  display: inline-flex;
  font-size: calc(0.75rem - 1pt);
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0.22rem 0.65rem;
  position: absolute;
  right: var(--stamp-discover-edge);
  top: auto;
  z-index: 3;
}

.stamp-offer--stamp-discover .stamp-offer__badge--corner:not(.stamp-offer__badge--outline) {
  border: 1px solid #bbf7d0;
}

.stamp-offer--stamp-discover .stamp-offer__badge--outline {
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.75);
  color: #f8f8f8;
  font-weight: 600;
}

.stamp-offer--stamp-discover .stamp-offer__stamp-foot {
  align-items: center;
  display: flex;
  gap: 0.45rem 0.55rem;
  margin-top: 0.28rem;
  padding-right: calc(5.5rem);
  width: 100%;
}

.stamp-offer__stamps--inline {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

/* Same tools chrome as Meine Stempelkarten / Meet&Trust bestätigt */
.stamp-offer--stamp-discover .stamp-offer__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--celosys-u));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.stamp-offer--stamp-discover .stamp-offer__chevron {
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--celosys-u));
  line-height: 1;
}

.stamp-card-detail-sheet__reward-label {
  margin-right: 0.25em;
}

.stamp-card-detail-sheet__activate-form {
  display: flex;
  justify-content: center;
  margin: 0 auto calc(15.67 / 390 * 100cqw);
  width: var(--gift-sheet-card-w, calc(350 * var(--celosys-u)));
}

.stamp-card-detail-sheet__activate {
  background: #b0358b;
  border: 0;
  border-radius: calc(15 * var(--celosys-u));
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--celosys-u));
  font-weight: 600;
  height: calc(36 * var(--celosys-u));
  letter-spacing: -0.004px;
  line-height: 1;
  min-width: calc(169 * var(--celosys-u));
  padding: 0 calc(20 * var(--celosys-u));
}

.stamp-card-detail-sheet__activate:hover,
.stamp-card-detail-sheet__activate:focus-visible {
  background: #c34cae;
  color: #fff;
}

.stamp-offer--activated .stamp-offer__activate-form:not(.stamp-cards-deactivate-form) {
  display: none;
}

.stamp-offer__activate--ghost {
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.45);
  color: #F8F8F8;
}

.stamp-offer__activate--ghost:hover,
.stamp-offer__activate--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.stamp-offer__qr {
  background: #fff;
  border-radius: 0.45rem;
  display: block;
  height: auto;
  margin-top: 0.7rem;
  max-width: 4.5rem;
  padding: 0.25rem;
  width: 4.5rem;
}

/* Bonus plates: Stempelkarte chrome (keep progress bar; no spend under bar on list). */
.bonus-page .stamp-offer--bonus-mine,
.bonus-page .stamp-offer--bonus-discover,
.aktionen-page .stamp-offer--aktionen-mine,
.aktionen-page .stamp-offer--aktionen-discover {
  aspect-ratio: auto;
  height: auto;
  overflow: hidden;
}

.bonus-page .stamp-offer--bonus-mine.stamp-offer--openable,
.bonus-page .stamp-offer--bonus-discover.stamp-offer--openable,
.aktionen-page .stamp-offer--aktionen-mine.stamp-offer--openable,
.aktionen-page .stamp-offer--aktionen-discover.stamp-offer--openable {
  cursor: pointer;
}

.bonus-page .stamp-offer--bonus-mine .stamp-offer__main,
.bonus-page .stamp-offer--bonus-discover .stamp-offer__main,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__main,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__main {
  height: auto;
  min-height: var(--stamp-offer-logo);
}

.bonus-page .stamp-offer--bonus-discover,
.aktionen-page .stamp-offer--aktionen-discover {
  --stamp-discover-edge: calc(var(--stamp-plate-inset) + 0.3rem);
  aspect-ratio: auto;
}

.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__main {
  align-items: stretch;
}

.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding-bottom: calc(4 * var(--celosys-u));
  padding-right: calc(34 * var(--celosys-u));
}

/* Corner CTA (Video ansehen…) is absolute — reserve a text-line of height so it does not cover meta. */
.aktionen-page .stamp-offer--aktionen-discover:has(.stamp-offer__badge--aktionen-cta) .stamp-offer__content {
  padding-bottom: calc(var(--stamp-discover-edge) + 1.85rem);
}

.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--aktionen-cta {
  font-size: calc(0.62rem + 1pt);
  line-height: 1.1;
  max-width: none;
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
}

.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--aktionen-unavailable,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--unavailable {
  background: rgba(231, 111, 81, 0.18);
  border: 1px solid #e76f51;
  color: #e76f51;
  font-size: calc(0.62rem + 1pt);
  font-weight: 600;
  line-height: 1.1;
  max-width: none;
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
}

.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__tools {
  justify-content: center;
  width: calc(34 * var(--celosys-u));
}

.bonus-page .stamp-offer--bonus-discover .stamp-offer__content {
  padding-right: calc(28 * var(--celosys-u));
}

.bonus-page .stamp-offer--bonus-mine .stamp-offer__content,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__content {
  padding-bottom: calc(8 * var(--celosys-u));
  padding-right: calc(56 * var(--celosys-u));
}

.aktionen-page .stamp-offer--aktionen-mine.stamp-offer--spent .stamp-offer__content {
  padding-right: calc(34 * var(--celosys-u));
}

.aktionen-page .stamp-offer--aktionen-mine.stamp-offer--spent .stamp-offer__tools {
  justify-content: center;
  width: calc(34 * var(--celosys-u));
}

.bonus-page .stamp-offer--bonus-mine .stamp-offer__content,
.bonus-page .stamp-offer--bonus-discover .stamp-offer__content,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__content,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__content {
  padding-top: calc(var(--stamp-offer-logo) * var(--stamp-logo-ring-inset));
}

/* Match Meine Stempelkarte .stamp-plate__reward (not smaller) */
.bonus-page .stamp-offer__reward {
  color: #b0358b;
  font-size: calc(0.76rem + 2pt);
  font-weight: 600;
  line-height: 1.25;
  margin: 0.28rem 0 0.45rem;
}

.aktionen-page .stamp-offer__reward {
  color: #b0358b;
  font-size: calc(0.76rem + 4pt);
  font-weight: 600;
  line-height: 1.25;
  margin: 0.28rem 0 0.45rem;
}

.aktionen-page .stamp-offer__aktion-pool,
.aktionen-page .stamp-offer__aktion-valid {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--celosys-u) - 2pt);
  font-weight: 500;
  line-height: 1.25;
  margin: 0.12rem 0 0;
}

.aktionen-page .stamp-offer__aktion-valid {
  margin-bottom: 0.18rem;
}

.bonus-page .stamp-offer__shop,
.aktionen-page .stamp-offer__shop {
  color: #f8f8f8;
  font-size: calc(14 * var(--celosys-u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: calc(14 * var(--celosys-u));
}

.bonus-page .stamp-offer__address,
.aktionen-page .stamp-offer__address {
  color: #b5b5b5;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.bonus-page .bonus-plate-progress {
  background: #2a2a2a;
  border-radius: 999px;
  height: 1.35rem;
  margin: 0.15rem 0 0.55rem;
  position: relative;
  width: 100%;
}

.bonus-page .bonus-plate-progress__min,
.bonus-page .bonus-plate-progress__max {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.76rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bonus-page .bonus-plate-progress__min {
  font-weight: 300;
  left: 0.45rem;
}

.bonus-page .bonus-plate-progress__max {
  font-weight: 500;
  right: 0.45rem;
}

.bonus-page .bonus-plate-progress__ticks {
  align-items: stretch;
  display: flex;
  gap: 0.12rem;
  height: 0.42rem;
  left: 2.15rem;
  position: absolute;
  right: 2.65rem;
  top: 50%;
  transform: translateY(-50%);
}

.bonus-page .bonus-plate-progress__tick {
  background: rgba(176, 53, 139, 0.22);
  border-radius: 1px;
  flex: 1 1 0;
  min-width: 0;
}

.bonus-page .bonus-plate-progress__tick.is-on {
  background: #b0358b;
  opacity: var(--tick-on-opacity, 1);
}

/* Progress bar also in overlay (outside .bonus-page) */
.bonus-detail-sheet .bonus-plate-progress {
  background: #2a2a2a;
  border-radius: 999px;
  height: 1.35rem;
  margin: 0;
  position: relative;
  width: 100%;
}

.bonus-detail-sheet .bonus-plate-progress__min,
.bonus-detail-sheet .bonus-plate-progress__max {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bonus-detail-sheet .bonus-plate-progress__min {
  font-weight: 300;
  left: 0.45rem;
}

.bonus-detail-sheet .bonus-plate-progress__max {
  font-weight: 500;
  right: 0.45rem;
}

.bonus-detail-sheet .bonus-plate-progress__ticks {
  align-items: stretch;
  display: flex;
  gap: 0.12rem;
  height: 0.42rem;
  left: 2.15rem;
  position: absolute;
  right: 2.65rem;
  top: 50%;
  transform: translateY(-50%);
}

.bonus-detail-sheet .bonus-plate-progress__tick {
  background: rgba(176, 53, 139, 0.22);
  border-radius: 1px;
  flex: 1 1 0;
  min-width: 0;
}

.bonus-detail-sheet .bonus-plate-progress__tick.is-on {
  background: #b0358b;
  opacity: var(--tick-on-opacity, 1);
}

/* Meine Bonus / Meine Aktionen tools = Meine Stempelkarten */
.bonus-page .stamp-offer--bonus-mine .stamp-offer__tools,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--celosys-u));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.bonus-page .stamp-offer--bonus-mine .stamp-offer__tools .stamp-plate__qr,
.bonus-page .stamp-offer--bonus-mine .stamp-offer__tools .stamp-plate__chevron,
.bonus-page .stamp-offer--bonus-discover .stamp-offer__chevron,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__tools .stamp-plate__qr,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__tools .stamp-plate__chevron,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__chevron {
  background: transparent;
  border-radius: 0;
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--celosys-u));
  height: auto;
  line-height: 1;
  margin: 0;
  max-width: none;
  padding: 0;
  width: auto;
}

/* Bonus / Aktionen entdecken corner pills + tools = Karten entdecken */
.bonus-page .stamp-offer--bonus-discover .stamp-offer__badge--corner,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--corner {
  align-items: center;
  bottom: var(--stamp-discover-edge);
  box-sizing: border-box;
  display: inline-flex;
  font-size: calc(0.75rem - 1pt);
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0.22rem 0.65rem;
  position: absolute;
  right: var(--stamp-discover-edge);
  top: auto;
  z-index: 3;
}

.bonus-page .stamp-offer--bonus-discover .stamp-offer__badge--corner:not(.stamp-offer__badge--outline),
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--corner:not(.stamp-offer__badge--outline) {
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid #bbf7d0;
  color: #bbf7d0;
}

.bonus-page .stamp-offer--bonus-discover .stamp-offer__badge--outline,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__badge--outline {
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.75);
  color: #f8f8f8;
  font-weight: 600;
}

.bonus-page .stamp-offer--bonus-discover .stamp-offer__tools,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--celosys-u));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(var(--stamp-plate-inset) + 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.bonus-page .stamp-offer--bonus-discover .stamp-offer__stamp-foot,
.aktionen-page .stamp-offer--aktionen-discover .stamp-offer__stamp-foot,
.aktionen-page .stamp-offer--aktionen-mine .stamp-offer__stamp-foot {
  margin-top: 0.28rem;
  padding-right: calc(5.5rem);
}

.bonus-detail-sheet__spend-under {
  display: none;
}

/* Bar higher + room for spend/meta line under it (inside hero) */
.bonus-detail-sheet__bar-block {
  bottom: calc(18 / 218.61 * 100%);
  left: calc(20 / 350 * 100%);
  position: absolute;
  right: calc(20 / 350 * 100%);
  z-index: 5;
}

.bonus-detail-sheet.stamp-card-detail-sheet .bonus-card-sheet__hero .bonus-detail-sheet__progress,
.bonus-detail-sheet .bonus-detail-sheet__progress {
  display: block !important;
  height: 1.35rem;
  left: auto;
  margin: 0;
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 2;
}

/* Same type as Karten-entdecken overlay: .stamp-card-detail-sheet__count--meta
   (must override absolute .stamp-card-detail-sheet__count when nested under the bar) */
.bonus-detail-sheet__bar-block .bonus-detail-sheet__spend-line,
.bonus-detail-sheet__bar-block .bonus-detail-sheet__spend-line.stamp-card-detail-sheet__count {
  bottom: auto;
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--celosys-u) - 2pt);
  font-weight: 700;
  left: auto;
  line-height: 1.15;
  margin: calc(10 * var(--celosys-u)) 0 0;
  max-width: none;
  position: static;
  right: auto;
  text-align: left;
}

.bonus-detail-sheet .bonus-detail-sheet__meta {
  display: none;
}

.bonus-detail-sheet .stamp-card-detail-sheet__reward {
  top: calc(62 / 218.61 * 100%);
}

.bonus-page__flash {
  background: rgba(20, 12, 18, 0.92);
  border: 0.7px solid rgba(176, 53, 139, 0.55);
  border-radius: calc(8 * var(--celosys-u));
  color: #f8f8f8;
  font-size: calc(12 * var(--celosys-u));
  margin: 0 auto calc(12 * var(--celosys-u));
  max-width: var(--celosys-card-w);
  padding: calc(10 * var(--celosys-u)) calc(12 * var(--celosys-u));
  position: relative;
  width: var(--celosys-card-w);
  z-index: 2;
}

/* Bonus QR overlay — Gutscheine gift-card-sheet chrome, Figma 268:4150 content */
.bonus-card-sheet.gift-card-sheet {
  --gift-u: var(--celosys-u);
}

.bonus-card-sheet .gift-card-sheet__cta-label {
  color: #b0358b;
}

.bonus-card-sheet__toolbar {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  width: var(--gift-sheet-card-w);
}

.bonus-card-sheet .bonus-card-sheet__close {
  color: #b5b5b5;
  height: auto;
  margin: 0 calc(6.37 / 350 * 100%) calc(6.71 / 390 * 100cqw) 0;
  position: relative;
  right: auto;
  top: auto;
  width: calc(25.75 / 350 * 100%);
}

.bonus-card-sheet__hero {
  --stamp-logo-gap: var(--celosys-shop-logo-gap);
  --stamp-logo-ring-inset: var(--celosys-shop-logo-ring-inset);
  --stamp-offer-logo: var(--celosys-shop-logo-size);
  --stamp-plate-u: var(--celosys-u);
  aspect-ratio: 350 / 218.61;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-ry) * var(--stamp-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--stamp-plate-u))
      calc(var(--celosys-partner-plate-cy) * var(--stamp-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--stamp-plate-u));
  box-sizing: border-box;
  margin: 0 auto calc(37.63 / 390 * 100cqw);
  overflow: hidden;
  position: relative;
  width: var(--gift-sheet-card-w);
}

.bonus-card-sheet__hero::before {
  background: var(--celosys-partner-stroke-gradient);
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.bonus-card-sheet__hero .bonus-card-sheet__logo-wrap {
  height: var(--celosys-shop-logo-size);
  left: calc(1.5 / 350 * 100%);
  position: absolute;
  top: calc(17.79 / 218.61 * 100%);
  width: var(--celosys-shop-logo-size);
  z-index: 2;
}

.bonus-card-sheet__hero .stamp-plate__shop-btn {
  font-size: calc(7.5 / 390 * 100cqw);
  padding: calc(3.5 / 390 * 100cqw) calc(8 / 390 * 100cqw);
  right: calc(6.68 / 350 * 100%);
  top: calc(15.18 / 218.61 * 100%);
  z-index: 5;
}

.bonus-card-sheet__head {
  left: calc(95 / 350 * 100%);
  pointer-events: none;
  position: absolute;
  right: calc(12 / 350 * 100%);
  top: calc(16.09 / 218.61 * 100%);
  z-index: 2;
}

.bonus-card-sheet__from {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

.bonus-card-sheet__shop {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 / 390 * 100cqw);
  font-weight: 700;
  letter-spacing: -0.04px;
  line-height: 1;
  margin: calc(4.68 / 390 * 100cqw) 0 0;
}

.bonus-card-sheet__address {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  line-height: 1;
  margin: calc(3.32 / 390 * 100cqw) 0 0;
}

.bonus-card-sheet__reward {
  color: #b0358b;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 / 390 * 100cqw);
  font-weight: 700;
  left: calc(95 / 350 * 100%);
  line-height: 1;
  margin: 0;
  position: absolute;
  right: calc(12 / 350 * 100%);
  top: calc(76.31 / 218.61 * 100%);
  z-index: 2;
}

.bonus-card-sheet__spend {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  left: calc(95 / 350 * 100%);
  line-height: 1;
  margin: 0;
  position: absolute;
  right: calc(12 / 350 * 100%);
  top: calc(126.09 / 218.61 * 100%);
  z-index: 2;
}

.bonus-card-sheet__hero .bonus-card-sheet__progress {
  height: calc(21.94 / 218.61 * 100%);
  left: calc(92.49 / 350 * 100%);
  margin: 0;
  position: absolute;
  top: calc(144.77 / 218.61 * 100%);
  width: calc(241.5 / 350 * 100%);
  z-index: 2;
}

/* Bonus detail sheet: bar lives in .bonus-detail-sheet__bar-block (not old absolute slot) */
.bonus-detail-sheet .bonus-card-sheet__hero .bonus-card-sheet__progress.bonus-detail-sheet__progress {
  height: 1.35rem;
  left: auto;
  margin: 0 0 calc(6 / 218.61 * 100%);
  position: relative;
  top: auto;
  width: 100%;
}

.bonus-card-sheet__hero .bonus-plate-progress__min,
.bonus-card-sheet__hero .bonus-plate-progress__max {
  font-size: calc(9 / 390 * 100cqw);
}

.bonus-card-sheet__rule {
  margin-top: 0;
  width: var(--gift-sheet-card-w);
}

.bonus-card-sheet__deactivate {
  display: flex;
  justify-content: center;
  margin: calc(21.51 / 390 * 100cqw) auto 0;
  width: var(--gift-sheet-card-w);
}

.bonus-card-sheet__deactivate-btn {
  align-items: center;
  background: transparent;
  border: 1px solid #e76f51;
  border-radius: 999px;
  color: #e76f51;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(8.1 / 390 * 100cqw);
  font-weight: 600;
  gap: calc(2.6 / 390 * 100cqw);
  letter-spacing: 0.14px;
  line-height: 1;
  padding: calc(4 / 390 * 100cqw) calc(10 / 390 * 100cqw);
}

.bonus-card-sheet__deactivate-btn:hover,
.bonus-card-sheet__deactivate-btn:focus-visible {
  background: rgba(231, 111, 81, 0.12);
  color: #e76f51;
}

.bonus-card-sheet__deactivate-icon {
  font-size: calc(7.5 / 390 * 100cqw);
  line-height: 1;
}

.partner-offer-list {
  display: grid;
  gap: calc(var(--celosys-d-gap) * var(--celosys-u));
  margin: 0;
  padding: 0 0 0.5rem;
  width: 100%;
}

.stamp-cards-page__section-title {
  color: var(--celosys-text, #1a1a1a);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.55rem;
  padding-top: 0.15rem;
}

.stamp-cards-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.stamp-cards-page__body {
  /* Same gap as tabs → Partner finden */
  padding-top: 0.85rem;
}

.stamp-cards-page__action-btn {
  background: transparent;
  border: 1px solid rgba(142, 90, 213, 0.55);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stamp-cards-page__action-btn:hover,
.stamp-cards-page__action-btn:focus {
  background: rgba(142, 90, 213, 0.14);
  border-color: var(--celosys-purple);
  color: #fff;
}

.stamp-cards-info__intro {
  color: var(--celosys-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.stamp-cards-info__empty {
  color: var(--celosys-text-muted);
  font-size: 0.92rem;
  margin: 0;
}

.stamp-cards-partner-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stamp-cards-partner-list__item {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--celosys-border);
  border-radius: var(--celosys-radius);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stamp-cards-partner-list__item:hover {
  border-color: rgba(142, 90, 213, 0.45);
}

.stamp-cards-partner-list__item--selected {
  background: rgba(142, 90, 213, 0.32);
  border-color: var(--celosys-purple-light);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.55);
}

.stamp-cards-partner-list__select {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  padding: 0;
  text-align: left;
  touch-action: manipulation;
}

.stamp-cards-partner-list__item--selected .stamp-cards-partner-list__name {
  color: #fff;
}

.stamp-cards-partner-list__details {
  align-items: center;
  background: rgba(142, 90, 213, 0.18);
  border: 1px solid rgba(142, 90, 213, 0.55);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.stamp-cards-partner-list__details:hover {
  background: rgba(142, 90, 213, 0.32);
  color: #fff;
}

.stamp-cards-partner-list__name {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0;
}

.stamp-cards-partner-list__address,
.stamp-cards-partner-list__reward,
.stamp-cards-partner-list__contact {
  color: var(--celosys-text-muted);
  display: block;
  font-size: 0.84rem;
  line-height: 1.35;
  margin: 0.2rem 0 0;
}

.stamp-cards-partner-list__contact a {
  color: var(--celosys-purple-light);
  text-decoration: none;
}

.stamp-cards-partner-list__contact a:hover {
  text-decoration: underline;
}

.stamp-cards-partner-list__reward {
  color: var(--celosys-purple-light);
  font-weight: 600;
}

.stamp-cards-partner-list--fallback {
  margin-top: 1rem;
}

.stamp-cards-how-list {
  color: var(--celosys-text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.2rem;
}

.stamp-cards-how-list li {
  line-height: 1.5;
  padding-left: 0.2rem;
}

.stamp-cards-how__title {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.45rem;
}

.stamp-cards-how__subtitle {
  color: var(--celosys-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.35rem;
}

.stamp-cards-how__steps {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stamp-cards-how-step {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 2rem minmax(0, 1fr);
}

.stamp-cards-how-step__rail {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stamp-cards-how-step__number {
  align-items: center;
  background: var(--celosys-purple);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

.stamp-cards-how-step__line {
  background: rgba(142, 90, 213, 0.35);
  flex: 1;
  margin-top: 0.35rem;
  min-height: 2.5rem;
  width: 2px;
}

.stamp-cards-how-step--last .stamp-cards-how-step__line {
  display: none;
}

.stamp-cards-how-step__main {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) clamp(5rem, 24vw, 7.5rem);
}

.stamp-cards-how-step__header {
  align-items: flex-start;
  display: flex;
  gap: 0.65rem;
  grid-column: 1;
  min-width: 0;
}

.stamp-cards-how-step__icon {
  align-items: center;
  background: rgba(142, 90, 213, 0.18);
  border: 1px solid rgba(142, 90, 213, 0.45);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  display: inline-flex;
  flex-shrink: 0;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.stamp-cards-how-step__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.stamp-cards-how-step__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25rem;
}

.stamp-cards-how-step__desc {
  color: var(--celosys-text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

.stamp-cards-how-step__visual {
  align-self: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--celosys-border);
  border-radius: 14px;
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
  min-height: 4.8rem;
  padding: 0.5rem;
  width: 100%;
}

.stamp-cards-how-phone {
  background: #111;
  border: 2px solid rgba(142, 90, 213, 0.55);
  border-radius: 14px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0.35rem;
  width: 100%;
}

.stamp-cards-how-phone__screen {
  align-items: center;
  background: #000;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.5rem;
}

.stamp-cards-how-qr {
  background:
    linear-gradient(90deg, #fff 50%, transparent 50%) 0 0 / 4px 4px,
    linear-gradient(#fff 50%, transparent 50%) 0 0 / 4px 4px;
  border: 2px solid #fff;
  height: 2.4rem;
  opacity: 0.95;
  width: 2.4rem;
}

.stamp-cards-how-phone__label {
  color: var(--celosys-purple-light);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.stamp-cards-how-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.stamp-cards-how-stamps--compact {
  gap: 0.3rem;
}

.stamp-cards-how-stamps__slot {
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  height: 1.35rem;
  width: 1.35rem;
}

.stamp-cards-how-stamps__slot--filled {
  background: rgba(142, 90, 213, 0.35);
  border-color: var(--celosys-purple);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45);
  position: relative;
}

.stamp-cards-how-stamps__slot--filled::after {
  color: #fff;
  content: "✓";
  font-size: 0.72rem;
  font-weight: 800;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -52%);
}

.stamp-cards-how-reward {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.stamp-cards-how-reward__gift {
  align-items: center;
  color: var(--celosys-purple-light);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.stamp-cards-how-reward__gift svg {
  height: 100%;
  width: 100%;
}

.stamp-cards-how-reward__badge {
  background: rgba(142, 90, 213, 0.22);
  border: 1px solid rgba(142, 90, 213, 0.55);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
}

.stamp-cards-how-progress-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.stamp-cards-how-progress-card__label {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.stamp-cards-how-tip {
  align-items: flex-start;
  background: rgba(142, 90, 213, 0.12);
  border: 1px solid rgba(142, 90, 213, 0.35);
  border-radius: 14px;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
}

.stamp-cards-how-tip__icon {
  align-items: center;
  background: rgba(142, 90, 213, 0.25);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.stamp-cards-how-tip__icon svg {
  height: 1rem;
  width: 1rem;
}

.stamp-cards-how-tip__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.stamp-cards-how-tip__text {
  color: var(--celosys-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 640px) {
  .stamp-cards-how-step__main {
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) 9.5rem;
  }

  .stamp-cards-how-step__header {
    gap: 0.75rem;
  }

  .stamp-cards-how-step__visual {
    min-height: 6.5rem;
    padding: 0.85rem;
  }

  .stamp-cards-how-phone {
    border-radius: 16px;
    max-width: 7rem;
    padding: 0.45rem;
  }
}

.stamp-cards-map {
  background: #111111;
  border: 1px solid var(--celosys-border);
  border-radius: var(--celosys-radius);
  min-height: min(60vh, 420px);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.stamp-cards-map__canvas {
  height: min(60vh, 420px);
  width: 100%;
}

.stamp-cards-map__status {
  align-items: center;
  color: var(--celosys-text-muted);
  display: flex;
  font-size: 0.92rem;
  justify-content: center;
  margin: 0;
  min-height: min(60vh, 420px);
  padding: 1rem;
  text-align: center;
}

/*
 * Map/list + shop/company detail sheets.
 * Bootstrap .modal-dialog-centered uses min-height ~100vh and stretches the sheet
 * under the iOS status bar — kill that and inset with safe-area margins.
 */
.stamp-cards-where-modal__dialog,
.stamp-cards-partner-modal__dialog,
#stampCardsWhereModal .modal-dialog,
#stampCardsPartnerModal .modal-dialog {
  --bs-modal-margin: 0;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: auto !important;
  margin: max(3.25rem, calc(env(safe-area-inset-top, 0px) + 0.85rem)) auto max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 4.5rem) !important;
  max-width: min(22.5rem, calc(100vw - 2.75rem)) !important;
  min-height: 0 !important;
  width: calc(100vw - 2.75rem) !important;
}

#stampCardsWhereModal .modal-content,
#stampCardsPartnerModal .modal-content,
.modal-content.stamp-cards-partner-modal {
  border-radius: 16px;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) .modal-header {
  flex: 0 0 auto;
  padding-bottom: 0.35rem;
  padding-top: 0.85rem;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) .stamp-cards-where-modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.85rem;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) .stamp-cards-where-modal__body .stamp-cards-info__intro {
  flex: 0 0 auto;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) .stamp-cards-where-modal__body .stamp-cards-map {
  flex: 0 0 auto;
  min-height: 11.5rem;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) .stamp-cards-where-modal__body .stamp-cards-map__canvas,
#stampCardsWhereModal:not(.gift-cards-where-modal) .stamp-cards-where-modal__body .stamp-cards-map__status {
  height: 11.5rem;
  min-height: 11.5rem;
}

#stampCardsWhereModal:not(.gift-cards-where-modal) #stampCardsPartnerList {
  flex: 1 1 auto;
  margin-top: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
}

/* Leftover Bootstrap fullscreen class — never go edge-to-edge. */
@media (max-width: 575.98px) {
  #stampCardsWhereModal .modal-fullscreen-sm-down,
  #stampCardsPartnerModal .modal-fullscreen-sm-down {
    height: auto !important;
    margin: max(3.25rem, calc(env(safe-area-inset-top, 0px) + 0.85rem)) auto max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 4.5rem) !important;
    max-width: min(22.5rem, calc(100vw - 2.75rem)) !important;
    min-height: 0 !important;
    width: calc(100vw - 2.75rem) !important;
  }

  #stampCardsWhereModal .modal-fullscreen-sm-down .modal-content,
  #stampCardsPartnerModal .modal-fullscreen-sm-down .modal-content {
    border-radius: 16px !important;
    height: auto !important;
    max-height: 100% !important;
  }
}

/*
 * Partner finden overlay — Gutscheine is the size standard (Frame 17 / 71:3053).
 * Shared by Credits / Punkte / Stempel / Bonus / Aktionen / Meet&Trust / Gift.
 * Only accents change via data-partner-theme → --where-accent.
 */
.gift-cards-where-modal {
  --where-accent: #695da5;
  --where-accent-soft: rgba(105, 93, 165, 0.22);
  --where-u: var(--celosys-u);
  /* Match gift-card sheet: content floats on dim — no grey card frame. */
  --bs-modal-bg: transparent;
}

/* Meet&Trust Partner finden — same chrome, amber accents. */
.gift-cards-where-modal[data-partner-theme="amber"] {
  --where-accent: #f5a623;
  --where-accent-soft: rgba(245, 166, 35, 0.22);
}

/* Credits / Punkte / Stempel / Bonus / Aktionen — magenta */
.gift-cards-where-modal[data-partner-theme="purple"] {
  --where-accent: #b0358b;
  --where-accent-soft: rgba(176, 53, 139, 0.22);
}

/* Tickets — coral */
.gift-cards-where-modal[data-partner-theme="coral"] {
  --where-accent: #e76f51;
  --where-accent-soft: rgba(231, 111, 81, 0.22);
}

/* Fullscreen dim like unified overlay (95%). */
.gift-cards-where-modal.modal {
  --bs-backdrop-opacity: 0.95;
  --where-u: var(--celosys-u);
}

body:has(.gift-cards-where-modal.show) .modal-backdrop {
  background: var(--celosys-overlay-backdrop);
  background-color: #000;
  opacity: 1 !important;
}

/* Partner finden — docked bottom sheet = celosys-overlay-sheet size */
.gift-cards-where-modal.celosys-overlay-sheet .gift-cards-where-modal__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 calc(12 * var(--where-u, var(--celosys-u))) calc(18 * var(--where-u, var(--celosys-u)) + env(safe-area-inset-bottom, 0px));
}

.gift-cards-where-modal.celosys-overlay-sheet .gift-cards-where-modal__header {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: calc(8 * var(--where-u, var(--celosys-u)));
  padding: calc(8 * var(--where-u, var(--celosys-u))) 0 0;
}

.gift-cards-where-modal.celosys-overlay-sheet .gift-cards-where-modal__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  display: inline-flex;
  flex-shrink: 0;
  font-size: calc(18 * var(--where-u, var(--celosys-u)));
  height: calc(28 * var(--where-u, var(--celosys-u)));
  justify-content: center;
  line-height: 1;
  margin: 0;
  opacity: 0.95;
  padding: 0;
  width: calc(28 * var(--where-u, var(--celosys-u)));
}

.gift-cards-where-modal.celosys-overlay-sheet .gift-cards-where-modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(10 * var(--where-u, var(--celosys-u))) 0 0;
}

.gift-cards-where-modal.celosys-overlay-sheet .gift-cards-where-modal__map.stamp-cards-map {
  flex: 0 0 auto;
}

.celosys-how-sheet__panel {
  padding: 0 calc(12 * var(--celosys-u)) calc(18 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
}

.celosys-how-sheet__top {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: calc(8 * var(--celosys-u)) 0 0;
}

.celosys-how-sheet__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  display: inline-flex;
  font-size: calc(18 * var(--celosys-u));
  height: calc(28 * var(--celosys-u));
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: calc(28 * var(--celosys-u));
}

.celosys-how-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(4 * var(--celosys-u));
}

/* Credits How — Figma 149:7752 (centered card + step icons) */
.credits-how-sheet__panel {
  padding: 0;
  position: relative;
}

.credits-how {
  --ch-u: var(--celosys-u);
  box-sizing: border-box;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(36 * var(--ch-u)) calc(20 * var(--ch-u)) calc(24 * var(--ch-u) + env(safe-area-inset-bottom, 0px));
  position: relative;
}

.credits-how__close {
  background: transparent;
  border: 0;
  color: #b5b5b5;
  display: grid;
  font-size: calc(20 * var(--ch-u, var(--celosys-u)));
  height: calc(32 * var(--ch-u, var(--celosys-u)));
  place-items: center;
  position: absolute;
  right: calc(15 * var(--ch-u, var(--celosys-u)));
  top: calc(27 * var(--ch-u, var(--celosys-u)));
  width: calc(32 * var(--ch-u, var(--celosys-u)));
  z-index: 2;
}

.credits-how__header {
  margin: 0 0 calc(40 * var(--ch-u));
  max-width: calc(330 * var(--ch-u));
  padding-right: calc(36 * var(--ch-u));
}

.credits-how__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--ch-u));
  font-weight: 600;
  line-height: calc(20 * var(--ch-u));
  margin: 0 0 calc(10 * var(--ch-u));
}

.credits-how__subtitle {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--ch-u));
  font-weight: 500;
  line-height: calc(10 * var(--ch-u));
  margin: 0;
}

.credits-how__card {
  background-image: linear-gradient(
    255.39deg,
    rgb(48, 14, 38) 10.657%,
    rgba(0, 0, 0, 0) 63.827%
  );
  border: 0.8px solid #6c5966;
  border-radius: calc(10 * var(--ch-u));
  box-sizing: border-box;
  margin: 0 auto;
  max-width: calc(264.4 * var(--ch-u));
  min-height: calc(433.51 * var(--ch-u));
  padding: calc(20 * var(--ch-u)) calc(18 * var(--ch-u)) calc(24 * var(--ch-u));
  position: relative;
  width: 100%;
}

.credits-how__steps {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--ch-u));
  list-style: none;
  margin: 0;
  padding: 0;
}

.credits-how-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
}

.credits-how-step__num {
  align-items: center;
  background-image: radial-gradient(
    115% 200% at 25% 0%,
    rgba(176, 53, 139, 1) 60%,
    rgba(176, 53, 139, 0.2) 100%
  );
  border-radius: calc(10 * var(--ch-u));
  box-sizing: border-box;
  color: #f8f8f8;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--ch-u));
  font-weight: 500;
  height: calc(20 * var(--ch-u));
  justify-content: center;
  left: calc(-27 * var(--ch-u));
  line-height: 1;
  position: absolute;
  top: calc(8 * var(--ch-u));
  width: calc(20 * var(--ch-u));
}

.credits-how-step:nth-child(1) .credits-how-step__num {
  opacity: 0.4;
}

.credits-how-step:nth-child(2) .credits-how-step__num {
  opacity: 0.6;
}

.credits-how-step:nth-child(3) .credits-how-step__num {
  opacity: 0.9;
}

.credits-how-step__glyph {
  color: #b0358b;
  display: block;
  font-size: calc(35 * var(--ch-u));
  height: calc(35 * var(--ch-u));
  line-height: 1;
  margin: 0 0 calc(8 * var(--ch-u));
}

.credits-how-step__glyph.home-sf-icon {
  font-family: "Celosys SF Icons", sans-serif;
  font-style: normal;
  font-weight: 400;
  overflow: visible;
  speak: never;
  -webkit-font-smoothing: antialiased;
}

.credits-how-step__twint {
  display: block;
  height: calc(37.2 * var(--ch-u));
  margin: 0 0 calc(8 * var(--ch-u));
  object-fit: contain;
  width: calc(30 * var(--ch-u));
}

.credits-how-step__stempel {
  display: block;
  height: calc(35 * var(--ch-u));
  margin: 0 0 calc(8 * var(--ch-u));
  object-fit: contain;
  width: calc(35 * var(--ch-u));
}

.credits-how-step:nth-child(4) .credits-how-step__num {
  opacity: 1;
}

.stamps-how__tip {
  /* Same fill + border as .credits-how__card (first panel) */
  align-items: flex-start;
  background-color: transparent;
  background-image: linear-gradient(
    255.39deg,
    rgb(48, 14, 38) 10.657%,
    rgba(0, 0, 0, 0) 63.827%
  );
  border: 0.8px solid #6c5966;
  border-radius: calc(10 * var(--ch-u, var(--celosys-u)));
  box-sizing: border-box;
  display: flex;
  gap: calc(12 * var(--ch-u, var(--celosys-u)));
  margin: calc(18 * var(--ch-u, var(--celosys-u))) auto 0;
  max-width: calc(264.4 * var(--ch-u, var(--celosys-u)));
  padding: calc(14 * var(--ch-u, var(--celosys-u))) calc(14 * var(--ch-u, var(--celosys-u)));
  width: 100%;
}

.stamps-how__tip-icon {
  color: #b0358b;
  flex: 0 0 auto;
  font-size: calc(22 * var(--ch-u, var(--celosys-u)));
  line-height: 1;
  margin-top: calc(1 * var(--ch-u, var(--celosys-u)));
}

.stamps-how__tip-copy {
  min-width: 0;
}

.stamps-how__tip-title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--ch-u, var(--celosys-u)));
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 calc(4 * var(--ch-u, var(--celosys-u)));
}

.stamps-how__tip-text {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--ch-u, var(--celosys-u)));
  font-weight: 400;
  line-height: calc(14 * var(--ch-u, var(--celosys-u)));
  margin: 0;
}

/* Overlay detail sheets — Figma 268:3691 gradiente stroke (Stempel / Bonus / Aktionen). */
.stamp-card-detail-sheet__hero {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: calc(8 * var(--celosys-u));
  box-sizing: border-box;
  /* Was 37.63 — reduce card→Deaktivieren gap by ~1/3 */
  margin-bottom: calc(25.09 / 390 * 100cqw);
  overflow: hidden;
}

/*
 * Partner Vorteile / Stempel / Bonus / Aktionen detail hero —
 * same fade stroke as list plates (top→transparent + bottom clip).
 */
.bonus-card-sheet__hero.stamp-card-detail-sheet__hero::before,
.stamp-card-detail-sheet__hero::before {
  background: var(--celosys-partner-stroke-gradient);
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

/* Exact Figma 300:737 radial (SVG matrix from design export) */
.stamp-card-detail-sheet__hero-fill {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 218.61' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-14.65 21.9 -35.062 -23.455 241.5 -0.045131)'%3E%3Cstop offset='0' stop-color='rgb(110%2C42%2C89)' stop-opacity='1'/%3E%3Cstop offset='0.48437' stop-color='rgb(110%2C42%2C89)' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='rgb(110%2C42%2C89)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: inherit;
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.stamp-card-detail-sheet__hero-photo {
  border-radius: inherit;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

/* Figma 314:2032 — photo hero: black radial fill only; stroke on .stamp-card-detail-sheet__hero::before. */
.aktionen-detail-sheet__hero--photo.bonus-card-sheet__hero {
  background-image: none;
}

.aktionen-detail-sheet__hero-shade {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(8.35 22 -35 13.284 91.5 0.0000026171)'%3E%3Cstop offset='0.55521' stop-color='rgb(0%2C0%2C0)' stop-opacity='0.2'/%3E%3Cstop offset='1' stop-color='rgb(0%2C0%2C0)' stop-opacity='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: inherit;
  box-sizing: border-box;
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.aktionen-detail-sheet__hero--photo .bonus-card-sheet__logo-wrap {
  aspect-ratio: 1;
  height: auto;
  left: calc(1.5 / 350 * 100%);
  top: calc(20.62 / 218.61 * 100%);
  width: calc(89.49 / 350 * 100%);
}

.aktionen-detail-sheet__hero--photo .bonus-card-sheet__head {
  inset: auto;
  left: auto;
  pointer-events: none;
  position: static;
  right: auto;
  top: auto;
  z-index: 5;
}

.aktionen-detail-sheet__hero--photo .bonus-card-sheet__from {
  left: calc(95 / 350 * 100%);
  margin: 0;
  position: absolute;
  top: calc(27 / 220 * 100%);
}

.aktionen-detail-sheet__hero--photo .bonus-card-sheet__shop {
  left: calc(95 / 350 * 100%);
  margin: 0;
  position: absolute;
  top: calc(40.6 / 220 * 100%);
}

.aktionen-detail-sheet__hero--photo .bonus-card-sheet__address {
  left: calc(95 / 350 * 100%);
  margin: 0;
  position: absolute;
  top: calc(64.92 / 220 * 100%);
}

.aktionen-detail-sheet__aktion {
  margin: 0;
  max-width: none;
  position: static;
}

.aktionen-detail-sheet__aktion-label {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  left: calc(12.05 / 350 * 100%);
  letter-spacing: calc(0.989 / 390 * 100cqw);
  line-height: calc(9 / 390 * 100cqw);
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  top: calc(144.92 / 220 * 100%);
  z-index: 5;
}

.aktionen-detail-sheet__aktion-name {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 / 390 * 100cqw);
  font-weight: 700;
  left: calc(10 / 350 * 100%);
  line-height: calc(20 / 390 * 100cqw);
  margin: 0;
  max-width: calc(280 / 350 * 100%);
  position: absolute;
  top: calc(159.42 / 220 * 100%);
  z-index: 5;
}

.aktionen-detail-sheet__meta {
  bottom: auto;
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 / 390 * 100cqw);
  font-weight: 600;
  left: calc(10 / 350 * 100%);
  line-height: calc(11 / 390 * 100cqw);
  margin: 0;
  max-width: calc(280 / 350 * 100%);
  position: absolute;
  right: auto;
  text-align: left;
  top: calc(185 / 220 * 100%);
  z-index: 5;
}

.aktionen-detail-sheet .gift-card-sheet__qr-image {
  filter: none;
}

/* Figma 268:3653 — Gültig bis / Einlösung bei (below QR, above Deaktivieren). */
.aktionen-detail-sheet__facts {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(22 / 390 * 100cqw);
  margin: calc(12 / 390 * 100cqw) auto calc(10 / 390 * 100cqw);
  max-width: var(--gift-sheet-card-w);
  padding: 0;
  width: var(--gift-sheet-card-w);
}

.aktionen-detail-sheet__fact {
  display: flex;
  flex-direction: column;
  gap: calc(8 / 390 * 100cqw);
}

.aktionen-detail-sheet__fact-label {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 / 390 * 100cqw);
  font-weight: 700;
  line-height: calc(14 / 390 * 100cqw);
  margin: 0;
}

.aktionen-detail-sheet__fact-row {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 / 390 * 100cqw);
  font-weight: 500;
  gap: calc(8 / 390 * 100cqw);
  line-height: calc(14 / 390 * 100cqw);
  margin: 0;
}

.aktionen-detail-sheet__fact-text {
  min-width: 0;
}

.aktionen-detail-sheet__fact-icon {
  color: #b5b5b5;
  flex: 0 0 auto;
  font-size: calc(14 / 390 * 100cqw);
  line-height: 1;
}

.aktionen-detail-sheet__fact-head {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(8 / 390 * 100cqw);
}

.aktionen-detail-sheet__fact-head .aktionen-detail-sheet__fact-label {
  flex: 0 0 auto;
  min-width: 0;
}

.aktionen-detail-sheet__where-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: #b0358b;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.aktionen-detail-sheet__where-icon {
  color: #b0358b;
  display: block;
  font-size: calc(20 / 390 * 100cqw);
  line-height: 1;
}

.stamp-card-detail-sheet__glitter {
  border-radius: inherit;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.stamp-card-detail-sheet__hero .bonus-card-sheet__logo-wrap,
.stamp-card-detail-sheet__hero .bonus-card-sheet__head,
.stamp-card-detail-sheet__hero .bonus-card-sheet__reward,
.stamp-card-detail-sheet__hero .stamp-card-detail-sheet__stamps {
  z-index: 2;
}

.stamp-card-detail-sheet__hero .stamp-plate__shop-btn {
  font-size: calc(7.5 / 390 * 100cqw + 2pt);
  padding: calc(3.5 / 390 * 100cqw + 1pt) calc(8 / 390 * 100cqw + 1pt);
  pointer-events: auto;
  z-index: 5;
}

.stamp-card-detail-sheet__hero .bonus-card-sheet__head {
  pointer-events: none;
  right: calc(88 / 350 * 100%);
}

.stamp-card-detail-sheet__hero .bonus-card-sheet__spend,
.stamp-card-detail-sheet__hero .bonus-card-sheet__progress {
  display: none;
}

.stamp-card-detail-sheet.bonus-detail-sheet .stamp-card-detail-sheet__hero .bonus-detail-sheet__progress,
.stamp-card-detail-sheet.bonus-detail-sheet .bonus-detail-sheet__progress,
.stamp-card-detail-sheet.bonus-detail-sheet .bonus-detail-sheet__bar-block .bonus-detail-sheet__progress {
  display: block !important;
}

.stamp-card-detail-sheet .gift-card-sheet__cta-label {
  color: #b0358b;
  font-size: calc(9 / 390 * 100cqw + 2pt);
}

.stamp-card-detail-sheet__deactivate {
  /* Was 14 / 10 — reduce both gaps by ~1/3 */
  margin: calc(9.33 / 390 * 100cqw) auto calc(6.67 / 390 * 100cqw);
}

.stamp-card-detail-sheet .bonus-card-sheet__deactivate-btn {
  font-size: calc(8.1 / 390 * 100cqw + 2pt);
  padding: calc(5 / 390 * 100cqw) calc(11 / 390 * 100cqw);
}

.stamp-card-detail-sheet .bonus-card-sheet__deactivate-icon {
  font-size: calc(7.5 / 390 * 100cqw + 2pt);
}

.aktionen-detail-sheet__redeemed {
  color: #e76f51;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(8.1 / 390 * 100cqw + 3pt);
  font-weight: 600;
  letter-spacing: 0.14px;
  line-height: 1.35;
  margin: calc(18 / 390 * 100cqw) auto calc(8 / 390 * 100cqw);
  text-align: center;
  width: var(--gift-sheet-card-w);
}

.aktionen-detail-sheet__facts--activate {
  margin-top: calc(4 / 390 * 100cqw);
}

.aktionen-detail-sheet .stamp-card-detail-sheet__activate-form:has(.aktionen-detail-sheet__activate-with-video) {
  margin-top: calc(32 / 390 * 100cqw);
}

.stamp-card-detail-sheet__activate.aktionen-detail-sheet__activate-with-video {
  font-size: calc(8 / 390 * 100cqw + 2pt);
  line-height: 1.15;
  max-width: calc(320 / 390 * 100cqw);
  padding-left: calc(14 / 390 * 100cqw);
  padding-right: calc(14 / 390 * 100cqw);
  white-space: normal;
}

/* Aktionen sponsor spot — inside overlay (Figma 268:3502), not fullscreen */
.aktionen-detail-sheet__spot {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: calc(12 / 390 * 100cqw) calc(20 / 390 * 100cqw) calc(24 / 390 * 100cqw);
  width: 100%;
}

.aktionen-detail-sheet__spot-copy {
  margin: 0 auto calc(16 / 390 * 100cqw);
  max-width: calc(350 / 390 * 100cqw);
  text-align: center;
  width: 100%;
}

.aktionen-detail-sheet__spot-title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 / 390 * 100cqw);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 calc(4 / 390 * 100cqw);
}

.aktionen-detail-sheet__spot-hint {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 / 390 * 100cqw);
  font-weight: 600;
  letter-spacing: -0.02px;
  line-height: 1.2;
  margin: 0;
}

.aktionen-detail-sheet__spot-frame {
  aspect-ratio: 350 / 621.99;
  border-radius: calc(16 / 390 * 100cqw);
  max-width: calc(350 / 390 * 100cqw);
  overflow: hidden;
  width: 100%;
}

.aktionen-detail-sheet__spot-video {
  background: #000;
  display: block;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  width: 100%;
}

.aktionen-detail-sheet__spot-video::-webkit-media-controls,
.aktionen-detail-sheet__spot-video::-webkit-media-controls-enclosure {
  display: none !important;
}

.aktionen-detail-sheet__fixed--video {
  overflow: hidden;
  position: relative;
}

.aktionen-detail-sheet__slide-stage {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.aktionen-detail-sheet__fixed--video .aktionen-detail-sheet__spot {
  background: var(--celosys-overlay-panel-bg);
  inset: 0;
  margin: 0;
  position: absolute;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.aktionen-detail-sheet--spot-playing .aktionen-detail-sheet__slide-stage {
  transform: translateX(-100%);
}

.aktionen-detail-sheet--spot-playing .aktionen-detail-sheet__spot {
  transform: translateX(0);
}

.aktionen-detail-sheet--spot-submitting .aktionen-detail-sheet__spot-frame {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.stamp-card-detail-sheet__history-head {
  margin-top: calc(8 / 390 * 100cqw);
}

.stamp-card-detail-sheet__history-title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 / 390 * 100cqw);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 auto calc(8 / 390 * 100cqw);
  width: var(--gift-sheet-tx-w, var(--gift-sheet-card-w));
}

.stamp-card-detail-sheet__history {
  padding-bottom: calc(24 / 390 * 100cqw);
}

/* History rows: Gutscheine TX chrome + Meine Stempelkarte partner fill/stroke */
.stamp-card-detail-sheet__history-item.gift-card-transaction,
.stamp-card-detail-sheet .stamp-card-detail-sheet__history-item {
  aspect-ratio: 350.94 / 42;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--celosys-u))
      calc(var(--celosys-partner-plate-ry) * var(--celosys-u))
      at calc(var(--celosys-partner-plate-cx) * var(--celosys-u))
      calc(var(--celosys-partner-plate-cy) * var(--celosys-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--celosys-u));
}

.stamp-card-detail-sheet__history-item::before {
  background: var(--celosys-partner-stroke-gradient) !important;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0) !important;
  padding: var(--celosys-partner-stroke-w) !important;
}

.stamp-card-detail-sheet__history-body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  inset: 0;
  padding: 0 calc(14 / 350.94 * 100%);
  position: absolute;
  width: 100%;
  z-index: 2;
}

.stamp-card-detail-sheet__history-text {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--celosys-u));
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.stamp-card-detail-sheet__hero--rows-1,
.stamp-card-detail-sheet__hero--rows-2,
.stamp-card-detail-sheet__hero--rows-3 {
  aspect-ratio: 350 / 218.61;
}

.stamp-card-detail-sheet__hero--rows-4 {
  aspect-ratio: 350 / 252;
}

.stamp-card-detail-sheet__hero--rows-5,
.stamp-card-detail-sheet__hero--rows-6 {
  aspect-ratio: 350 / 286;
}

.stamp-card-detail-sheet__reward {
  top: calc(67.78 / 218.61 * 100%);
}

.stamp-card-detail-sheet__stamps {
  bottom: calc(12 / 218.61 * 100%);
  left: calc(20 / 350 * 100%);
  position: absolute;
  right: calc(12 / 350 * 100%);
  z-index: 2;
}

.stamp-card-detail-sheet__grid {
  display: grid;
  gap: calc(12 * var(--celosys-u));
  grid-template-columns: repeat(5, calc(22 * var(--celosys-u)));
  width: max-content;
}

.stamp-card-detail-sheet__slot {
  height: calc(22 * var(--celosys-u));
  position: relative;
  width: calc(22 * var(--celosys-u));
}

.stamp-card-detail-sheet__feld {
  border: 0.7px solid #b5b5b5;
  box-sizing: border-box;
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.stamp-card-detail-sheet__stempel {
  display: block;
  height: calc(30 * var(--celosys-u));
  left: calc(-4 * var(--celosys-u));
  object-fit: contain;
  position: absolute;
  top: calc(-4 * var(--celosys-u));
  width: calc(30 * var(--celosys-u));
  z-index: 1;
}

.stamp-card-detail-sheet__count {
  bottom: 0;
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--celosys-u));
  font-weight: 700;
  line-height: 1.15;
  max-width: 46%;
  position: absolute;
  right: 0;
  text-align: right;
}

.stamp-card-detail-sheet__count--meta {
  font-size: calc(14 * var(--celosys-u) - 2pt);
}

/* Aktionen photo overlay — Figma 314:2032 overrides generic stamp-card count/head */
.aktionen-detail-sheet__hero--photo .bonus-card-sheet__head {
  inset: auto;
  left: auto;
  position: static;
  right: auto;
  top: auto;
}

.aktionen-detail-sheet__hero--photo .aktionen-detail-sheet__meta.stamp-card-detail-sheet__count {
  bottom: auto;
  font-size: calc(11 / 390 * 100cqw);
  font-weight: 600;
  left: calc(10 / 350 * 100%);
  line-height: calc(11 / 390 * 100cqw);
  max-width: calc(280 / 350 * 100%);
  right: auto;
  text-align: left;
  top: calc(185 / 220 * 100%);
}

/* Meet&Trust How — Figma 324:2259: steps 1–2 glyph 30, step 3 glyph 35 */
.appointments-how .credits-how-step:nth-child(1) .credits-how-step__glyph,
.appointments-how .credits-how-step:nth-child(2) .credits-how-step__glyph {
  font-size: calc(30 * var(--ch-u));
  height: calc(30 * var(--ch-u));
}

.appointments-how .credits-how-step:nth-child(3) .credits-how-step__glyph {
  font-size: calc(35 * var(--ch-u));
  height: calc(35 * var(--ch-u));
}

.credits-how-step__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--ch-u));
  font-weight: 700;
  line-height: calc(10 * var(--ch-u));
  margin: 0 0 calc(4 * var(--ch-u));
}

.credits-how-step__desc {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--ch-u));
  font-weight: 400;
  line-height: calc(14 * var(--ch-u));
  margin: 0;
  max-width: calc(220 * var(--ch-u));
}

#stampCardsPartnerModal.celosys-overlay-sheet {
  z-index: 12100 !important;
}

#stampCardsPartnerModal.celosys-overlay-sheet .celosys-overlay-sheet__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: calc(18 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
}

#stampCardsPartnerModal.celosys-overlay-sheet .modal-body.stamp-cards-partner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gift-cards-where-modal .gift-cards-where-modal__dialog,
#stampCardsWhereModal.gift-cards-where-modal .modal-dialog {
  align-items: flex-end !important;
  display: flex !important;
  height: 100% !important;
  margin: 0 auto !important;
  max-height: none !important;
  max-width: var(--celosys-overlay-panel-w) !important;
  padding: 0 !important;
  width: var(--celosys-overlay-panel-w) !important;
}

.gift-cards-where-modal .gift-cards-where-modal__content,
#stampCardsWhereModal.gift-cards-where-modal .gift-cards-where-modal__content {
  background: var(--celosys-overlay-panel-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0 !important;
  border-radius: var(--celosys-overlay-radius) var(--celosys-overlay-radius) 0 0 !important;
  box-shadow: none !important;
  color: #f8f8f8;
  height: var(--celosys-overlay-panel-h) !important;
  max-height: var(--celosys-overlay-panel-h) !important;
  overflow: hidden !important;
}

/* How-it-works — same docked overlay size */
#stampCardsHowModal.modal .modal-dialog,
#ticketsHowModal.modal .modal-dialog,
#ticketsEventsHowModal.modal .modal-dialog,
#celosysVerifyHowModal.modal .modal-dialog {
  align-items: flex-end !important;
  display: flex !important;
  height: 100% !important;
  margin: 0 auto !important;
  max-width: var(--celosys-overlay-panel-w) !important;
  padding: 0 !important;
  width: var(--celosys-overlay-panel-w) !important;
}

#stampCardsHowModal.modal .modal-content,
#ticketsHowModal.modal .modal-content,
#ticketsEventsHowModal.modal .modal-content,
#celosysVerifyHowModal.modal .modal-content {
  background: var(--celosys-overlay-panel-bg) !important;
  border: 0 !important;
  border-radius: var(--celosys-overlay-radius) var(--celosys-overlay-radius) 0 0 !important;
  height: var(--celosys-overlay-panel-h) !important;
  max-height: var(--celosys-overlay-panel-h) !important;
  overflow: auto !important;
}

body:has(.gift-cards-where-modal.show) .celosys-bottom-nav,
body:has(#stampCardsHowModal.show) .celosys-bottom-nav,
body:has(#ticketsHowModal.show) .celosys-bottom-nav,
body:has(#ticketsEventsHowModal.show) .celosys-bottom-nav,
body:has(#celosysVerifyHowModal.show) .celosys-bottom-nav {
  pointer-events: none;
  transform: translateY(120%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.gift-cards-where-modal .gift-cards-where-modal__header {
  align-items: flex-start;
  display: flex;
  padding: calc(8 * var(--where-u)) 0 0;
}

.gift-cards-where-modal .gift-cards-where-modal__title {
  color: #f8f8f8;
  flex: 1;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* was 20 → +2pt = 22 */
  font-size: calc(22 * var(--where-u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  padding-right: calc(12 * var(--where-u));
}

.gift-cards-where-modal .gift-cards-where-modal__close {
  flex-shrink: 0;
  margin: 0;
  opacity: 0.95;
  padding: 0;
}

.gift-cards-where-modal .gift-cards-where-modal__body {
  padding: calc(10 * var(--where-u)) 0 calc(18 * var(--where-u));
}

.gift-cards-where-modal .gift-cards-where-modal__intro {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* was 10 → +2pt = 12 */
  font-size: calc(12 * var(--where-u));
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 calc(18 * var(--where-u));
  max-width: none;
}

.gift-cards-where-modal .gift-cards-where-modal__map.stamp-cards-map,
#stampCardsWhereModal.gift-cards-where-modal .gift-cards-where-modal__map.stamp-cards-map {
  border-radius: calc(14 * var(--where-u));
  flex: 0 0 auto;
  min-height: calc(270 * var(--where-u)) !important;
  overflow: hidden;
  width: 100%;
}

.gift-cards-where-modal .gift-cards-where-modal__map .stamp-cards-map__canvas,
.gift-cards-where-modal .gift-cards-where-modal__map .stamp-cards-map__status,
#stampCardsWhereModal.gift-cards-where-modal .gift-cards-where-modal__map .stamp-cards-map__canvas,
#stampCardsWhereModal.gift-cards-where-modal .gift-cards-where-modal__map .stamp-cards-map__status {
  height: calc(270 * var(--where-u)) !important;
  min-height: calc(270 * var(--where-u)) !important;
}

.gift-cards-where-modal #stampCardsPartnerList.gift-cards-where-modal__list,
#stampCardsWhereModal.gift-cards-where-modal #stampCardsPartnerList.gift-cards-where-modal__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(8 * var(--where-u));
  margin-top: calc(19 * var(--where-u));
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0;
  scrollbar-color: color-mix(in srgb, var(--where-accent) 55%, transparent) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  width: 100%;
}

.gift-cards-where-modal .gift-cards-where-modal__row.stamp-cards-partner-list__item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(181, 181, 181, 0.28);
  border-radius: calc(10 * var(--where-u));
  box-shadow: none;
  gap: calc(8 * var(--where-u));
  /* after +50% then −20%: 42.23 * 1.2 ≈ 50.68 */
  min-height: calc(50.68 * var(--where-u));
  padding: calc(10 * var(--where-u)) calc(12 * var(--where-u));
  width: 100%;
}

.gift-cards-where-modal .gift-cards-where-modal__row:hover {
  border-color: color-mix(in srgb, var(--where-accent) 55%, transparent);
}

.gift-cards-where-modal .gift-cards-where-modal__row.stamp-cards-partner-list__item--selected {
  background: color-mix(in srgb, var(--where-accent) 14%, transparent);
  border-color: var(--where-accent);
  box-shadow: none;
}

.gift-cards-where-modal .stamp-cards-partner-list__select {
  align-items: center;
  display: flex;
  gap: calc(8 * var(--where-u));
}

.gift-cards-where-modal .stamp-cards-partner-list__mark {
  align-items: center;
  color: #b5b5b5;
  display: inline-flex;
  flex: 0 0 auto;
  height: calc(30 * var(--where-u));
  justify-content: center;
  width: calc(30 * var(--where-u));
}

.gift-cards-where-modal .gift-cards-where-modal__row--selected .stamp-cards-partner-list__mark,
.gift-cards-where-modal .stamp-cards-partner-list__item--selected .stamp-cards-partner-list__mark {
  color: var(--where-accent);
}

.gift-cards-where-modal .stamp-cards-partner-list__logo {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gift-cards-where-modal .stamp-cards-partner-list__fallback-icon {
  display: block;
  height: calc(22 * var(--where-u));
  width: calc(22 * var(--where-u));
}

.gift-cards-where-modal .stamp-cards-partner-list__copy {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--where-u));
  min-width: 0;
}

.gift-cards-where-modal .stamp-cards-partner-list__name {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--where-u));
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.gift-cards-where-modal .stamp-cards-partner-list__address {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--where-u));
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.gift-cards-where-modal .stamp-cards-partner-list__details {
  align-items: center;
  background: transparent;
  border: 1px solid var(--where-accent);
  border-radius: 999px;
  color: var(--where-accent);
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--where-u));
  font-weight: 400;
  gap: calc(4 * var(--where-u));
  height: calc(24 * var(--where-u));
  justify-content: center;
  line-height: 1;
  min-width: calc(64 * var(--where-u));
  padding: 0 calc(10 * var(--where-u));
}

.gift-cards-where-modal .stamp-cards-partner-list__details:hover {
  background: var(--where-accent-soft);
  color: #fff;
}

.gift-cards-where-modal .stamp-cards-partner-list__item--selected .stamp-cards-partner-list__details {
  background: var(--where-accent);
  border-color: var(--where-accent);
  color: #121018;
}

.gift-cards-where-modal .stamp-cards-partner-list__details-icon {
  color: inherit;
  display: block;
  flex-shrink: 0;
  font-size: calc(11 * var(--where-u));
  height: auto;
  line-height: 1;
  width: auto;
}

.gift-cards-where-modal .stamp-cards-partner-list__item--selected .stamp-cards-partner-list__details-icon {
  color: #121018;
  filter: none;
}

/* Default map popup chrome (non-label). Label popups override below. */
.gift-cards-where-modal .stamp-cards-map .leaflet-popup-content-wrapper,
.gift-cards-where-modal .stamp-cards-map .leaflet-popup-tip {
  background: #1c1c1c;
  color: #f8f8f8;
}

.gift-cards-where-modal .stamp-cards-map-info__title {
  color: var(--where-accent);
}

.gift-cards-where-modal .gift-cards-map-pin {
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.gift-cards-where-modal .gift-cards-map-pin__svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  height: 36px;
  width: 24px;
}

/* Dark tiles: invert once on the pane only (child layer filter would cancel it). */
.gift-cards-where-modal .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.55);
}

.gift-cards-where-modal .leaflet-container {
  background: #0d0d12;
}

.gift-cards-where-modal .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.45) !important;
  color: #b5b5b5 !important;
  filter: none;
}

/* Overlay scrollbar — accent from category theme */
.gift-cards-where-modal #stampCardsPartnerList.gift-cards-where-modal__list::-webkit-scrollbar {
  width: 4px;
}

.gift-cards-where-modal #stampCardsPartnerList.gift-cards-where-modal__list::-webkit-scrollbar-track {
  background: transparent;
}

.gift-cards-where-modal #stampCardsPartnerList.gift-cards-where-modal__list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--where-accent) 55%, transparent);
  border-radius: 999px;
}

/* Map label: shop name only, no black chrome / tip line. */
.gift-cards-where-modal .gift-cards-map-popup .leaflet-popup-content-wrapper,
.gift-cards-where-modal .gift-cards-map-popup--label .leaflet-popup-content-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f8f8f8;
  padding: 0 !important;
}

.gift-cards-where-modal .gift-cards-map-popup .leaflet-popup-tip-container,
.gift-cards-where-modal .gift-cards-map-popup .leaflet-popup-tip,
.gift-cards-where-modal .gift-cards-map-popup--label .leaflet-popup-tip-container,
.gift-cards-where-modal .gift-cards-map-popup--label .leaflet-popup-tip {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  width: 0 !important;
}

.gift-cards-where-modal .gift-cards-map-popup .leaflet-popup-content,
.gift-cards-where-modal .gift-cards-map-popup--label .leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
}

.gift-cards-where-modal .gift-cards-map-popup a.leaflet-popup-close-button,
.gift-cards-where-modal .gift-cards-map-popup--label a.leaflet-popup-close-button {
  display: none !important;
}

.gift-cards-where-modal .gift-cards-map-popup .stamp-cards-map-info__address,
.gift-cards-where-modal .gift-cards-map-popup .stamp-cards-map-info__contact,
.gift-cards-where-modal .gift-cards-map-popup--label .stamp-cards-map-info__address,
.gift-cards-where-modal .gift-cards-map-popup--label .stamp-cards-map-info__contact {
  display: none !important;
}

/* Map shop name — category accent */
.gift-cards-where-modal .gift-cards-map-label {
  color: var(--where-accent);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--where-u, 1px));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  max-width: 12rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
  white-space: normal;
}

/*
 * Gift-cards shop Details — Figma Meet&Trust 69:2762 metrics,
 * lavendel accents (#695da5). Same width as Partner finden (351.13).
 * Stacks above Partner finden overlay.
 */
.gift-cards-partner-modal {
  --detail-accent: #695da5;
  --detail-accent-soft: rgba(105, 93, 165, 0.22);
  --detail-u: var(--celosys-u);
  --bs-modal-zindex: 2100;
  z-index: 2100 !important;
}

.gift-cards-partner-modal[data-partner-theme="amber"] {
  --detail-accent: #f5a623;
  --detail-accent-soft: rgba(245, 166, 35, 0.22);
}

.gift-cards-partner-modal[data-partner-theme="purple"] {
  --detail-accent: #b0358b;
  --detail-accent-soft: rgba(176, 53, 139, 0.22);
}

.gift-cards-partner-modal[data-partner-theme="coral"] {
  --detail-accent: #e76f51;
  --detail-accent-soft: rgba(231, 111, 81, 0.22);
}

/* Partner finden stays under Details — hide its sheet while Details is open. */
#stampCardsWhereModal.stamp-cards-where-modal--buried,
.gift-cards-where-modal.gift-cards-where-modal--buried,
.stamp-card-sheet.celosys-card-sheet--buried {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Above card detail overlays (12050) — Shop öffnen from Stempelkarte/Bonus/Gutscheine */
#stampCardsPartnerModal {
  z-index: 12100 !important;
}

#stampCardsPartnerModal.celosys-overlay-sheet {
  z-index: 12100 !important;
}

/* Force-open Details without Bootstrap nested-modal stacking (was: dead click). */
.celosys-partner-detail-scrim {
  background: rgba(0, 0, 0, 0.92);
  inset: 0;
  position: fixed;
  z-index: 10040;
}

#stampCardsPartnerModal.celosys-partner-force-open {
  display: block !important;
  inset: 0;
  opacity: 1 !important;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto !important;
  position: fixed !important;
  visibility: visible !important;
  z-index: 10050 !important;
}

#stampCardsPartnerModal.celosys-partner-force-open .modal-dialog {
  margin: max(calc(35 * var(--detail-u, 1px)), calc(env(safe-area-inset-top, 0px) + 0.85rem)) auto max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.65rem));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2.5rem);
  max-width: min(var(--celosys-bar-w), calc(100vw - 2rem));
  min-height: min(calc(739 * var(--detail-u, 1px)), calc(100dvh - 3rem));
  pointer-events: auto;
  position: relative;
  width: min(var(--celosys-bar-w), calc(100vw - 2rem));
  z-index: 1;
}

#stampCardsPartnerModal.celosys-partner-force-open.gift-cards-partner-modal .modal-content,
#stampCardsPartnerModal.celosys-partner-force-open .modal-content {
  max-height: inherit;
  overflow: hidden;
}

#stampCardsPartnerModal.celosys-partner-force-open .modal-body.stamp-cards-partner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide temporary DIY card — Figma sheet only. */
.celosys-gift-diy-detail {
  display: none !important;
}

body:has(.gift-cards-partner-modal.show) .modal-backdrop.show {
  background-color: #000 !important;
  opacity: 0.92 !important;
  z-index: 2090 !important;
}

.gift-cards-partner-modal .gift-cards-partner-modal__dialog,
#stampCardsPartnerModal.gift-cards-partner-modal .modal-dialog {
  margin: max(calc(35 * var(--detail-u)), calc(env(safe-area-inset-top, 0px) + 0.85rem)) auto max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.65rem)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2.5rem) !important;
  max-width: min(var(--celosys-bar-w), calc(100vw - 2rem)) !important;
  min-height: min(calc(739 * var(--detail-u)), calc(100dvh - 3rem)) !important;
  width: min(var(--celosys-bar-w), calc(100vw - 2rem)) !important;
}

.gift-cards-partner-modal .gift-cards-partner-modal__content,
#stampCardsPartnerModal.gift-cards-partner-modal .modal-content {
  background: #0a0a0c !important;
  border: 0;
  border-radius: calc(16 * var(--detail-u));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: #f8f8f8;
  display: flex;
  flex-direction: column;
  min-height: min(calc(739 * var(--detail-u)), calc(100dvh - 3rem)) !important;
  overflow: hidden;
}

.gift-cards-partner-modal .gift-cards-partner-modal__header {
  /* Same inset as Partner finden header close. */
  padding: calc(8 * var(--detail-u)) calc(12 * var(--detail-u)) 0 !important;
}

.gift-cards-partner-modal .gift-cards-partner-modal__close,
.gift-cards-partner-modal .stamp-cards-partner-modal__close {
  align-items: center;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f8f8f8 !important;
  display: inline-flex !important;
  filter: none !important;
  flex-shrink: 0;
  font-size: calc(18 * var(--detail-u, 1px));
  height: calc(28 * var(--detail-u, 1px)) !important;
  justify-content: center;
  line-height: 1;
  margin: 0 0 0 auto !important;
  opacity: 0.95 !important;
  padding: 0 !important;
  position: relative;
  width: calc(28 * var(--detail-u, 1px)) !important;
  z-index: 5;
}

.gift-cards-partner-modal .stamp-cards-partner-modal__close-icon {
  color: inherit;
  font-size: 1em;
  line-height: 1;
  pointer-events: none;
}

.gift-cards-partner-modal .gift-cards-partner-modal__body,
.gift-cards-partner-modal .modal-body.stamp-cards-partner {
  background: #0a0a0c !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
}

.gift-cards-partner-modal .stamp-cards-partner__status {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--detail-u));
  margin: calc(48 * var(--detail-u)) calc(16 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-detail,
.gift-cards-partner-modal .stamp-cards-partner-detail--gift {
  background: #0a0a0c;
}

.gift-cards-partner-modal .stamp-cards-partner-hero {
  min-height: calc(170 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero--with-bg {
  min-height: calc(170 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero__panel {
  padding: calc(52 * var(--detail-u)) calc(12 * var(--detail-u)) calc(14 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero__logo {
  border-radius: calc(14 * var(--detail-u));
  height: calc(56 * var(--detail-u));
  margin: 0 0 calc(10 * var(--detail-u));
  width: calc(56 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--detail-u));
  font-weight: 600;
  line-height: 1.15;
}

.gift-cards-partner-modal .stamp-cards-partner-hero__address {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--detail-u));
  font-weight: 500;
  gap: calc(6 * var(--detail-u));
  line-height: 1.25;
  margin: calc(6 * var(--detail-u)) 0 0;
}

.gift-cards-partner-modal .stamp-cards-partner-hero__address-icon {
  color: #b5b5b5;
  display: inline-flex;
  flex: 0 0 auto;
}

.gift-cards-partner-modal .stamp-cards-partner-hero__address-icon .stamp-cards-partner-icon {
  height: calc(12 * var(--detail-u));
  width: calc(12 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero__badges {
  gap: calc(6 * var(--detail-u));
  margin-top: calc(10 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-hero__badge {
  background: rgba(105, 93, 165, 0.18);
  border: 1px solid rgba(105, 93, 165, 0.55);
  border-radius: 999px;
  color: #cfc6ef;
  font-size: calc(10 * var(--detail-u));
  padding: calc(4 * var(--detail-u)) calc(10 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-detail__body {
  background: #0a0a0c;
  gap: calc(14 * var(--detail-u));
  padding: calc(12 * var(--detail-u)) calc(12 * var(--detail-u)) calc(8 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.gift-cards-partner-modal .stamp-cards-partner-card__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--detail-u));
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 calc(10 * var(--detail-u));
  text-transform: none;
}

.gift-cards-partner-modal .stamp-cards-partner-card__subtitle {
  color: #b5b5b5;
  font-size: calc(10 * var(--detail-u));
  margin: calc(-4 * var(--detail-u)) 0 calc(10 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-card__desc {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--detail-u));
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 calc(14 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-actions-list,
.gift-cards-partner-modal .stamp-cards-partner-benefits-list {
  gap: calc(10 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile,
.gift-cards-partner-modal .stamp-cards-partner-benefit-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(181, 181, 181, 0.22);
  border-radius: calc(10 * var(--detail-u));
  gap: calc(10 * var(--detail-u));
  min-height: calc(50.68 * var(--detail-u));
  padding: calc(10 * var(--detail-u)) calc(12 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile:hover {
  background: rgba(105, 93, 165, 0.14);
  border-color: rgba(105, 93, 165, 0.55);
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile__icon {
  color: var(--detail-accent);
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile__icon .stamp-cards-partner-icon {
  height: calc(18 * var(--detail-u));
  width: calc(18 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile__label,
.gift-cards-partner-modal .stamp-cards-partner-benefit-tile__name {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--detail-u));
  font-weight: 700;
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile__value,
.gift-cards-partner-modal .stamp-cards-partner-benefit-tile__reward,
.gift-cards-partner-modal .stamp-cards-partner-benefit-tile__meta {
  color: #b5b5b5;
  font-size: calc(10 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-action-tile__chevron {
  color: rgba(245, 245, 245, 0.35);
}

.gift-cards-partner-modal .stamp-cards-partner-device__count {
  background: var(--detail-accent);
}

.gift-cards-partner-modal .stamp-cards-partner-device__card {
  border-color: rgba(105, 93, 165, 0.35);
}

.gift-cards-partner-modal .stamp-cards-partner-actions {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, #0a0a0c 32%);
  padding: calc(10 * var(--detail-u)) calc(12 * var(--detail-u)) calc(16 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-actions--single .stamp-cards-partner-actions__btn {
  max-width: calc(220 * var(--detail-u));
}

.gift-cards-partner-modal .stamp-cards-partner-actions__btn--primary,
.gift-cards-partner-modal .stamp-cards-partner-actions__btn--route {
  background: linear-gradient(180deg, #7a6db8 0%, #695da5 55%, #574c8f 100%);
  border: 0;
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--detail-u));
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: calc(42 * var(--detail-u));
  text-transform: uppercase;
}

.gift-cards-partner-modal .stamp-cards-partner-actions__btn--primary:hover,
.gift-cards-partner-modal .stamp-cards-partner-actions__btn--route:hover {
  background: linear-gradient(180deg, #8a7dc8 0%, #7467b3 55%, #6256a0 100%);
  color: #fff;
}

.gift-cards-partner-modal[data-partner-theme="amber"] .stamp-cards-partner-actions__btn--primary,
.gift-cards-partner-modal[data-partner-theme="amber"] .stamp-cards-partner-actions__btn--route {
  background: linear-gradient(180deg, #f7b84a 0%, #f5a623 55%, #d48c12 100%);
  color: #121018;
}

.gift-cards-partner-modal[data-partner-theme="amber"] .stamp-cards-partner-actions__btn--primary:hover,
.gift-cards-partner-modal[data-partner-theme="amber"] .stamp-cards-partner-actions__btn--route:hover {
  background: linear-gradient(180deg, #ffc865 0%, #f7b034 55%, #e09818 100%);
  color: #121018;
}

.gift-cards-partner-modal[data-partner-theme="purple"] .stamp-cards-partner-actions__btn--primary,
.gift-cards-partner-modal[data-partner-theme="purple"] .stamp-cards-partner-actions__btn--route {
  background: linear-gradient(180deg, #c34cae 0%, #b0358b 55%, #922a72 100%);
  color: #fff;
}

.gift-cards-partner-modal[data-partner-theme="purple"] .stamp-cards-partner-actions__btn--primary:hover,
.gift-cards-partner-modal[data-partner-theme="purple"] .stamp-cards-partner-actions__btn--route:hover {
  background: linear-gradient(180deg, #d25cbc 0%, #c34cae 55%, #b0358b 100%);
  color: #fff;
}

.modal-content.stamp-cards-partner-modal {
  background: #000;
  border-color: rgba(255, 255, 255, 0.08);
  position: relative;
}

/* Close (X) on the sheet — sheet itself already clears the notch. */
.stamp-cards-partner-modal .modal-header {
  background: transparent;
  border: 0;
  left: 0;
  padding: 0.65rem 0.75rem 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
}

.stamp-cards-partner-modal .modal-header .btn-close,
.stamp-cards-partner-modal .stamp-cards-partner-modal__close {
  align-items: center;
  background: transparent !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #f8f8f8 !important;
  display: inline-flex;
  filter: none;
  font-size: 1.1rem;
  height: 1.75rem;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  opacity: 0.95;
  padding: 0;
  pointer-events: auto;
  width: 1.75rem;
  z-index: 5;
}

.stamp-cards-partner-modal .stamp-cards-partner-modal__close-icon {
  color: inherit;
  line-height: 1;
  pointer-events: none;
}

.stamp-cards-partner-modal .modal-body {
  background: #000;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1rem;
}

.stamp-cards-map-info {
  color: #ffffff;
  max-width: 180px;
}

.stamp-cards-map-info__title {
  color: #ffffff;
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.stamp-cards-map-info__address {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0.15rem 0 0;
}

.stamp-cards-map .leaflet-popup-content-wrapper,
.stamp-cards-map .leaflet-popup-tip {
  background: linear-gradient(160deg, rgba(142, 90, 213, 0.95), rgba(26, 26, 26, 0.98));
  border: 1px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  color: #ffffff;
}

.stamp-cards-map .leaflet-popup-close-button {
  color: #ffffff;
  font-size: 1rem;
  padding: 0.2rem 0.35rem 0 0;
}

.stamp-cards-map .leaflet-popup-content {
  margin: 0.45rem 0.55rem;
}

.stamp-card-shop-page__back {
  color: var(--celosys-purple-light);
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-decoration: none;
}

.stamp-card-shop-page__back:hover {
  color: #fff;
  text-decoration: underline;
}

.stamp-card-shop-page__title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.stamp-card-shop-page__address {
  color: var(--celosys-text-muted);
  font-size: 0.92rem;
  margin: 0;
}

.stamp-card-shop-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--celosys-border);
  border-radius: calc(var(--celosys-radius) + 4px);
  margin-top: 1rem;
  padding: 1rem;
}

.stamp-card-shop-section__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.stamp-card-shop-section__empty {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.stamp-card-shop-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stamp-card-shop-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stamp-card-shop-field__label {
  color: var(--celosys-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stamp-card-shop-field__value {
  color: #fff;
  font-size: 0.92rem;
  text-decoration: none;
  word-break: break-word;
}

.stamp-card-shop-field__value:hover {
  color: var(--celosys-purple-light);
  text-decoration: underline;
}

.stamp-card-shop-field__value--muted {
  color: var(--celosys-text-muted);
}

.stamp-card-shop-program-list,
.stamp-card-shop-device-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stamp-card-shop-program-list__item,
.stamp-card-shop-device-list__item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--celosys-border);
  border-radius: var(--celosys-radius);
  padding: 0.75rem 0.85rem;
}

.stamp-card-shop-program-list__name,
.stamp-card-shop-device-list__name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.stamp-card-shop-program-list__reward {
  color: var(--celosys-purple-light);
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.stamp-card-shop-program-list__meta,
.stamp-card-shop-device-list__meta {
  color: var(--celosys-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0.2rem 0 0;
}

.stamp-card-shop-device-list__header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.stamp-card-shop-device-list__status {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.stamp-card-shop-device-list__status--active {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.stamp-card-shop-device-list__status--inactive {
  background: rgba(255, 255, 255, 0.08);
  color: var(--celosys-text-muted);
}

.portal-home__section-intro {
  color: var(--celosys-text-muted);
  margin: -0.35rem 0 1.25rem;
}

.bonus-progress {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 0.55rem;
  margin-top: 0.65rem;
  overflow: hidden;
}

.bonus-progress__bar {
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 999px;
  height: 100%;
  min-width: 0;
  transition: width 0.25s ease;
}

.bonus-progress--compact {
  margin-top: 0.35rem;
  max-width: 11rem;
}

.loyalty-card__compact-meta--bonus {
  flex: 1;
  min-width: 0;
}

.stamp-cards-page__intro {
  color: var(--celosys-text-muted);
  margin: -0.35rem 0 1.25rem;
}

.stamp-cards-partner__status {
  color: var(--celosys-text-muted);
  margin: 1rem 1.25rem 1.5rem;
  text-align: center;
}

.stamp-cards-partner-detail {
  background: #000;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stamp-cards-partner-hero {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 11.5rem;
  overflow: hidden;
  position: relative;
}

.stamp-cards-partner-hero--with-bg {
  min-height: 12.25rem;
}

.stamp-cards-partner-hero--no-bg {
  justify-content: flex-start;
  min-height: 0;
}

.stamp-cards-partner-hero--no-bg .stamp-cards-partner-hero__panel {
  /* Space for absolute close button when there is no background image. */
  padding-top: 3rem;
}

.stamp-cards-partner-hero__backdrop {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.stamp-cards-partner-hero__bg,
.stamp-cards-partner-hero__bg-blur {
  border: 0;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.stamp-cards-partner-hero__bg {
  z-index: 0;
}

.stamp-cards-partner-hero__bg-blur {
  filter: blur(14px);
  transform: scale(1.08);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  z-index: 1;
}

.stamp-cards-partner-hero__fade {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.stamp-cards-partner-hero__fade--top {
  /* Soft scrim only — keep close button readable without a solid black bar. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 28%, transparent 55%);
}

.stamp-cards-partner-hero__fade--bottom {
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.72) 68%, #000 100%);
}

.stamp-cards-partner-hero__panel {
  background: transparent;
  flex: 0 0 auto;
  padding: 3.25rem 1.15rem 0.95rem;
  position: relative;
  text-align: left;
  z-index: 1;
}

.stamp-cards-partner-hero--with-bg .stamp-cards-partner-hero__panel {
  padding-top: 3.5rem;
}

.stamp-cards-partner-hero__logo {
  border-radius: 1rem;
  display: block;
  height: 4.75rem;
  margin: 0 0 0.85rem;
  object-fit: cover;
  position: relative;
  width: 4.75rem;
  z-index: 2;
}

.stamp-cards-partner-hero__logo--fallback {
  background: rgba(255, 255, 255, 0.12);
}

.stamp-cards-partner-hero__title {
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  position: relative;
  z-index: 2;
}

.stamp-cards-partner-hero__address {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0.4rem 0 0;
  position: relative;
  z-index: 2;
}

.stamp-cards-partner-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  position: relative;
  z-index: 2;
}

.stamp-cards-partner-hero__badge {
  background: rgba(8, 38, 22, 0.92);
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 999px;
  color: #4ade80;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.38rem 0.9rem;
}

.stamp-cards-partner-detail__body {
  background: #000;
  display: grid;
  gap: 1rem;
  padding: 0.5rem 1.25rem 0.5rem;
}

.stamp-cards-partner-card {
  background: rgba(8, 5, 14, 0.96);
  border: 1px solid rgba(58, 36, 88, 0.55);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}

.stamp-cards-partner-card__title {
  color: #d8b4fe;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.stamp-cards-partner-card__subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.35;
  margin: -0.45rem 0 1rem;
}

.stamp-cards-partner-card__desc {
  color: var(--celosys-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  white-space: pre-line;
}

.stamp-cards-partner-card__text {
  color: var(--celosys-text);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.stamp-cards-partner-card__meta {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
  margin: 0.35rem 0 0;
}

.stamp-cards-partner-icon {
  display: block;
  fill: currentColor;
  height: 1.35rem;
  width: 1.35rem;
}

.stamp-cards-partner-icon--chevron {
  height: 1.1rem;
  opacity: 0.55;
  width: 1.1rem;
}

.gift-cards-partner-modal .stamp-cards-partner-actions__icon {
  color: #f8f8f8;
}

.stamp-cards-partner-actions-list,
.stamp-cards-partner-benefits-list {
  display: grid;
  gap: 0.55rem;
}

.stamp-cards-partner-action-tile {
  align-items: center;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(58, 36, 88, 0.45);
  border-radius: 0.9rem;
  color: inherit;
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.stamp-cards-partner-action-tile:hover {
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(168, 85, 247, 0.45);
  color: inherit;
}

.stamp-cards-partner-action-tile--disabled {
  cursor: default;
  opacity: 0.72;
}

.stamp-cards-partner-action-tile__icon {
  align-items: center;
  color: #c084fc;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.stamp-cards-partner-action-tile__content {
  display: grid;
  flex: 1 1 auto;
  gap: 0.15rem;
  min-width: 0;
}

.stamp-cards-partner-action-tile__label {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.stamp-cards-partner-action-tile__value {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stamp-cards-partner-action-tile__chevron {
  align-items: center;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  flex: 0 0 auto;
}

.stamp-cards-partner-benefit-tile {
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(58, 36, 88, 0.45);
  border-radius: 0.9rem;
  padding: 0.85rem 0.95rem;
}

.stamp-cards-partner-benefit-tile__name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.stamp-cards-partner-benefit-tile__reward {
  color: var(--celosys-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

.stamp-cards-partner-benefit-tile__meta {
  color: var(--celosys-text-muted);
  font-size: 0.84rem;
  margin: 0.3rem 0 0;
}

.stamp-cards-partner-devices-scroll {
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
  margin: 0 -0.15rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.stamp-cards-partner-devices {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  min-width: 100%;
  padding: 0;
  width: max-content;
}

.stamp-cards-partner-device {
  flex: 0 0 calc((100cqi - 1.95rem) / 4);
  max-width: calc((100cqi - 1.95rem) / 4);
  scroll-snap-align: start;
}

.stamp-cards-partner-device__card {
  align-items: stretch;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(72, 48, 108, 0.42);
  border-radius: 0.9rem;
  display: block;
  height: 100%;
  min-height: 11.75rem;
  padding: 0;
  position: relative;
  text-align: center;
}

.stamp-cards-partner-device__count {
  background: #6d28d9;
  border-radius: 0.4rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.28rem 0.42rem;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  z-index: 2;
}

.stamp-cards-partner-device__icon-wrap {
  align-items: flex-end;
  bottom: 1.55rem;
  display: flex;
  justify-content: center;
  left: 0.25rem;
  position: absolute;
  right: 0.25rem;
  top: 0.95rem;
  z-index: 1;
}

.stamp-cards-partner-device__icon {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 96%;
  object-fit: contain;
  width: 96%;
}

.stamp-cards-partner-device__icon--fallback {
  background: rgba(192, 132, 252, 0.1);
  border-radius: 0.65rem;
  height: 100%;
  max-height: 100%;
  max-width: 96%;
  width: 96%;
}

.stamp-cards-partner-device__name {
  bottom: 0.5rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  left: 0.15rem;
  line-height: 1.2;
  position: absolute;
  right: 0.15rem;
  word-break: break-word;
  z-index: 2;
}

.stamp-cards-partner-actions {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem 1.25rem 1.25rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 28%);
}

.stamp-cards-partner-actions--single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.stamp-cards-partner-actions--single .stamp-cards-partner-actions__btn {
  max-width: 16rem;
  width: 100%;
}

.stamp-cards-partner-actions__btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 0.45rem;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  text-decoration: none;
}

.stamp-cards-partner-actions__icon {
  display: inline-flex;
  height: 1.15rem;
  width: 1.15rem;
}

.stamp-cards-partner-actions__icon svg {
  height: 100%;
  width: 100%;
}

.stamp-cards-partner-actions__btn--primary {
  background: var(--celosys-purple);
  color: #fff;
}

.stamp-cards-partner-actions__btn--primary:hover {
  background: #7c4fd0;
  color: #fff;
}

.stamp-cards-partner-actions__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--celosys-border);
  color: var(--celosys-text);
}

.stamp-cards-partner-actions__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.stamp-cards-page__greeting {
  color: var(--celosys-text);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.stamp-cards-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.stamp-cards-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(142, 90, 213, 0.2);
  overflow: hidden;
}

.stamp-cards-tabs__btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--stamp-muted, var(--celosys-text-muted));
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.75rem 0.5rem 0.85rem;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.stamp-cards-tabs__btn:hover,
.stamp-cards-tabs__btn:focus {
  color: #fff;
  border-color: transparent;
}

.stamp-cards-tabs__btn--active {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.stamp-cards-tabs__btn--active::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: var(--celosys-purple);
  border-radius: 2px 2px 0 0;
}

.stamp-cards-activate-btn {
  background: linear-gradient(135deg, #9d6de0 0%, #7c4fbf 100%);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
}

.stamp-cards-activate-btn:hover,
.stamp-cards-activate-btn:focus {
  filter: brightness(1.05);
}

.stamp-cards-deactivate-btn {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 999px;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
}

.stamp-cards-deactivate-btn:hover,
.stamp-cards-deactivate-btn:focus {
  background: rgba(248, 113, 113, 0.12);
}

.stamp-cards-shop-link {
  background: transparent;
  border: 1px solid rgba(142, 90, 213, 0.4);
  border-radius: 999px;
  color: var(--celosys-purple-light, #c4a0f0);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
}

.stamp-cards-shop-link:hover,
.stamp-cards-shop-link:focus {
  background: rgba(142, 90, 213, 0.12);
}

.stamp-cards-shop-link--header {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

.stamp-card-qr {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1.25rem 0;
}

.stamp-card-qr__image {
  background: #fff;
  border-radius: 0.75rem;
  height: 148px;
  padding: 0.5rem;
  width: 148px;
}

.stamp-card-qr__hint {
  color: var(--stamp-muted);
  font-size: 0.78rem;
  margin: 0;
  text-align: center;
}

.stamp-slot-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stamp-slot__date {
  color: var(--stamp-muted);
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
}

.loyalty-card {
  --stamp-accent: var(--celosys-purple);
  --stamp-accent-soft: rgba(142, 90, 213, 0.2);
  --stamp-ink: #ffffff;
  --stamp-muted: var(--celosys-text-muted);
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: calc(var(--celosys-radius) + 8px);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--celosys-card-w);
  overflow: hidden;
  position: relative;
  width: var(--celosys-card-w);
}

.loyalty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(142, 90, 213, 0.12), transparent 42%);
  pointer-events: none;
}

.loyalty-card--complete {
  border-color: rgba(142, 90, 213, 0.45);
}

.loyalty-card--ticket-event {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.loyalty-card--ticket-event:hover {
  border-color: rgba(142, 90, 213, 0.55);
}

.loyalty-card--ticket-event.loyalty-card--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ticket-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.loyalty-card--ticket-event.loyalty-card--has-bg > * {
  position: relative;
  z-index: 1;
}

/*
 * Tickets list D boxes — same plate tokens as Home Tickets.
 * Stroke on ::after so event photo can keep ::before (--ticket-bg).
 */
.tickets-page .loyalty-card {
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--celosys-u))
      calc(var(--celosys-tickets-plate-ry) * var(--celosys-u))
      at calc(var(--celosys-tickets-plate-cx) * var(--celosys-u))
      calc(var(--celosys-tickets-plate-cy) * var(--celosys-u)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--celosys-u));
  overflow: hidden;
}

.tickets-page .loyalty-card::before {
  background: none;
  content: none;
}

.tickets-page .loyalty-card--ticket-event.loyalty-card--has-bg::before {
  background-image: var(--ticket-bg);
  background-position: center;
  background-size: cover;
  content: "";
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.tickets-page .loyalty-card::after {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-tickets-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-tickets-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.tickets-page .loyalty-card > * {
  position: relative;
  z-index: 1;
}

.ticket-event-hero {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 10.5rem;
  padding: 0;
  background: linear-gradient(135deg, rgba(142, 90, 213, 0.12), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(142, 90, 213, 0.2);
}

.ticket-event-hero__inner {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  align-items: flex-end;
  min-height: inherit;
}

.ticket-event-hero--with-bg {
  background-image: var(--ticket-hero-bg);
  background-size: cover;
  background-position: center;
  border-color: transparent;
  color: #fff;
  min-height: 12rem;
}

.ticket-event-hero--with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.55) 100%);
  pointer-events: none;
}

/* testo/logo sopra l'immagine — niente barra nera loyalty-card__header */
.ticket-event-hero .loyalty-card__header,
.ticket-event-hero .ticket-event-hero__title-row {
  background: transparent !important;
  padding: 0;
  width: 100%;
  box-shadow: none;
  border: none;
}

.ticket-event-hero--with-bg .loyalty-card__address,
.ticket-event-hero--with-bg .ticket-event-hero__title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.ticket-event-hero__title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.ticket-event-map {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(142, 90, 213, 0.2);
  background: #e8eef5;
  height: 11rem;
  width: 100%;
  position: relative;
}

.ticket-seating-map__frame {
  position: relative;
  width: 100%;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(60, 64, 72, 0.2);
  background: #f3f4f6;
}

.ticket-seating-map__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.ticket-seating-map__hotspot {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--hotspot-color, rgba(40, 90, 160, 0.85));
  background: color-mix(in srgb, var(--hotspot-color, #285aa0) var(--hotspot-opacity, 28%), transparent);
  color: var(--hotspot-text, #10243a);
  cursor: pointer;
  font: inherit;
  font-size: var(--hotspot-size, 0.75rem);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s ease;
}

.ticket-seating-map__hotspot:hover,
.ticket-seating-map__hotspot:focus {
  background: color-mix(in srgb, var(--hotspot-color, #285aa0) calc(var(--hotspot-opacity, 28%) + 17%), transparent);
  outline: none;
}

.ticket-event-map__canvas {
  height: 11rem;
  width: 100%;
  border: none;
  display: block;
  background: #dbe4ee;
}

.ticket-event-map__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: #5b6470;
  background: #e8eef5;
}

.ticket-event-map__status[hidden] {
  display: none !important;
}

.ticket-event-map__canvas[hidden] {
  display: none !important;
}

.loyalty-card--sponsor .loyalty-card__header {
  background: linear-gradient(135deg, #0b3a52 0%, #0e7490 100%);
}

.loyalty-card--progress {
  border-color: rgba(142, 90, 213, 0.4);
}

.loyalty-card--spent {
  opacity: 0.88;
  border-color: rgba(148, 163, 184, 0.55);
}

.loyalty-card--spent .loyalty-card__header {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

.loyalty-card--spent[aria-disabled="true"] {
  cursor: default;
}

.loyalty-card__compact-count--spent {
  color: #fca5a5;
  font-weight: 600;
}

.loyalty-card__badge--spent {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}

.loyalty-card--has-reward {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.loyalty-card--activated {
  border-color: rgba(34, 197, 94, 0.35);
}

.loyalty-card--compact {
  min-height: 0;
}

.loyalty-card__header {
  background: linear-gradient(135deg, #111111 0%, #1f1f1f 100%);
  color: #fff;
  padding: 1.1rem 1.25rem 1rem;
  position: relative;
  z-index: 1;
}

.loyalty-card__header--with-logo {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.loyalty-card__header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.loyalty-card__header-aside {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

.loyalty-card__logo {
  background: #fff;
  border-radius: 0.65rem;
  flex: 0 0 auto;
  height: 44px;
  object-fit: contain;
  padding: 0.2rem;
  width: 44px;
}

.loyalty-card__logo--sheet {
  height: 40px;
  width: 40px;
}

.loyalty-card__shop {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.loyalty-card__address {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

.loyalty-card__program {
  color: var(--stamp-ink, #fff);
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 0.55rem;
}

.loyalty-card__compact-body {
  padding: 0.75rem 0.9rem 0.85rem;
  position: relative;
  z-index: 1;
}

.loyalty-card--compact {
  cursor: pointer;
  min-height: 0;
}

.loyalty-card__reward-banner {
  align-items: center;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(22, 163, 74, 0.18));
  border-bottom: 1px solid rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
  display: flex;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  position: relative;
  z-index: 1;
}

.loyalty-card__reward-banner--sheet {
  border-radius: 0.75rem;
  margin: 0 1rem 0.5rem;
}

.loyalty-card__reward-banner-count {
  align-items: center;
  background: #22c55e;
  border-radius: 999px;
  color: #052e16;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 800;
  justify-content: center;
  min-height: 1.7rem;
  min-width: 1.7rem;
  padding: 0 0.45rem;
}

.loyalty-card__reward-banner-text {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.loyalty-card__compact-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  width: 100%;
}

.loyalty-card__compact-meta {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.55rem;
}

.loyalty-card__compact-count {
  color: var(--stamp-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.loyalty-card__qr-icon {
  color: var(--celosys-purple-light, #c4a0f0);
  display: inline-flex;
  height: 2.1rem;
  width: 2.1rem;
}

.loyalty-card__qr-icon svg {
  height: 100%;
  width: 100%;
}

.loyalty-card__body {
  padding: 1rem 1.15rem;
  position: relative;
  z-index: 1;
}

.loyalty-card__reward {
  color: var(--celosys-purple-light);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.loyalty-card__progress-label {
  color: var(--stamp-ink);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.stamp-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 0.25rem;
}

.stamp-grid--compact {
  flex: 1 1 auto;
  gap: 0.28rem;
  margin: 0;
  min-width: 0;
}

.stamp-grid--detail {
  gap: 0.4rem;
  max-width: 17rem;
}

@media (max-width: 420px) {
  .stamp-grid {
    gap: 0.4rem;
  }
}

@media (max-width: 767.98px) {
  .celosys-header-spacer {
    height: calc(2.9rem + env(safe-area-inset-top, 0px));
  }

  :root {
    --celosys-header-offset: calc(2.9rem + env(safe-area-inset-top, 0px));
  }

  .celosys-main {
    padding-top: 0.85rem;
  }

  .stamp-cards-page__chrome {
    margin: 0 -0.5rem;
    padding: 0 0.5rem 0.1rem;
  }

  .stamp-cards-page__section-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  .stamp-cards-page__actions {
    gap: 0.45rem;
    margin-bottom: 0.5rem;
  }

  .stamp-cards-page__action-btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
  }

  .stamp-cards-tabs__btn {
    font-size: 0.86rem;
    padding: 0.55rem 0.4rem 0.65rem;
  }
}

.stamp-slot {
  align-items: center;
  aspect-ratio: 1;
  background: transparent;
  border: 2px solid rgba(142, 90, 213, 0.45);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  position: relative;
}

.stamp-slot--sm {
  max-width: 1.35rem;
  width: 100%;
}

.stamp-slot--md {
  max-width: 1.85rem;
  width: 100%;
}

.stamp-slot--empty {
  background: transparent;
  border: 2px solid rgba(142, 90, 213, 0.4);
  box-shadow: none;
}

.stamp-slot--reward {
  border-color: rgba(142, 90, 213, 0.65);
}

.stamp-slot--filled {
  background: linear-gradient(145deg, #9d6de0 0%, #8e5ad5 55%, #6b3fa8 100%);
  border: 2px solid #7c4fbf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(142, 90, 213, 0.3);
}

.stamp-slot--filled.stamp-slot--reward {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(142, 90, 213, 0.2),
    0 3px 8px rgba(142, 90, 213, 0.35);
}

.stamp-slot__icon {
  color: #fff;
  height: 55%;
  width: 55%;
}

.stamp-slot--reward:not(.stamp-slot--filled) .stamp-slot__icon {
  display: none;
}

.loyalty-card__fallback {
  color: var(--stamp-muted);
  margin: 0;
}

.loyalty-card__footer {
  border-top: 1px dashed rgba(142, 90, 213, 0.25);
  margin-top: auto;
  padding: 0.95rem 1.25rem 1.15rem;
  position: relative;
  z-index: 1;
}

.loyalty-card__footer--actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.loyalty-card__badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45rem 0.8rem;
}

.loyalty-card__badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.loyalty-card__badge--muted {
  background: rgba(255, 255, 255, 0.08);
  color: var(--stamp-muted);
}

body.stamp-card-sheet-open {
  overflow: hidden;
}

.stamp-card-sheet {
  inset: 0;
  position: fixed;
  z-index: 1080;
}

.stamp-card-sheet[hidden] {
  display: none !important;
}

.stamp-card-sheet__backdrop {
  background: rgba(0, 0, 0, 0.62);
  inset: 0;
  position: absolute;
}

.stamp-card-sheet__panel {
  background: var(--celosys-surface, #121212);
  border: 1px solid var(--celosys-border);
  border-radius: 1.1rem 1.1rem 0 0;
  bottom: 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: min(92vh, 760px);
  max-width: 32rem;
  overflow: auto;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}

.stamp-card-sheet__panel--split-scroll {
  overflow: hidden;
  padding-bottom: 0;
}

.stamp-card-sheet__panel--split-scroll .stamp-card-sheet__fixed {
  flex: 0 0 auto;
}

.stamp-card-sheet__panel--split-scroll .stamp-card-sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.stamp-card-sheet__top {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 1rem 0.5rem;
}

.stamp-card-sheet__heading {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 0.65rem;
  min-width: 0;
}

.stamp-card-sheet__heading-text {
  min-width: 0;
}

.stamp-card-sheet__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.stamp-card-sheet__program {
  color: var(--celosys-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.2rem 0 0;
}

.stamp-card-sheet__close {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.4rem;
  height: 2.1rem;
  justify-content: center;
  line-height: 1;
  width: 2.1rem;
}

/* ── Gutscheine (lavendel mock) ─────────────────────────────────────────── */

.gift-cards-page {
  --gift-lavendel: #695da5;
  --gift-coral: #e76f51;
  --gift-teal: #2eb7a5;
  --gift-magenta: #b0358b;
  --gift-muted: #b5b5b5;
  --gift-text: #f8f8f8;
  /*
   * DO NOT use 100cqw on this same element (container-type + cqw on self → 0 in many browsers).
   * That zeroed --gift-u and made all gift calc() size rules invalid (= "nothing changed").
   */
  --gift-u: var(--celosys-u);
  box-sizing: border-box;
}

/* Cancel .celosys-main 1rem pad so left:19.42 maps from frame edge. */
body.celosys-app--app-hero .gift-cards-page {
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}

body.celosys-app--app-hero .gift-cards-page > .stamp-cards-page__chrome {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

body.celosys-app--app-hero .gift-cards-page > .stamp-cards-page__chrome > * {
  margin-top: 0;
}

.gift-cards-page .stamp-cards-page__body {
  padding-top: 0;
}

/* Titel_Gutscheine — title icon box 40×40 (circle) */
.gift-cards-page .stamp-cards-page__heading {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: calc(var(--celosys-c-heading-gap-x) * var(--gift-u));
  height: calc(var(--celosys-c-heading-h) * var(--gift-u));
  margin: 0 0 calc(var(--celosys-c-gap-after-heading) * var(--gift-u));
  min-height: calc(var(--celosys-c-heading-h) * var(--gift-u));
  padding-left: calc(var(--celosys-c-heading-pad-x) * var(--gift-u));
  padding-right: calc(var(--celosys-c-heading-pad-x) * var(--gift-u));
  width: 100%;
}

.gift-cards-page .partner-hub__heading-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: calc(var(--celosys-c-icon-h) * var(--gift-u));
  justify-content: center;
  overflow: visible;
  position: relative;
  width: calc(var(--celosys-c-icon-w) * var(--gift-u));
}

.gift-cards-page .partner-hub__heading-icon img {
  aspect-ratio: 1;
  display: block;
  height: calc(var(--celosys-c-icon-h) * var(--gift-u));
  max-height: none;
  max-width: none;
  object-fit: contain;
  width: calc(var(--celosys-c-icon-w) * var(--gift-u));
}

.gift-cards-page .gift-cards-page__heading-glyph {
  color: #F8F8F8;
  font-size: calc(18 * var(--gift-u));
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.gift-cards-page .partner-hub__title {
  color: #f9f9f9;
  flex: 1;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-title-size) * var(--gift-u));
  font-weight: 600;
  letter-spacing: var(--celosys-c-title-tracking);
  line-height: 1;
  margin: 0;
  min-width: 0;
}

.gift-cards-page .stamp-cards-page__info-btn {
  flex-shrink: 0;
  height: calc(var(--celosys-c-info) * var(--gift-u));
  margin-left: 0;
  opacity: 1;
  width: calc(var(--celosys-c-info) * var(--gift-u));
}

.gift-cards-page .stamp-cards-page__info-btn img {
  display: none;
}

.gift-cards-page .gift-cards-page__info-icon,
.gift-cards-page .gift-cards-page__find-icon {
  color: #695da5;
  font-size: calc(var(--celosys-c-info-icon) * var(--gift-u));
  line-height: 1;
}

.gift-cards-page .gift-cards-seg__thumb {
  --celosys-seg-thumb-a: rgba(105, 93, 165, 1);
  --celosys-seg-thumb-b: rgba(105, 93, 165, 0.6);
  --celosys-seg-thumb-c: rgba(79, 70, 124, 0.5);
  --celosys-seg-thumb-d: rgba(53, 47, 83, 0.4);
  --celosys-seg-thumb-e: rgba(26, 23, 41, 0.3);
  --celosys-seg-thumb-f: rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(
    106.6% 244.3% at 0% 0%,
    var(--celosys-seg-thumb-a) 0%,
    var(--celosys-seg-thumb-b) 49.648%,
    var(--celosys-seg-thumb-c) 62.236%,
    var(--celosys-seg-thumb-d) 74.824%,
    var(--celosys-seg-thumb-e) 87.412%,
    var(--celosys-seg-thumb-f) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: calc(var(--celosys-seg-thumb-radius) * var(--gift-u));
  height: calc(26.08 / 35 * 100%);
  left: calc(3.79 / 348.19 * 100%);
  top: calc(4.46 / 35 * 100%);
  transform: none;
  width: calc(167.5 / 348.19 * 100%);
}

.gift-cards-page .gift-cards-seg--inactive .stamp-cards-seg__thumb,
.gift-cards-page .gift-cards-seg--inactive .gift-cards-seg__thumb {
  transform: translate3d(calc((176.62 - 3.79) / 167.5 * 100%), 0, 0);
}

.gift-cards-page .gift-cards-seg--active .stamp-cards-seg__thumb,
.gift-cards-page .gift-cards-seg--active .gift-cards-seg__thumb {
  transform: translate3d(0, 0, 0);
}

.gift-cards-page .gift-cards-seg {
  aspect-ratio: 348.19 / 35;
  height: auto;
  /* Tabs bottom 409 → empty art 419 ⇒ 10px (Figma 42:1051) */
  margin: 0 0 calc(var(--celosys-c-gap-after-seg) * var(--gift-u)) var(--celosys-bar-side);
  width: var(--celosys-bar-w);
}

.gift-cards-page .stamp-cards-seg__track {
  background: var(--celosys-seg-track-bg);
  border-radius: calc(var(--celosys-seg-track-radius) * var(--gift-u));
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.gift-cards-page .stamp-cards-seg__buttons {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* Tab labels: force optical vertical center (browser had content stuck to top). */
.gift-cards-page .stamp-cards-seg__btn {
  align-items: center;
  box-sizing: border-box;
  color: #b5b5b5;
  display: inline-flex;
  flex-direction: row;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-tab-size) * var(--gift-u) + 1pt);
  font-weight: 500;
  gap: calc(var(--celosys-c-tab-gap) * var(--gift-u));
  height: 100%;
  justify-content: center;
  letter-spacing: var(--celosys-c-tab-tracking);
  line-height: 1;
  margin: 0;
  min-height: 100%;
  padding: 0;
  transform: none;
}

.gift-cards-page .stamp-cards-seg__btn--active {
  color: #f8f8f8;
  font-weight: 600;
}

.gift-cards-page .stamp-cards-seg__btn span {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.gift-cards-page .stamp-cards-seg__icon {
  color: inherit;
  display: inline-flex;
  flex-shrink: 0;
  font-size: calc(14 * var(--gift-u));
  height: auto;
  line-height: 1;
  margin: 0;
  width: auto;
}

/* Partner finden — D-plate fill remapped to Gutscheine lavendel */
.gift-cards-page .gift-cards-partner-find {
  --pf-plate-u: var(--gift-u, var(--celosys-u));
  --celosys-partner-plate-a: var(--celosys-gutscheine-plate-a);
  --celosys-partner-plate-b: var(--celosys-gutscheine-plate-b);
  --celosys-partner-plate-c: var(--celosys-gutscheine-plate-c);
  --celosys-partner-plate-radius: var(--celosys-gutscheine-plate-radius);
  --celosys-partner-stroke-rgb: var(--celosys-gutscheine-stroke-rgb);
  --celosys-partner-stroke-fade-at: var(--celosys-gutscheine-stroke-fade-at);
  --celosys-partner-stroke-w: var(--celosys-gutscheine-stroke-w);
  --celosys-partner-stroke-clip-bottom: var(--celosys-gutscheine-stroke-clip-bottom);
}

.gift-cards-page .gift-cards-partner-find .stamp-cards-partner-find__lupe,
.gift-cards-page .gift-cards-partner-find .stamp-cards-partner-find__title,
.gift-cards-page .gift-cards-partner-find .stamp-cards-partner-find__arrow {
  color: #695da5;
}

.gift-cards-page .gift-cards-partner-find:hover .stamp-cards-partner-find__title,
.gift-cards-page .gift-cards-partner-find:focus-visible .stamp-cards-partner-find__title {
  color: #695da5;
}

/* Dual-panel carousel: fixed fold height; each panel scrolls independently. */
.gift-cards-page .gift-cards-tabs__viewport {
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.gift-cards-page--panel-scroll .gift-cards-tabs__viewport {
  min-height: 0;
}

.gift-cards-page .gift-cards-tabs__track {
  align-items: stretch;
  display: flex;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: 200%;
  will-change: transform;
}

.gift-cards-page--inactive .gift-cards-tabs__track {
  transform: translate3d(-50%, 0, 0);
}

.gift-cards-page .gift-cards-tabs__panel {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  flex: 0 0 50%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 0 calc(0.75rem + env(safe-area-inset-bottom, 0px) * 0.25);
  width: 50%;
}

/* Empty Abgelaufen fits the fold — no rubber-band scroll on short content. */
.gift-cards-page .gift-cards-tabs__panel:has(.gift-cards-empty--inactive) {
  overflow-y: hidden;
  overscroll-behavior-y: none;
}

/* Gesamt Guthaben 351.93×87.99 @ left 19.62 */
.gift-cards-page .gift-cards-summary,
.credits-page .gift-cards-summary,
.punkte-page .gift-cards-summary {
  aspect-ratio: var(--celosys-c-gift-summary-ratio-w) / var(--celosys-c-gift-summary-ratio-h);
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  margin: 0 0 calc(var(--celosys-c-gift-summary-gap) * var(--gift-u, var(--celosys-u))) var(--celosys-bar-side);
  overflow: hidden;
  padding: 0;
  position: relative;
  width: var(--celosys-bar-w);
}

.gift-cards-page .stamp-cards-page__chrome .gift-cards-summary,
.credits-page .stamp-cards-page__chrome .gift-cards-summary,
.punkte-page .stamp-cards-page__chrome .gift-cards-summary {
  margin-bottom: calc(var(--celosys-c-gift-summary-gap) * var(--gift-u, var(--celosys-u)));
  margin-top: 0;
}

/* Credits / Punkte: same Gutscheine summary box, pink plate instead of lavender */
.credits-page .gift-cards-summary,
.punkte-page .gift-cards-summary {
  --gift-u: var(--credits-u, var(--punkte-u, var(--celosys-u)));
  --celosys-gutscheine-plate-a: var(--celosys-partner-plate-a);
  --celosys-gutscheine-plate-b: var(--celosys-partner-plate-b);
  --celosys-gutscheine-plate-c: var(--celosys-partner-plate-c);
  --celosys-gutscheine-plate-stop-a: var(--celosys-partner-plate-stop-a);
  --celosys-gutscheine-plate-stop-b: var(--celosys-partner-plate-stop-b);
  --celosys-gutscheine-plate-radius: var(--celosys-partner-plate-radius);
  --celosys-gutscheine-stroke: var(--celosys-partner-stroke);
  --celosys-gutscheine-stroke-rgb: var(--celosys-partner-stroke-rgb);
}

.credits-page .gift-cards-summary__hint,
.punkte-page .gift-cards-summary__hint {
  color: #b0358b;
}

.gift-cards-summary--identity-qr {
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: var(--celosys-bar-w);
}

.gift-cards-summary--identity-qr:focus-visible {
  outline: calc(2 * var(--gift-u, var(--celosys-u))) solid #b0358b;
  outline-offset: calc(2 * var(--gift-u, var(--celosys-u)));
}

.credits-page .gift-cards-summary__actions,
.punkte-page .gift-cards-summary__actions {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--gift-u, var(--celosys-u)));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(10 / 351.93 * 100%);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.credits-page .gift-cards-summary__actions .stamp-plate__qr,
.credits-page .gift-cards-summary__actions .stamp-plate__chevron,
.punkte-page .gift-cards-summary__actions .stamp-plate__qr,
.punkte-page .gift-cards-summary__actions .stamp-plate__chevron {
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--gift-u, var(--celosys-u)));
  line-height: 1;
}

.gift-cards-summary__base,
.gift-cards-summary__glitter,
.gift-cards-summary__plate {
  display: block;
  object-fit: fill;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Figma Gesamt Guthaben: plate/base sit ~5px below frame top (not full-bleed). */
.gift-cards-summary__base {
  height: calc(82.75 / 87.99 * 100%);
  left: calc(0.79 / 351.93 * 100%);
  top: calc(5.05 / 87.99 * 100%);
  width: calc(350 / 351.93 * 100%);
}

.gift-cards-summary__glitter {
  height: calc(82.75 / 87.99 * 100%);
  left: calc(0.38 / 351.93 * 100%);
  top: calc(5.05 / 87.99 * 100%);
  width: calc(350 / 351.93 * 100%);
  z-index: 3;
}

.gift-cards-summary__plate {
  height: calc(83.11 / 87.99 * 100%);
  left: calc(1.93 / 351.93 * 100%);
  top: calc(4.88 / 87.99 * 100%);
  width: calc(350 / 351.93 * 100%);
  z-index: 2;
}

.gift-cards-summary__content {
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  z-index: 4;
}

.gift-cards-summary__label-row {
  align-items: center;
  display: flex;
  gap: 0;
  left: calc(10 / 351.93 * 100%);
  position: absolute;
  top: calc(22.76 / 87.99 * 100%);
  transform: translateY(-50%);
}

.gift-cards-summary__label {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: calc(9 * var(--gift-u));
}

.gift-cards-summary__info {
  display: none;
}

.gift-cards-summary__value {
  color: #f8f8f8;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--gift-u));
  font-weight: 600;
  left: calc(10 / 351.93 * 100%);
  letter-spacing: 0;
  line-height: calc(20 * var(--gift-u));
  margin: 0;
  position: absolute;
  top: calc(48.42 / 87.99 * 100%);
  transform: translateY(-50%);
}

.gift-cards-summary__hint {
  color: #695da5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 500;
  left: calc(10 / 351.93 * 100%);
  line-height: calc(9 * var(--gift-u));
  margin: 0;
  position: absolute;
  top: calc(72.76 / 87.99 * 100%);
  transform: translateY(-50%);
}

/* Cards 350.2×99.92 @ left 19.42 — gap via --celosys-d-gap */
.gift-cards-list {
  display: grid;
  gap: calc(var(--celosys-d-gap) * var(--gift-u));
  margin: 0 0 0 var(--celosys-bar-side);
  overflow: visible;
  padding-top: 0;
  width: var(--celosys-bar-w);
}

/* Inactive tab: swipe-left soft-hide (muted red + trash U+100211) */
.gift-card-swipe {
  --gift-swipe-action-w: calc(72 * var(--gift-u, var(--celosys-u)));
  isolation: isolate;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--gift-u, var(--celosys-u)));
}

.gift-card-swipe.is-open {
  touch-action: none;
}

.gift-card-swipe__rail {
  align-items: stretch;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 0;
}

.gift-card-swipe.is-open .gift-card-swipe__rail,
.gift-card-swipe.is-dragging .gift-card-swipe__rail {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.gift-card-swipe__hide {
  align-items: center;
  background: #9e5a5a;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 0 var(--gift-swipe-action-w);
  justify-content: center;
  margin: 0;
  padding: 0;
  width: var(--gift-swipe-action-w);
}

.gift-card-swipe__trash-icon {
  color: #fff;
  display: block;
  font-size: calc(24 * var(--gift-u, var(--celosys-u)));
  line-height: 1;
  pointer-events: none;
}

.gift-card-swipe__front {
  background-color: rgba(26, 21, 40, 0.98);
  box-sizing: border-box;
  position: relative;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
  transition: transform 0.22s ease;
  width: 100%;
  will-change: transform;
  z-index: 1;
}

.gift-card-swipe.is-open .gift-card-swipe__front,
.gift-card-swipe.is-dragging .gift-card-swipe__front {
  touch-action: none;
}

.gift-card-swipe.is-dragging .gift-card-swipe__front {
  transition: none;
}

.gift-cards-page .gift-card--row {
  aspect-ratio: 350.2 / 99.92;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-gutscheine-plate-rx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-ry) * var(--gift-u, var(--celosys-u)))
      at calc(var(--celosys-gutscheine-plate-cx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-cy) * var(--gift-u, var(--celosys-u))),
    var(--celosys-gutscheine-plate-a) var(--celosys-gutscheine-plate-stop-a),
    var(--celosys-gutscheine-plate-b) var(--celosys-gutscheine-plate-stop-b),
    var(--celosys-gutscheine-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--gift-u, var(--celosys-u)));
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: transform 0.15s ease;
  width: 100%;
}

.gift-cards-page .gift-card--row::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-gutscheine-stroke-rgb), 1) 0%,
    rgba(var(--celosys-gutscheine-stroke-rgb), 0) var(--celosys-gutscheine-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-gutscheine-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-gutscheine-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.gift-cards-page .gift-card--row:hover,
.gift-cards-page .gift-card--row:focus-visible {
  box-shadow: none;
  outline: none;
  transform: translateY(-1px);
}

.gift-cards-page .gift-card__summary {
  box-sizing: border-box;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Shop logo — same model as Stempelkarte (--celosys-shop-logo-*) */
.gift-cards-page .gift-card__logo-wrap {
  --stamp-logo-ring-inset: var(--celosys-shop-logo-ring-inset);
  --stamp-logo-gap: var(--celosys-shop-logo-gap);
  display: block;
  height: var(--celosys-shop-logo-size);
  left: 0.38rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--celosys-shop-logo-size);
  z-index: 2;
}

.gift-cards-page .gift-card__logo-ring {
  background: transparent;
  border: 1.5px solid rgba(105, 93, 165, 0.9);
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: auto;
  inset: calc(var(--stamp-logo-ring-inset) * 100%);
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 2;
}

.gift-cards-page .gift-card__logo {
  border-radius: 50%;
  display: block;
  height: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  left: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  width: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  z-index: 1;
}

.gift-cards-page .gift-card__info {
  bottom: 0;
  left: calc(0.38rem + var(--celosys-shop-logo-size) + 0.38rem);
  min-width: 0;
  padding-right: calc(56 * var(--celosys-u));
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

/*
 * Figma text nodes sit under a 0.01px wrapper at top:5px and use vertical-align
 * center (translateY -50%). Card-relative visual top = 5 + figmaTop - halfLine.
 * Without the +5, labels hug the card edge.
 */
.gift-cards-page .gift-card__shop {
  left: 0;
  line-height: 1;
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(8.92 / 99.92 * 100%);
}

.gift-cards-page .gift-card__shop-label {
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 600;
  letter-spacing: 0;
  line-height: calc(9 * var(--gift-u));
}

.gift-cards-page .gift-card__shop-name {
  color: #f8f8f8;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--gift-u));
  font-weight: 700;
  line-height: calc(14 * var(--gift-u));
  margin-top: calc(4.68 * var(--gift-u));
}

/* Scope to list row only — never leak into .gift-card-sheet foot (ghost text). */
.gift-cards-page .gift-card--row .gift-card__balance-label,
.gift-cards-page .gift-card--row .gift-card__expires {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: calc(9 * var(--gift-u));
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  text-transform: uppercase;
}

.gift-cards-page .gift-card--row .gift-card__balance-label {
  top: calc(46.92 / 99.92 * 100%);
}

.gift-cards-page .gift-card--row .gift-card__expires {
  top: calc(82.24 / 99.92 * 100%);
}

.gift-cards-page .gift-card--row .gift-card__balance {
  color: #695da5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--gift-u));
  font-weight: 700;
  left: 0;
  line-height: calc(14 * var(--gift-u));
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(60.6 / 99.92 * 100%);
}

.gift-cards-page .gift-card--row .gift-card__meta {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 400;
  left: 0;
  letter-spacing: -0.004px;
  line-height: calc(9 * var(--gift-u));
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(82.24 / 99.92 * 100%);
}

.gift-cards-page .gift-card--row .gift-card__status {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 600;
  left: 0;
  line-height: calc(9 * var(--gift-u));
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(81.93 / 99.92 * 100%);
}

.gift-cards-page .gift-card__status--inactive {
  color: #e76f51;
}

.gift-cards-page .gift-card__actions {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--celosys-u));
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: calc(0.38rem + 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.gift-cards-page .gift-card__actions .stamp-plate__qr,
.gift-cards-page .gift-card__actions .stamp-plate__chevron {
  background: transparent;
  border-radius: 0;
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--celosys-u));
  height: auto;
  line-height: 1;
  margin: 0;
  max-width: none;
  padding: 0;
  width: auto;
}

/* Empty states — Figma info block 42:1256 inside 42:1051 */
.gift-cards-empty {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 calc(16 * var(--gift-u));
  position: relative;
  text-align: center;
  width: 100%;
}

/* Art 349.88×113.69 @ left 19.62 / top 0 of info */
.gift-cards-empty__art {
  aspect-ratio: 349.88 / 113.69;
  display: block;
  line-height: 0;
  margin: 0 0 0 var(--celosys-bar-side);
  overflow: hidden;
  position: relative;
  width: var(--celosys-bar-w);
}

.gift-cards-empty__art img {
  display: block;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: fill;
  object-position: center center;
  width: 100%;
}

/* Title center Y 121 / lh 14 ⇒ top 114; art bottom 113.69 ⇒ margin 0.31 */
.gift-cards-empty__title {
  color: #bcbcbc;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--gift-u));
  font-weight: 600;
  line-height: calc(14 * var(--gift-u));
  margin: calc(0.31 * var(--gift-u)) auto 0;
  max-width: calc(216 * var(--gift-u));
  text-align: center;
}

.gift-cards-empty__hint {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 600;
  line-height: 1.55;
  margin: calc(8 * var(--gift-u)) auto 0;
  max-width: calc(240 * var(--gift-u));
  text-align: center;
}

/*
 * Abgelaufen empty — Figma 42:615 / info 42:1042
 * art 113.69 → title mid ~121.3 → hint mid 141.11 / 155.11 → hairline 173.2
 */
.gift-cards-empty--inactive {
  padding-bottom: calc(8 * var(--gift-u));
}

.gift-cards-empty--inactive .gift-cards-empty__title {
  margin: calc(0.61 * var(--gift-u)) auto 0;
  max-width: none;
  width: 100%;
}

.gift-cards-empty--inactive .gift-cards-empty__hint {
  line-height: calc(14 * var(--gift-u));
  margin: calc(8.31 * var(--gift-u)) auto 0;
  max-width: calc(230 * var(--gift-u));
}

.gift-cards-empty--inactive .gift-cards-empty__rule {
  /* hint line2 bottom ≈ 159.6 → rule 173.2 */
  margin: calc(13.59 * var(--gift-u)) 0 0;
}

/* Hairline @ 149.2 — title bottom 128 ⇒ gap 21.2; width 368.27 from left 0 */
.gift-cards-empty__rule {
  line-height: 0;
  margin: calc(21.2 * var(--gift-u)) 0 0;
  width: calc(368.27 * var(--gift-u));
}

.gift-cards-empty__rule img {
  display: block;
  height: 1px;
  object-fit: fill;
  opacity: 0.85;
  width: 100%;
}

/*
 * Lead "Was du jetzt…" — Figma left 72.5 (NOT centered), center Y ≈ 171.83+1.47.
 * Rule @ 149.2 ⇒ margin-top 15.63 to lead top (164.83).
 */
.gift-cards-empty__lead {
  color: #f9f9f9;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--gift-u));
  font-weight: 600;
  line-height: calc(14 * var(--gift-u));
  margin: calc(15.63 * var(--gift-u)) 0 0 calc(72.5 * var(--gift-u));
  text-align: left;
}

/* Hubs @ screen 615.97 / 668.66 — gap after lead bottom 178.83 = 18.14; hub↔hub via --celosys-d-gap */
.gift-cards-hub {
  display: grid;
  gap: calc(var(--celosys-d-gap) * var(--gift-u));
  margin: calc(18.14 * var(--gift-u)) 0 0 var(--celosys-bar-side);
  width: var(--celosys-bar-w);
}

.gift-cards-hub__row {
  appearance: none;
  aspect-ratio: 350 / 42.88;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-gutscheine-plate-rx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-ry) * var(--gift-u, var(--celosys-u)))
      at calc(var(--celosys-gutscheine-plate-cx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-cy) * var(--gift-u, var(--celosys-u))),
    var(--celosys-gutscheine-plate-a) var(--celosys-gutscheine-plate-stop-a),
    var(--celosys-gutscheine-plate-b) var(--celosys-gutscheine-plate-stop-b),
    var(--celosys-gutscheine-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--gift-u, var(--celosys-u)));
  color: inherit;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.gift-cards-hub__row::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-gutscheine-stroke-rgb), 1) 0%,
    rgba(var(--celosys-gutscheine-stroke-rgb), 0) var(--celosys-gutscheine-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-gutscheine-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-gutscheine-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.gift-cards-hub__row:hover,
.gift-cards-hub__row:focus-visible {
  outline: none;
  text-decoration: none;
}

.gift-cards-hub__row-inner {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

/*
 * Figma group origin left 3.07 inside 350 row — child lefts are relative to that.
 * Absolute in row = 3.07 + childLeft. Centers use translateY(-50%).
 */
.gift-cards-hub__icon {
  color: #695da5;
  display: block;
  font-size: calc(18 * var(--gift-u, var(--celosys-u)));
  height: auto;
  left: calc((3.07 + 7) / 350 * 100%);
  line-height: 1;
  position: absolute;
  text-align: center;
  top: calc(22.51 / 42.88 * 100%);
  transform: translateY(-50%);
  width: calc(24.174 / 350 * 100%);
}

.gift-cards-hub__row[data-gift-hub="meet"] .gift-cards-hub__icon {
  left: calc((3.07 + 10) / 350 * 100%);
  top: calc(22.5 / 42.88 * 100%);
  width: calc(22.14 / 350 * 100%);
}

.gift-cards-hub__text {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.gift-cards-hub__title {
  color: #695da5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--gift-u));
  font-weight: 700;
  left: calc((3.07 + 50) / 350 * 100%);
  letter-spacing: 0;
  line-height: calc(14 * var(--gift-u));
  margin: 0;
  position: absolute;
  right: calc(10 / 350 * 100%);
  top: calc(15.52 / 42.88 * 100%);
  transform: translateY(-50%);
  white-space: nowrap;
}

.gift-cards-hub__sub {
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--gift-u));
  font-weight: 600;
  left: calc((3.07 + 49) / 350 * 100%);
  letter-spacing: 0;
  line-height: calc(9 * var(--gift-u));
  margin: 0;
  position: absolute;
  right: calc(10 / 350 * 100%);
  top: calc(31.34 / 42.88 * 100%);
  transform: translateY(-50%);
  white-space: nowrap;
}

.gift-cards-hub__arrow {
  color: #695da5;
  display: block;
  font-size: calc(14 * var(--gift-u));
  height: auto;
  left: calc((3.07 + 331.43) / 350 * 100%);
  line-height: 1;
  position: absolute;
  top: calc(23.35 / 42.88 * 100%);
  transform: translateY(-50%);
  width: auto;
}

.gift-card-sheet .gift-card__status--inactive {
  color: #e76f51;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 351.13 * 100cqw);
  font-weight: 600;
  line-height: 1;
  margin: calc(7 / 351.13 * 100cqw) 0 0;
}

/* Detail overlay: fullscreen dim over Hallo — no boxed panel (Figma 29:53). */
.gift-card-sheet.stamp-card-sheet {
  z-index: 12050;
}

.gift-card-sheet .stamp-card-sheet__backdrop {
  /* 95% dim — same density as Partner finden lavendel backdrop */
  background: rgba(0, 0, 0, 0.95);
}

/* Fade-in like Bootstrap Partner finden modal — skip when unified overlay chrome. */
.gift-card-sheet.stamp-card-sheet:not([hidden]):not(.celosys-overlay-sheet) {
  animation: gift-card-sheet-fade-in 0.22s ease-out;
}

.gift-card-sheet.stamp-card-sheet:not([hidden]):not(.celosys-overlay-sheet) .stamp-card-sheet__backdrop {
  animation: gift-card-sheet-backdrop-in 0.22s ease-out;
}

.gift-card-sheet.stamp-card-sheet:not([hidden]):not(.celosys-overlay-sheet) .gift-card-sheet__panel {
  animation: gift-card-sheet-panel-in 0.28s ease-out;
}

@keyframes gift-card-sheet-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gift-card-sheet-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gift-card-sheet-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.gift-card-sheet .gift-card-sheet__panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  bottom: 0;
  box-shadow: none;
  container-name: gift-sheet;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 50%;
  max-height: none;
  max-width: 30rem;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
}

.gift-card-sheet .gift-card-sheet__panel > * {
  pointer-events: auto;
}

/* Align purple card top with "Hallo …" text (set from JS; CSS fallback = topbar height). */
.gift-card-sheet {
  /*
   * Figma 42:457 artboard 390 × 844 — full-frame 1:1
   * Karte     42:794 @ y=111.21 h=237.93 w=351.13
   * QR        42:793 @ y=341.90 h=198   w=198.5
   * CTA             @ y≈531.5 (top 189.61 within QR frame)
   * TX head   42:795 @ y=555.57
   * TX row    42:797 @ y=594.20 h=66.25 w=350.94
   */
  --fg: 390;
  --gift-sheet-card-w: var(--celosys-bar-w);
  --gift-sheet-tx-w: var(--celosys-bar-w);
  --gift-sheet-tx-h: calc(66.25 / 390 * 100cqw);
}

.gift-card-sheet__fixed {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: var(--gift-sheet-align-top, calc(env(safe-area-inset-top, 0px) + 3.45rem)) 0 0;
}

.gift-card-sheet__close {
  background: transparent;
  border: 0;
  color: #fff;
  display: inline-flex;
  /* Figma 42:794 close ~20 @ left 317.1, center-Y 25.71 → top 15.71 */
  align-items: center;
  aspect-ratio: 1;
  height: auto;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: calc((350 - 317.1 - 20) / 350 * 100%);
  top: calc(15.18 / 218.61 * 100%);
  width: calc(20 / 350 * 100%);
  z-index: 5;
}

.gift-card-sheet__close-icon {
  font-size: calc(16 * var(--gift-u, 1px));
  line-height: 1;
}

.gift-card-sheet__close img {
  display: none;
}

/* Only the list under "Transaktionen" scrolls. */
.gift-card-sheet__scroll {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gift-card-sheet__scroll::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* Frame 16: divider + Transaktionen title (9px #b5b5b5) */
.gift-card-sheet__tx-head {
  box-sizing: border-box;
  margin: 0 auto calc((594.2 - 555.57 - 22.63) / 390 * 100cqw);
  width: var(--gift-sheet-tx-w);
}

.gift-card-sheet__tx-divider {
  line-height: 0;
  margin: 0 0 calc(12.63 / 390 * 100cqw);
  width: 100%;
}

.gift-card-sheet__tx-divider img {
  display: block;
  height: 1px;
  object-fit: fill;
  opacity: 0.85;
  width: 100%;
}

.gift-card-sheet .gift-card__transactions-title {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

/* ——— Karte — same size + spacing as Bonus / Stempel / Aktionen overlay heroes ——— */
.gift-card-sheet__hero {
  aspect-ratio: 350 / 218.61;
  box-sizing: border-box;
  container-name: scheda-qr;
  container-type: inline-size;
  margin: 0 auto calc(37.63 / 390 * 100cqw);
  overflow: hidden;
  position: relative;
  width: var(--gift-sheet-card-w);
}

.gift-card-sheet__hero-bg {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: fill;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

/* Sheet hero logo — same Stempelkarte disc model */
.gift-card-sheet__hero .gift-card-sheet__logo-wrap {
  --stamp-logo-ring-inset: var(--celosys-shop-logo-ring-inset);
  --stamp-logo-gap: var(--celosys-shop-logo-gap);
  display: block;
  height: var(--celosys-shop-logo-size);
  left: calc(1.5 / 350 * 100%);
  position: absolute;
  top: calc(17.79 / 218.61 * 100%);
  width: var(--celosys-shop-logo-size);
  z-index: 2;
}

.gift-card-sheet__hero .gift-card-sheet__logo-ring {
  background: transparent;
  border: 1.5px solid rgba(105, 93, 165, 0.9);
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: auto;
  inset: calc(var(--stamp-logo-ring-inset) * 100%);
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 0;
}

.gift-card-sheet__hero .gift-card__logo {
  border-radius: 50%;
  display: block;
  height: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  left: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  width: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  z-index: 1;
}

/* Head — same left/top contract as Bonus overlay hero */
.gift-card-sheet__hero-head {
  left: calc(95 / 350 * 100%);
  position: absolute;
  right: calc(40 / 350 * 100%);
  top: calc(16.09 / 218.61 * 100%);
  z-index: 2;
}

.gift-card-sheet__hero .gift-card-sheet__title {
  line-height: 1;
  margin: 0;
}

.gift-card-sheet__hero .gift-card__shop-label {
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  left: auto;
  position: static;
  right: auto;
  text-shadow: none;
  top: auto;
}

.gift-card-sheet__hero .gift-card__shop-name {
  color: #f8f8f8;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 / 390 * 100cqw);
  font-weight: 700;
  letter-spacing: -0.002em;
  line-height: 1;
  margin-top: calc(4.68 / 390 * 100cqw);
}

.gift-card-sheet__hero .gift-card-sheet__address {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 700;
  line-height: 1;
  margin: calc(10.3 / 390 * 100cqw) 0 0;
}

/* Foot — scaled into 350×218.61 hero like Stempel/Bonus */
.gift-card-sheet__hero-foot {
  left: calc(10 / 350 * 100%);
  position: absolute;
  right: calc(160 / 350 * 100%);
  top: calc(135 / 218.61 * 100%);
  z-index: 2;
}

.gift-card-sheet__hero .gift-card__balance-label,
.gift-card-sheet__hero .gift-card__expires {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  letter-spacing: 0.09em;
  left: auto;
  line-height: 1;
  margin: 0;
  padding-left: calc(2 / 390 * 100cqw);
  position: static;
  right: auto;
  text-shadow: none;
  text-transform: uppercase;
  top: auto;
}

.gift-card-sheet__hero .gift-card__expires {
  margin-top: calc(7 / 390 * 100cqw);
}

.gift-card-sheet__hero .gift-card-sheet__balance {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 / 390 * 100cqw);
  font-weight: 700;
  letter-spacing: -0.004em;
  left: auto;
  line-height: 1;
  margin: calc(5.5 / 390 * 100cqw) 0 0;
  position: static;
  right: auto;
  text-shadow: none;
  top: auto;
  -webkit-font-smoothing: antialiased;
}

.gift-card-sheet__hero .gift-card__meta,
.gift-card-sheet__hero .gift-card__status {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 700;
  left: auto;
  line-height: 1;
  margin: calc(7 / 390 * 100cqw) 0 0;
  position: static;
  right: auto;
  text-shadow: none;
  top: auto;
}
/* QR Frame 17: 198.5×198 @ y=341.9 — CTA nested @ top 189.61 (overlaps QR) — Frame 16 @ 555.57 */
.gift-card-sheet__qr {
  aspect-ratio: 198.5 / 198;
  /* QR frame bottom 539.9 → divider 555.57 = 15.67 */
  margin: 0 auto calc(15.67 / 390 * 100cqw);
  max-width: none;
  padding: 0;
  position: relative;
  width: calc(198.5 / 390 * 100cqw);
}

.gift-card-sheet__qr-image {
  aspect-ratio: 1;
  background: transparent;
  display: block;
  height: auto;
  image-rendering: pixelated;
  left: calc(0.2 / 198.5 * 100%);
  position: absolute;
  top: calc(0.1 / 198 * 100%);
  width: calc(198 / 198.5 * 100%);
}

.gift-card-sheet__cta-label {
  color: #695da5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw + 2pt);
  font-weight: 600;
  left: 0;
  line-height: 1;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: calc(189.61 / 198 * 100%);
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
}

.gift-card-sheet__transactions {
  margin-top: 0;
  padding: 0 0 calc(20 / 390 * 100cqw);
}

.gift-card-sheet .gift-card__transactions-status {
  color: #b5b5b5;
  font-size: calc(9 / 390 * 100cqw);
  margin: 0 auto;
  width: var(--gift-sheet-tx-w);
}

/* Frame 15/14: 350.94 × 66.25 — gap via --celosys-d-gap */
.gift-card-sheet .gift-card__transactions-list {
  display: grid;
  gap: calc(var(--celosys-d-gap) / 390 * 100cqw);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: var(--gift-sheet-tx-w);
}

.gift-card-sheet .gift-card-transaction {
  aspect-ratio: 350.94 / 66.25;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-gutscheine-plate-rx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-ry) * var(--gift-u, var(--celosys-u)))
      at calc(var(--celosys-gutscheine-plate-cx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-cy) * var(--gift-u, var(--celosys-u))),
    var(--celosys-gutscheine-plate-a) var(--celosys-gutscheine-plate-stop-a),
    var(--celosys-gutscheine-plate-b) var(--celosys-gutscheine-plate-stop-b),
    var(--celosys-gutscheine-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--gift-u, var(--celosys-u)));
  box-shadow: none;
  /* No container-type:size — collapses cqw/cqh to 0 and hides text+icons. */
  isolation: isolate;
  margin: 0;
  max-width: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.gift-card-sheet .gift-card-transaction::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-gutscheine-stroke-rgb), 1) 0%,
    rgba(var(--celosys-gutscheine-stroke-rgb), 0) var(--celosys-gutscheine-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-gutscheine-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-gutscheine-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* Figma 42:797 absolute center-Y layout (row 350.94 × 66.25). */
.gift-card-sheet .gift-card-transaction__body {
  box-sizing: border-box;
  color: #bcbcbc;
  display: block;
  height: 100%;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.gift-card-sheet .gift-card-transaction__sign {
  color: #2eb7a5;
  display: block;
  font-size: calc(20 * var(--gift-u, var(--celosys-u)));
  height: auto;
  left: calc(10 / 350.94 * 100%);
  line-height: 1;
  margin: 0;
  position: absolute;
  top: calc(31.93 / 66.25 * 100%);
  transform: translateY(-50%);
  width: calc(20 / 350.94 * 100%);
}

.gift-card-sheet .gift-card-transaction__sign--minus {
  color: #e76f51;
}

.gift-card-sheet .gift-card-transaction__content {
  display: block;
  height: 100%;
  left: calc(45 / 350.94 * 100%);
  position: absolute;
  right: calc(12 / 350.94 * 100%);
  top: 0;
}

.gift-card-sheet .gift-card-transaction__main {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(8 / 350.94 * 100%);
  justify-content: space-between;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(15.77 / 66.25 * 100%);
  transform: translateY(-50%);
  width: auto;
}

.gift-card-sheet .gift-card-transaction__amount {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}

.gift-card-sheet .gift-card-transaction__amount--credit {
  color: #43beae;
}

.gift-card-sheet .gift-card-transaction__amount--debit {
  color: #e97d62;
}

.gift-card-sheet .gift-card-transaction__balance {
  color: #bcbcbc;
  flex-shrink: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 0 auto;
}

.gift-card-sheet .gift-card-transaction__meta {
  color: #bcbcbc;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  left: 0;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(33.77 / 66.25 * 100%);
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-card-sheet .gift-card-transaction__date {
  color: #bcbcbc;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  left: 0;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(47.77 / 66.25 * 100%);
  transform: translateY(-50%);
}

/* Stamp history rows must win over Gutscheine TX lavendel tokens */
.stamp-card-detail-sheet.gift-card-sheet .stamp-card-detail-sheet__history-item.gift-card-transaction {
  aspect-ratio: 350.94 / 42;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--celosys-u))
      calc(var(--celosys-partner-plate-ry) * var(--celosys-u))
      at calc(var(--celosys-partner-plate-cx) * var(--celosys-u))
      calc(var(--celosys-partner-plate-cy) * var(--celosys-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--celosys-u));
}

.stamp-card-detail-sheet.gift-card-sheet .stamp-card-detail-sheet__history-item.gift-card-transaction::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-partner-stroke-rgb), 1) 0%,
    rgba(var(--celosys-partner-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  padding: var(--celosys-partner-stroke-w);
}

.gift-card:not(.gift-card--row)::before {
  display: none;
}

.portal-highlights--giftcards {
  gap: calc(var(--celosys-d-gap) * var(--gift-u, var(--celosys-u)));
}
.stamp-card-qr__button,
.stamp-card-qr__frame {
  background: transparent;
  border: 0;
  line-height: 0;
  padding: 0;
}

.stamp-card-qr__button {
  cursor: pointer;
}

.appointment-card__qr-btn {
  background: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  padding: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.appointment-card__qr-btn:hover,
.appointment-card__qr-btn:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  transform: scale(1.02);
}

.appointments-hub__new-card {
  min-height: 100%;
}

.appointment-card::before {
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

.appointment-card--compact {
  padding: 0.85rem 1rem;
}

.appointment-card--compact::before {
  display: none;
}

.appointment-card__row {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
}

.appointment-card__info {
  flex: 1;
  min-width: 0;
}

.appointment-card__company-row {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin: 0 0 0.15rem;
  min-width: 0;
}

.appointment-card__company-logo {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  height: 36px;
  object-fit: contain;
  width: 36px;
}

.appointment-card__company {
  color: var(--celosys-text);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.appointment-card__service {
  color: var(--celosys-text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.45rem;
}

.appointment-card__detail {
  margin: 0 0 0.35rem;
}

.appointment-card__detail-label {
  color: var(--stamp-muted);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
}

.appointment-card__detail-value {
  color: var(--celosys-text);
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.appointment-card__qr-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  min-width: 9.5rem;
  text-align: center;
}

.appointment-card__qr-hint {
  color: var(--stamp-muted);
  font-size: 0.68rem;
  line-height: 1.15;
  margin: 0 0 0.35rem;
  white-space: nowrap;
}

.appointment-card__qr {
  display: block;
  height: 148px;
  width: 148px;
}

.portal-highlights--appointments {
  gap: calc(var(--celosys-d-gap) * var(--mt-u, var(--celosys-u)));
}

.appointment-card__label {
  margin: 0 0 0.25rem;
  color: var(--stamp-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.appointment-card__date {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
}

.appointment-card__meta {
  margin: 0 0 0.75rem;
  color: var(--stamp-muted);
  font-size: 0.9rem;
}

.appointment-card__badge--pending {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.appointment-form__back {
  margin: 0 0 0.75rem;
}

.appointment-form__back-link {
  color: var(--stamp-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.appointment-form__back-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.appointment-form__reward {
  background: rgba(142, 90, 213, 0.12);
  border: 1px solid rgba(142, 90, 213, 0.35);
  border-radius: var(--celosys-radius);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.appointment-form__reward-label {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
}

.appointment-form__reward-value {
  color: var(--celosys-purple-light);
  font-size: 1.05rem;
}

.appointment-wizard-page .portal-page__title {
  display: none;
}

.appointment-wizard {
  margin: 0 auto;
  max-width: 640px;
}

.appointment-wizard__stepper {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.appointment-wizard__step {
  align-items: center;
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 999px;
  color: var(--celosys-text-muted);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.appointment-wizard__step--active,
.appointment-wizard__step--done {
  background: var(--celosys-purple);
  border-color: var(--celosys-purple);
  color: #ffffff;
}

.appointment-wizard__step-btn {
  cursor: pointer;
  padding: 0;
}

.appointment-wizard__step-btn:hover,
.appointment-wizard__step-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(142, 90, 213, 0.45);
  outline: none;
}

.appointment-wizard-card__asset-icon {
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
  height: 100%;
  object-fit: fill; /* logo fills circular box, same as portal chrome cards */
  object-position: center;
  width: 100%;
}

.appointment-wizard__step-line {
  background: var(--celosys-border);
  flex: 1;
  height: 2px;
  max-width: 36px;
}

.appointment-wizard__step-line--done {
  background: var(--celosys-purple);
}

.appointment-wizard__header {
  margin-bottom: 1.25rem;
}

.appointment-wizard__title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.appointment-wizard__subtitle {
  color: var(--celosys-text-muted);
  margin: 0;
}

.appointment-wizard__cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 14rem;
}

.appointment-wizard-card {
  align-items: center;
  background-color: var(--celosys-surface);
  border: 1.5px solid var(--celosys-border);
  border-radius: 14px;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 0.85rem;
  margin: 0;
  min-height: 4.75rem;
  padding: 1rem 1.1rem;
  box-shadow: none;
  transform: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.appointment-wizard-card.appointment-wizard-card--themed {
  background-color: transparent;
  background-image: linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)), var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* fill box exactly, like Deine Termine cards */
  /* No border at all: transparent borders still show the page behind as a frame. */
  border: none;
  box-shadow: none;
  overflow: hidden;
}

button.appointment-wizard-card--button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
}

button.appointment-wizard-card--button.appointment-wizard-card--themed {
  border: none;
  box-shadow: none;
}

button.appointment-wizard-card--button:focus-visible {
  outline: none;
}

.appointment-wizard-card:hover {
  border-color: rgba(142, 90, 213, 0.55);
}

.appointment-wizard-card.appointment-wizard-card--themed:hover,
.appointment-wizard-card.appointment-wizard-card--themed.appointment-wizard-card--selected {
  border: none;
  box-shadow: none;
}

.appointment-wizard-card--selected {
  background-color: rgba(142, 90, 213, 0.12);
  border-color: var(--celosys-purple);
}

.appointment-wizard-card.appointment-wizard-card--themed.appointment-wizard-card--selected {
  background-image: linear-gradient(rgba(142, 90, 213, 0.28), rgba(8, 8, 12, 0.55)), var(--wizard-card-bg);
  border: none;
}

.appointment-wizard-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.appointment-wizard-card__icon {
  align-items: center;
  background: rgba(142, 90, 213, 0.18);
  border-radius: 999px;
  color: var(--celosys-purple-light);
  display: inline-flex;
  flex-shrink: 0;
  height: 2.75rem;
  justify-content: center;
  overflow: hidden;
  width: 2.75rem;
}

.appointment-wizard-card__icon:has(.appointment-wizard-card__asset-icon) {
  background: transparent;
}

.appointment-wizard-card__icon svg {
  height: 1.35rem;
  width: 1.35rem;
}

.appointment-wizard-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.appointment-wizard-card__title {
  color: var(--celosys-text);
  font-size: 1rem;
}

.appointment-wizard-card__meta,
.appointment-wizard-card__reward {
  color: var(--celosys-text-muted);
  font-size: 0.88rem;
}

.appointment-wizard-card__address {
  color: var(--celosys-text);
  font-size: 0.92rem;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.appointment-wizard-dates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.appointment-wizard-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.appointment-wizard-date-field input[type="datetime-local"] {
  color-scheme: dark;
  min-height: 2.75rem;
}

/* Wizard 5 — outer panel + 3 date fields use selected category background (Figma 64:1417) */
.appointments-page .appointment-wizard-dates {
  background: rgba(18, 16, 24, 0.72);
  border-radius: calc(14 * var(--mt-u));
  box-sizing: border-box;
  gap: calc(12 * var(--mt-u));
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-dates--themed {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
}

.appointments-page .appointment-wizard-date-field {
  gap: calc(6 * var(--mt-u));
}

.appointments-page .appointment-wizard-dates .appointment-wizard__input {
  border-radius: calc(10 * var(--mt-u));
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u) + 4pt);
  min-height: calc(35 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-dates--themed .appointment-wizard__input {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(181, 181, 181, 0.35);
}

.appointments-page .appointment-wizard-dates--themed .appointment-wizard__input:focus {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.4), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: var(--mt-accent);
  box-shadow: none;
  color: #f8f8f8;
}

.appointments-page .appointment-wizard-dates .appointment-wizard__input::placeholder {
  color: #b5b5b5;
  opacity: 1;
}

/* Wizard 6 — same category panel treatment as page 5 (Figma 64:1544) */
.appointments-page .appointment-wizard-details {
  background: rgba(18, 16, 24, 0.72);
  border-radius: calc(14 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--mt-u));
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-details--themed {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
}

.appointments-page .appointment-wizard-details .appointment-wizard__input {
  border-radius: calc(10 * var(--mt-u));
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u) + 2pt);
  min-height: calc(35 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-details .appointment-wizard__input--textarea {
  min-height: calc(72 * var(--mt-u));
  resize: vertical;
}

.appointments-page .appointment-wizard-details--themed .appointment-wizard__input {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(181, 181, 181, 0.35);
}

.appointments-page .appointment-wizard-details--themed .appointment-wizard__input:focus {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.4), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: var(--mt-accent);
  box-shadow: none;
  color: #f8f8f8;
}

.appointments-page .appointment-wizard-details--themed .appointment-wizard__input[readonly],
.appointments-page .appointment-wizard-details--themed .appointment-wizard__input:read-only {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #b5b5b5;
  opacity: 1;
}

.appointments-page .appointment-wizard-details .appointment-wizard__input::placeholder {
  color: #b5b5b5;
  opacity: 1;
}

.appointment-wizard-card__reward {
  color: #fbbf24;
  font-weight: 600;
}

.appointment-wizard-card__chevron {
  align-items: center;
  background: var(--celosys-purple);
  border-radius: 999px;
  color: #000000;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 700;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}

.appointment-wizard__custom-address {
  margin-top: 1rem;
}

.appointment-wizard__custom-address--hidden,
.appointment-wizard__btn--hidden {
  display: none !important;
}

.appointment-wizard__input {
  background: #111111;
  border: 1px solid var(--celosys-border);
  color: var(--celosys-text);
}

.appointment-wizard__input:focus {
  background: #111111;
  border-color: var(--celosys-purple);
  box-shadow: 0 0 0 0.15rem rgba(142, 90, 213, 0.25);
  color: var(--celosys-text);
}

.appointment-wizard__input[readonly],
.appointment-wizard__input:read-only {
  background: #111111;
  background-color: #111111;
  color: var(--celosys-text);
  cursor: default;
  opacity: 1;
}

.appointment-wizard-calendar {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 14px;
  padding: 1rem;
}

.appointment-wizard-calendar__toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.appointment-wizard-calendar__nav {
  background: transparent;
  border: 1px solid var(--celosys-border);
  border-radius: 8px;
  color: var(--celosys-text);
  height: 34px;
  width: 34px;
}

.appointment-wizard-calendar__month {
  font-size: 1rem;
  text-transform: capitalize;
}

.appointment-wizard-calendar__weekdays,
.appointment-wizard-calendar__grid {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.appointment-wizard-calendar__weekdays {
  color: var(--celosys-text-muted);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  text-align: center;
}

.appointment-wizard-calendar__day {
  aspect-ratio: 1;
  background: #111111;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--celosys-text);
  cursor: pointer;
  font-size: 0.9rem;
  min-height: 42px;
  padding: 0;
}

.appointment-wizard-calendar__day:not(:disabled):hover {
  border-color: rgba(142, 90, 213, 0.55);
}

.appointment-wizard-calendar__hint {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
  margin: 0.85rem 0 0;
}

.appointment-wizard-calendar__add {
  margin-top: 0.85rem;
  width: 100%;
}

.appointment-wizard-calendar__feedback {
  font-size: 0.88rem;
  margin: 0.65rem 0 0;
}

.appointment-wizard-calendar__day--empty {
  background: transparent;
}

.appointment-wizard-calendar__day--disabled {
  opacity: 0.35;
}

.appointment-wizard-calendar__day--selected,
.appointment-wizard-calendar__day--booked {
  background: rgba(142, 90, 213, 0.18);
  border-color: var(--celosys-purple);
}

.appointment-wizard-calendar__time {
  margin-top: 1rem;
}

.appointment-wizard-calendar__slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.appointment-wizard-calendar__slot {
  align-items: center;
  background: rgba(142, 90, 213, 0.1);
  border: 1px solid rgba(142, 90, 213, 0.35);
  border-radius: 10px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
}

.appointment-wizard-calendar__remove {
  background: transparent;
  border: 0;
  color: #f87171;
  font-size: 0.85rem;
}

.appointment-wizard-summary {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.appointment-wizard-summary--themed {
  background-image: linear-gradient(rgba(8, 8, 12, 0.55), rgba(8, 8, 12, 0.68)), var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 14px;
  padding: 0.85rem;
}

.appointment-wizard-summary--themed .appointment-wizard-summary__row {
  background: rgba(8, 8, 12, 0.42);
  border-color: rgba(248, 248, 248, 0.12);
}

.appointment-wizard-summary__row {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 12px;
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
}

.appointment-wizard-summary__row dt {
  color: var(--celosys-text-muted);
  font-size: 0.82rem;
  margin: 0;
}

.appointment-wizard-summary__row dd {
  margin: 0;
}

.appointment-wizard-summary__reward {
  color: #fbbf24;
  font-weight: 700;
}

/* Wizard 7 — Figma 64:1703: outer panel + per-row category boxes (like pages 5/6) */
.appointments-page .appointment-wizard-summary {
  background: rgba(18, 16, 24, 0.72);
  border-radius: calc(14 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--mt-u));
  margin: 0;
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-summary--themed {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-summary__row {
  background: rgba(18, 16, 24, 0.55);
  border: 1px solid rgba(181, 181, 181, 0.25);
  border-radius: calc(10 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--mt-u));
  justify-content: center;
  min-height: calc(43.5 * var(--mt-u));
  padding: calc(8 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-summary--themed .appointment-wizard-summary__row {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(181, 181, 181, 0.35);
}

.appointments-page .appointment-wizard-summary__row dt {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--mt-u));
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.appointments-page .appointment-wizard-summary__row dd {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 400;
  line-height: calc(14 * var(--mt-u));
  margin: 0;
}

.appointments-page .appointment-wizard-summary__reward {
  align-items: center;
  color: var(--mt-accent);
  display: inline-flex;
  font-weight: 700;
  gap: calc(4 * var(--mt-u));
  line-height: 1;
}

.appointments-page .appointment-wizard-summary__reward-gift {
  color: var(--mt-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(12 * var(--mt-u));
  line-height: 1;
}

.appointments-page .appointment-wizard-summary__reward-value {
  color: var(--mt-accent);
  font-size: calc(10 * var(--mt-u));
  font-weight: 700;
  line-height: 1;
}

.appointment-wizard__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.appointment-wizard__btn {
  border-radius: 999px;
  font-weight: 600;
  min-width: 120px;
  padding: 0.7rem 1.25rem;
}

.appointment-wizard__btn--primary {
  background: var(--celosys-purple);
  border: 1px solid var(--celosys-purple);
  color: #ffffff;
}

.appointment-wizard__btn--primary:hover,
.appointment-wizard__btn--primary:focus {
  background: var(--celosys-purple-hover);
  border-color: var(--celosys-purple-hover);
  color: #ffffff;
}

/* Figma 64:917 — [ zurück ] text control, not a pill */
.appointment-wizard__btn--secondary {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #f8f8f8;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  font-weight: 400;
  gap: 0.35em;
  line-height: 1;
  min-width: 0;
  padding: calc(6 * var(--mt-u)) 0;
}

.appointment-wizard__btn--secondary::before,
.appointment-wizard__btn--secondary::after {
  color: var(--mt-accent, #f5a623);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 350;
}

.appointment-wizard__btn--secondary::before {
  content: "[";
}

.appointment-wizard__btn--secondary::after {
  content: "]";
}

.appointment-wizard__btn--secondary:hover,
.appointment-wizard__btn--secondary:focus {
  background: transparent;
  border: 0;
  color: #f8f8f8;
  text-decoration: none;
}

.appointments-page .appointment-wizard__btn--secondary {
  color: #f8f8f8;
}

@media (min-width: 768px) {
  .appointment-wizard {
    max-width: 720px;
  }

  .appointment-wizard__title {
    font-size: 2rem;
  }

  .appointment-wizard-summary__row {
    grid-template-columns: 180px 1fr;
  }

  .appointments-page .appointment-wizard-summary__row {
    display: flex;
    grid-template-columns: none;
  }
}

.appointment-wizard--success {
  padding-top: 1rem;
}

.appointment-wizard-success {
  background: var(--celosys-surface);
  border: 1px solid rgba(142, 90, 213, 0.35);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.appointment-wizard-success__icon {
  align-items: center;
  background: var(--celosys-purple);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 2rem;
  font-weight: 700;
  height: 72px;
  justify-content: center;
  margin-bottom: 1rem;
  width: 72px;
}

.appointment-wizard__actions--center {
  justify-content: center;
  flex-wrap: wrap;
}

/* Wizard 8 / success — Figma 64:1924 */
.appointment-success-page {
  --mt-accent: #f5a623;
  --mt-u: var(--celosys-u);
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--celosys-home-hero-offset, 10rem) - 5rem);
}

.appointment-success-page .appointment-wizard-success {
  align-items: center;
  background: rgba(18, 16, 24, 0.72);
  border: 1px solid rgba(248, 248, 248, 0.12);
  border-radius: calc(22 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  margin: calc(24 * var(--mt-u)) auto calc(20 * var(--mt-u));
  max-width: calc(100% - 40px);
  min-height: calc(420 * var(--mt-u));
  padding: calc(36 * var(--mt-u)) calc(22 * var(--mt-u)) calc(32 * var(--mt-u));
  text-align: center;
  width: var(--celosys-bar-w);
}

.appointment-success-page .appointment-wizard-success__icon {
  align-items: center;
  background: linear-gradient(180deg, #ffd56a 0%, #f5a623 55%, #d48c12 100%);
  border-radius: 50%;
  box-shadow: 0 calc(4 * var(--mt-u)) calc(14 * var(--mt-u)) rgba(0, 0, 0, 0.35);
  color: #f8f8f8;
  display: inline-flex;
  flex: 0 0 auto;
  height: calc(60 * var(--mt-u));
  justify-content: center;
  margin: 0 0 calc(22 * var(--mt-u));
  width: calc(60 * var(--mt-u));
}

.appointment-success-page .appointment-wizard-success__check-svg {
  color: #f8f8f8;
  display: block;
  height: calc(30 * var(--mt-u));
  width: calc(30 * var(--mt-u));
}

.appointment-success-page .appointment-wizard-success__eyebrow {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--mt-u));
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 calc(10 * var(--mt-u));
  text-transform: uppercase;
}

.appointment-success-page .appointment-wizard-success__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--mt-u));
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 calc(12 * var(--mt-u));
}

.appointment-success-page .appointment-wizard-success__body {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  line-height: calc(14 * var(--mt-u));
  margin: 0 0 calc(28 * var(--mt-u));
  max-width: calc(300 * var(--mt-u));
}

.appointment-success-page .appointment-wizard-success__btn {
  align-items: center;
  background: var(--mt-accent);
  border: 0;
  border-radius: 999px;
  color: #000000;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(16 * var(--mt-u));
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.007px;
  line-height: 1;
  min-height: calc(37 * var(--mt-u));
  min-width: calc(152 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(22 * var(--mt-u));
  text-decoration: none;
}

.appointment-success-page .appointment-wizard-success__btn:hover,
.appointment-success-page .appointment-wizard-success__btn:focus {
  background: #f7b84a;
  color: #000000;
}

.celosys-header__actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.celosys-logout-btn {
  border: 1px solid var(--celosys-border);
  border-radius: var(--celosys-radius);
  color: var(--celosys-text);
  font-size: 0.875rem;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.celosys-logout-btn:hover {
  border-color: var(--celosys-purple);
  color: var(--celosys-purple-light);
}

.celosys-auth-page {
  min-height: 100vh;
}

.celosys-auth-shell {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 520px;
  min-height: 100vh;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1rem 2rem;
  position: relative;
  z-index: 1;
}

.celosys-auth-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.celosys-auth-brand {
  text-decoration: none;
}

.celosys-auth-main {
  flex: 1;
}

.celosys-auth-footer {
  color: var(--celosys-text-muted);
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.celosys-auth-footer a {
  color: var(--celosys-purple-light);
}

.celosys-auth-card {
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
}

.celosys-auth-card--wide {
  max-width: 100%;
}

.celosys-auth-card__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.celosys-auth-card__subtitle {
  color: var(--celosys-text-muted);
  margin-bottom: 1.5rem;
}

.celosys-auth-card__footer {
  color: var(--celosys-text-muted);
  margin-bottom: 0;
  margin-top: 1.25rem;
  text-align: center;
}

.celosys-auth-card__footer a {
  color: var(--celosys-purple-light);
}

.celosys-label {
  color: var(--celosys-text-muted);
}

.celosys-input {
  background: #111111;
  border: 1px solid var(--celosys-border);
  color: var(--celosys-text);
}

.celosys-input:focus {
  background: #111111;
  border-color: var(--celosys-purple);
  box-shadow: 0 0 0 0.2rem rgba(142, 90, 213, 0.2);
  color: var(--celosys-text);
}

.celosys-input--code {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
}

.celosys-btn--primary {
  background: var(--celosys-purple);
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 0.7rem 1rem;
}

.celosys-btn--primary:hover,
.celosys-btn--primary:focus {
  background: var(--celosys-purple-hover);
  color: #ffffff;
}

.celosys-check {
  background-color: #111111;
  border-color: var(--celosys-border);
}

.celosys-check:checked {
  background-color: var(--celosys-purple);
  border-color: var(--celosys-purple);
}

.celosys-check-label a {
  color: var(--celosys-purple-light);
}

.celosys-alert {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #ffb4b4;
}

.celosys-auth-loading {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 2000;
}

.celosys-auth-loading__panel {
  align-items: center;
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 20rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.celosys-auth-loading__spinner {
  animation: celosys-auth-spin 0.8s linear infinite;
  border: 3px solid rgba(142, 90, 213, 0.25);
  border-radius: 50%;
  border-top-color: var(--celosys-purple);
  height: 2.5rem;
  width: 2.5rem;
}

.celosys-auth-loading__text {
  color: var(--celosys-text);
  margin: 0;
}

@keyframes celosys-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.portal-legal__updated {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
}

.celosys-app--with-bottom-nav .celosys-main {
  /* Clearance matches Home bottom nav (half safe-area, not full — full looks “sospesa”). */
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px) * 0.5);
}

/* Short pages without Home-hero: fill under layout header. */
body.celosys-app--with-bottom-nav:not(.celosys-app--home-v2):not(.celosys-app--app-hero) .celosys-main > main {
  box-sizing: border-box;
  min-height: calc(100dvh - var(--celosys-header-offset, 3.2rem));
}

/* Home + partner hub pages (hero, spacer 0): same fill — do not touch .celosys-bottom-nav. */
body.celosys-app--home-v2.celosys-app--with-bottom-nav .celosys-main > main,
body.celosys-app--app-hero.celosys-app--with-bottom-nav .celosys-main > main {
  box-sizing: border-box;
  min-height: 100dvh;
}

/* Keep footer in DOM for iOS fixed-bottom — never reserve a black clearance band.
   Clearance for the nav is only .celosys-main padding-bottom. */
.celosys-app--with-bottom-nav .celosys-footer {
  border: none;
  color: transparent;
  font-size: 0;
  height: 0 !important;
  line-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.celosys-bottom-nav {
  /* Figma panel E frame ~85u: 20u FAB above + 65u plate */
  align-items: flex-end;
  /* Plate fill on the nav itself so it rides the same transform as the icons. */
  background: linear-gradient(#000, #000) no-repeat bottom / 100% calc(65 * var(--celosys-u));
  border-top: 0;
  bottom: 0;
  display: flex;
  left: 0;
  margin: 0;
  min-height: calc(85 * var(--celosys-u) + max(0.35rem, calc(env(safe-area-inset-bottom, 0px) * 0.5)));
  overflow: visible;
  padding-bottom: max(0.35rem, calc(env(safe-area-inset-bottom, 0px) * 0.5));
  padding-top: 0;
  position: fixed;
  right: 0;
  top: auto;
  view-transition-name: none;
  z-index: 1040;
}

/* Measure marker only (same 65u box) — paint lives on .celosys-bottom-nav background. */
.celosys-bottom-nav__bg {
  background: transparent;
  bottom: 0;
  height: calc(65 * var(--celosys-u));
  left: 0;
  max-height: calc(65 * var(--celosys-u));
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: auto;
  width: 100%;
  z-index: 0;
}

.celosys-bottom-nav > :not(.celosys-bottom-nav__bg) {
  position: relative;
  z-index: 1;
}

/* Soft keyboard: do NOT translate the bottom nav — transform here
   fights iOS native scroll-into-view (rise then fall / overshoot). */
body.celosys-keyboard-open .celosys-bottom-nav {
  pointer-events: none;
}

.celosys-bottom-nav__item {
  align-items: center;
  color: var(--celosys-text-muted);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: flex-end;
  min-height: 3.75rem;
  padding: 0.45rem 0.5rem 0.55rem;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;
}

.celosys-bottom-nav__item:hover,
.celosys-bottom-nav__item:focus {
  color: var(--celosys-text);
}

.celosys-bottom-nav__item--active {
  color: var(--celosys-text);
}

.celosys-bottom-nav__item--active::before {
  background: var(--celosys-purple);
  content: "";
  height: 2px;
  left: 18%;
  position: absolute;
  right: 18%;
  top: 0;
}

.celosys-bottom-nav__icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.4rem;
  justify-content: center;
  line-height: 0;
  position: relative;
  width: 1.4rem;
}

.celosys-bottom-nav__glyph {
  color: inherit;
  display: block;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}

.celosys-bottom-nav__icon img {
  display: block;
  height: 1.4rem;
  object-fit: contain;
  width: 1.4rem;
}

.celosys-bottom-nav__icon svg {
  height: 100%;
  width: 100%;
}

.celosys-bottom-nav__label,
.celosys-bottom-nav__fab-label {
  color: inherit;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  max-width: 5.5rem;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.celosys-bottom-nav__item--active .celosys-bottom-nav__label,
.celosys-bottom-nav__fab--active .celosys-bottom-nav__fab-label {
  color: var(--celosys-text);
  font-weight: 500;
}

.celosys-bottom-nav__fab {
  align-items: center;
  color: var(--celosys-text-muted);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: flex-end;
  margin: 0 0.35rem;
  min-height: 3.75rem;
  padding: 0.45rem 0.5rem 0.55rem;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.celosys-bottom-nav__fab-icon {
  --celosys-title-circle-a: rgba(176, 53, 139, 0.95);
  --celosys-title-circle-b: rgba(176, 53, 139, 0.4);
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: inline-flex;
  flex-shrink: 0;
  height: calc(var(--celosys-c-icon-h) * var(--celosys-u));
  justify-content: center;
  line-height: 0;
  margin-top: calc(-20 * var(--celosys-u));
  overflow: visible;
  padding: 0;
  position: relative;
  width: calc(var(--celosys-c-icon-w) * var(--celosys-u));
}

.celosys-bottom-nav__fab-circle {
  inset: 0;
}

.celosys-bottom-nav__fab-glyph {
  color: var(--celosys-text);
  font-size: calc(18 * var(--celosys-u));
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.celosys-bottom-nav__fab-icon img {
  display: none;
}

.celosys-bottom-nav__fab-icon svg {
  display: none;
}

.celosys-bottom-nav__fab--active .celosys-bottom-nav__fab-icon {
  box-shadow: none;
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.profile-field__label {
  color: var(--celosys-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.profile-field__value {
  border-bottom: 1px solid var(--celosys-border);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 0.65rem;
}

.profile-field__value-row {
  align-items: center;
  border-bottom: 1px solid var(--celosys-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: space-between;
  padding-bottom: 0.65rem;
}

.profile-field__value-row .profile-field__value {
  border-bottom: 0;
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
}

.profile-field__value-row .celosys-verify-help {
  flex-shrink: 0;
  margin-left: auto;
}

.profile-field__value--verified {
  color: #8fd99a;
}

.profile-field__value--unverified {
  color: rgba(255, 255, 255, 0.55);
}

.profile-field--last {
  margin-bottom: 0.5rem;
}

.celosys-pwa-banner {
  align-items: flex-start;
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: 14px;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  gap: 0.5rem;
  left: 0.75rem;
  padding: 0.85rem 0.75rem 0.85rem 1rem;
  position: fixed;
  right: 0.75rem;
  z-index: 1045;
}

.celosys-app--with-bottom-nav.celosys-app--pwa-banner .celosys-pwa-banner {
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.celosys-pwa-banner:not([hidden]) {
  /* Keep banner above bottom nav without resizing page content. */
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.celosys-app--with-bottom-nav .celosys-pwa-banner:not([hidden]) {
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.celosys-app:not(.celosys-app--with-bottom-nav) .celosys-pwa-banner:not([hidden]) {
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.celosys-app--pwa-banner .celosys-footer {
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

.celosys-app--with-bottom-nav.celosys-app--pwa-banner .celosys-main {
  /* Footer clears bottom nav + banner; keep main tight to avoid empty scroll. */
  padding-bottom: 1rem;
}

.celosys-pwa-banner__content {
  flex: 1;
  min-width: 0;
}

.celosys-pwa-banner__title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.celosys-pwa-banner__text,
.celosys-pwa-banner__hint {
  color: var(--celosys-text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.celosys-pwa-banner__hint {
  margin-top: 0.35rem;
}

.celosys-pwa-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--celosys-text-muted);
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  margin: 0;
  padding: 0.1rem 0.25rem;
}

.celosys-portrait-lock {
  align-items: center;
  background: var(--celosys-bg);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  text-align: center;
  z-index: 2000;
}

.celosys-portrait-lock__content {
  max-width: 18rem;
}

.celosys-portrait-lock__icon {
  color: var(--celosys-purple);
  margin-bottom: 1rem;
}

.celosys-portrait-lock__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.celosys-portrait-lock__text {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  .celosys-portrait-lock {
    display: flex;
  }

  body.celosys-app--portrait-locked {
    overflow: hidden;
  }
}

.celosys-ptr {
  align-items: flex-end;
  display: flex;
  height: 0;
  justify-content: center;
  margin: 0;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 2;
}

.celosys-ptr--visible {
  opacity: 1;
}

.celosys-ptr--refreshing {
  opacity: 1;
}

.celosys-ptr__content {
  align-items: center;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  will-change: transform;
}

.celosys-ptr__ring {
  display: block;
  height: 1.75rem;
  transform: rotate(-90deg);
  width: 1.75rem;
}

.celosys-ptr__ring-track,
.celosys-ptr__ring-progress {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.75;
}

.celosys-ptr__ring-track {
  stroke: rgba(255, 255, 255, 0.18);
}

.celosys-ptr__ring-progress {
  stroke: var(--celosys-purple-light);
  stroke-dasharray: 87.96;
  stroke-dashoffset: 87.96;
}

.celosys-ptr--ready .celosys-ptr__ring-progress {
  stroke: #c4b5fd;
}

.celosys-ptr--refreshing .celosys-ptr__ring {
  animation: celosys-ptr-spin 0.8s linear infinite;
}

.celosys-ptr--refreshing .celosys-ptr__ring-progress {
  stroke-dashoffset: 22;
}

body.celosys-app--pulling {
  overscroll-behavior-y: none;
  touch-action: none;
}

/* PTR under partner/stamp title: ring in the pull gap below chrome. */
body.celosys-app--app-hero [data-ptr-shift] > .celosys-ptr {
  margin-bottom: 0;
  z-index: 6;
}

/* Do not set will-change:transform on main/footer — creates containing block and lifts fixed bottom nav on iOS. */

@keyframes celosys-ptr-spin {
  to {
    transform: rotate(270deg);
  }
}

/* Panel pull-to-refresh prototype (Stempelkarte → Meine) */
.celosys-panel-ptr {
  align-items: flex-end;
  display: flex;
  flex-shrink: 0;
  height: 0;
  justify-content: center;
  margin: 0;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 3;
}

.celosys-panel-ptr--visible {
  opacity: 1;
}

.celosys-panel-ptr--refreshing {
  opacity: 1;
}

.celosys-panel-ptr__content {
  align-items: center;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  will-change: transform;
}

.celosys-panel-ptr--ready .celosys-ptr__ring-progress {
  stroke: #c4b5fd;
}

.celosys-panel-ptr--refreshing .celosys-ptr__ring {
  animation: celosys-ptr-spin 0.8s linear infinite;
}

.celosys-panel-ptr--refreshing .celosys-ptr__ring-progress {
  stroke-dashoffset: 22;
}

.celosys-panel-ptr-shift {
  min-height: 0;
  width: 100%;
  will-change: transform;
}

.stamps-page [data-celosys-panel-ptr].stamps-tabs__panel--ptr-pulling,
[data-celosys-panel-ptr].celosys-panel-ptr--pulling {
  overscroll-behavior-y: none;
  touch-action: none;
}

.credits-package-card__credit {
  color: var(--celosys-purple-light);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0.35rem 0 0.15rem;
}

.credits-package-card__price {
  color: var(--celosys-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.credits-tx-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.credits-tx-list__item {
  align-items: flex-start;
  background: var(--celosys-surface);
  border: 1px solid var(--celosys-border);
  border-radius: calc(var(--celosys-radius) + 4px);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}

.credits-tx-list__type {
  font-weight: 650;
  margin: 0 0 0.2rem;
}

.credits-tx-list__meta {
  color: var(--celosys-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.credits-tx-list__side {
  text-align: right;
  white-space: nowrap;
}

.credits-tx-list__amount {
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.credits-tx-list__amount--plus {
  color: #2f9e6e;
}

.credits-tx-list__amount--minus {
  color: #c45b5b;
}

.credits-tx-list__balance {
  color: var(--celosys-text-muted);
  font-size: 0.82rem;
  margin: 0;
}

.credits-pay-card__badge {
  color: var(--celosys-purple-light);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.credits-pay-card__amount {
  font-size: 1.8rem;
  font-weight: 750;
  margin: 0.5rem 0;
}

.credits-pay-card__note {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

.credits-pay-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.credits-pay-card__cancel {
  background: transparent;
  border: 1px solid var(--celosys-border);
  border-radius: 999px;
  color: var(--celosys-text-muted);
  padding: 0.55rem 1rem;
}

.punkte-balance {
  color: var(--celosys-text-muted);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

/* Success overlay — Credits / Punkte (unified celosys-overlay-sheet chrome) */
.tx-success-overlay.stamp-card-sheet {
  position: fixed;
}

.tx-success-overlay .tx-success-overlay__panel {
  align-items: center;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(110, 230, 180, 0.35) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(20, 80, 55, 0.55) 0%, transparent 60%),
    linear-gradient(165deg, #2eb87a 0%, #1a9a62 42%, #0f6b44 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #f4fff8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(28 * var(--celosys-u)) calc(20 * var(--celosys-u)) calc(24 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.tx-success-overlay--hide {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Main menu — Figma 112:4526 drawer (slide from left, 314u panel, gray surface) */
.celosys-overlay-sheet--drawer-left .stamp-card-sheet__backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.celosys-overlay-sheet--drawer-left.celosys-overlay-sheet--open .stamp-card-sheet__backdrop {
  opacity: 1;
}

.celosys-overlay-sheet--drawer-left .celosys-overlay-sheet__panel.celosys-main-menu__panel {
  --celosys-drawer-w: min(calc(314 * var(--celosys-u)), 88vw);
  background: var(--celosys-surface-elevated);
  border-radius: 0;
  bottom: 0;
  box-shadow: calc(8 * var(--celosys-u)) 0 calc(24 * var(--celosys-u)) rgba(0, 0, 0, 0.35);
  height: 100%;
  justify-content: flex-start;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: var(--celosys-drawer-w);
  padding:
    calc(120 * var(--celosys-u) + env(safe-area-inset-top, 0px))
    calc(22 * var(--celosys-u))
    calc(24 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
  top: 0;
  transform: translateX(-110%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  width: var(--celosys-drawer-w);
}

.celosys-overlay-sheet--drawer-left.celosys-overlay-sheet--open .celosys-overlay-sheet__panel.celosys-main-menu__panel {
  transform: translateX(0);
}

.celosys-overlay-sheet--drawer-left.celosys-overlay-sheet--stack-push.celosys-overlay-sheet--ready:not(.celosys-overlay-sheet--open) .celosys-overlay-sheet__panel.celosys-main-menu__panel,
.celosys-overlay-sheet--drawer-left.celosys-overlay-sheet--under.celosys-overlay-sheet--open .celosys-overlay-sheet__panel.celosys-main-menu__panel {
  filter: none;
  transform: translateX(-110%);
}

.celosys-main-menu__panel {
  display: flex;
  flex-direction: column;
}

.celosys-main-menu__qr {
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 0 calc(28 * var(--celosys-u));
  padding: 0;
}

.celosys-main-menu__qr-icon {
  font-size: calc(28 * var(--celosys-u));
  line-height: 1;
}

.celosys-main-menu__nav {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.celosys-main-menu__row {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(16 * var(--celosys-u));
  font-weight: 400;
  gap: calc(12 * var(--celosys-u));
  justify-content: flex-start;
  line-height: calc(16 * var(--celosys-u));
  padding: calc(18 * var(--celosys-u)) 0;
  position: relative;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.celosys-main-menu__row:not(:last-child)::after {
  background: linear-gradient(
    to right,
    rgba(181, 181, 181, 1) 0%,
    rgba(181, 181, 181, 0) 100%
  );
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.celosys-main-menu__row.is-active .celosys-main-menu__label {
  font-weight: 600;
}

.celosys-main-menu__row:not(.celosys-main-menu__row--disabled):hover,
.celosys-main-menu__row:not(.celosys-main-menu__row--disabled):focus-visible {
  color: #f8f8f8;
  outline: none;
}

.celosys-main-menu__row:not(.celosys-main-menu__row--disabled):focus-visible .celosys-main-menu__label {
  text-decoration: underline;
  text-decoration-color: #b0358b;
}

.celosys-main-menu__row--disabled {
  cursor: default;
  opacity: 0.92;
  pointer-events: none;
}

.celosys-main-menu__label {
  flex: 1 1 auto;
  min-width: 0;
}

.celosys-main-menu__chevron {
  color: #b0358b;
  flex: 0 0 auto;
  font-size: calc(12 * var(--celosys-u));
  line-height: 1;
  position: absolute;
  right: calc(70 * var(--celosys-u));
  top: 50%;
  transform: translateY(-50%);
}

.celosys-main-menu__footer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: calc(24 * var(--celosys-u));
  margin-top: auto;
  width: 100%;
}

.celosys-main-menu__logout {
  align-items: center;
  background: transparent;
  border: 1px solid #b0358b;
  border-radius: 999px;
  color: #b0358b;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--celosys-u));
  font-weight: 600;
  gap: calc(8 * var(--celosys-u));
  justify-content: center;
  line-height: calc(18 * var(--celosys-u));
  margin: 0 auto;
  max-width: 100%;
  min-height: calc(36 * var(--celosys-u));
  padding: calc(8 * var(--celosys-u)) calc(16 * var(--celosys-u));
  text-align: center;
  text-decoration: none;
  width: calc(130 * var(--celosys-u));
}

.celosys-main-menu__logout:hover,
.celosys-main-menu__logout:focus-visible {
  background: transparent;
  color: #c34cae;
  border-color: #c34cae;
  outline: none;
}

.celosys-main-menu__logout-icon {
  color: #b0358b;
  flex: 0 0 auto;
  font-size: calc(16 * var(--celosys-u));
  line-height: 1;
}

.celosys-main-menu__lang {
  flex: 0 0 auto;
  margin-top: 0;
}

.celosys-main-menu__lang.language-switcher {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--celosys-u));
  gap: calc(5 * var(--celosys-u));
  letter-spacing: 0.04em;
}

.celosys-main-menu__lang .language-switcher__link {
  color: #b5b5b5;
  font-size: calc(12 * var(--celosys-u));
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.celosys-main-menu__lang .language-switcher__link--active {
  color: #b0358b;
  text-decoration: none;
}

.celosys-main-menu__lang .language-switcher__link:hover {
  color: #c34cae;
}

.celosys-main-menu__lang .language-switcher__divider {
  color: #b5b5b5;
}

/* Legacy main-menu classes (unused) */
.celosys-main-menu__top {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  margin-bottom: calc(18 * var(--celosys-u));
}

.celosys-main-menu__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--celosys-u));
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.celosys-main-menu__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #b5b5b5;
  display: inline-flex;
  font-size: calc(18 * var(--celosys-u));
  justify-content: center;
  line-height: 1;
  padding: calc(6 * var(--celosys-u));
}

/* Legacy link-list nav (unused drawer uses .celosys-main-menu__row + gap above). */
.celosys-main-menu__panel > .celosys-main-menu__nav:has(.celosys-main-menu__link) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(4 * var(--celosys-u));
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.celosys-main-menu__link {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(16 * var(--celosys-u));
  font-weight: 500;
  line-height: 1.25;
  padding: calc(12 * var(--celosys-u)) 0;
  text-decoration: none;
}

.celosys-main-menu__link.is-active {
  color: #b0358b;
  font-weight: 600;
}

.celosys-main-menu__link:hover,
.celosys-main-menu__link:focus-visible {
  color: #c34cae;
}

.celosys-main-menu__lang {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: calc(24 * var(--celosys-u));
}

/* Identity QR sheet — Stempelkarte card + inverted QR (no shop chrome) */
.identity-qr-sheet.stamp-card-detail-sheet .gift-card-sheet__panel {
  overflow-y: auto;
}

/* Same card height as Stempelkarte / Gutscheine detail hero (350×218.61). */
.identity-qr-sheet__hero {
  aspect-ratio: 350 / 218.61;
  margin-bottom: calc(25.09 / 390 * 100cqw);
}

.identity-qr-sheet__head {
  box-sizing: border-box;
  left: calc(12 / 350 * 100%);
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: calc(12 / 350 * 100%);
  top: calc(16 / 286 * 100%);
  z-index: 2;
}

.identity-qr-sheet__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 / 390 * 100cqw);
  font-weight: 700;
  line-height: calc(14 / 390 * 100cqw);
  margin: 0 0 calc(12 / 390 * 100cqw);
}

.identity-qr-sheet__facts {
  display: flex;
  flex-direction: column;
  gap: calc(8 / 390 * 100cqw);
  margin: 0;
}

.identity-qr-sheet__fact {
  align-items: baseline;
  display: grid;
  gap: calc(8 / 390 * 100cqw);
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
}

.identity-qr-sheet__fact-label {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 / 390 * 100cqw);
  font-weight: 500;
  line-height: calc(9 / 390 * 100cqw);
  margin: 0;
}

.identity-qr-sheet__fact-value {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 / 390 * 100cqw);
  font-weight: 600;
  line-height: calc(11 / 390 * 100cqw);
  margin: 0;
  text-align: left;
}

.identity-qr-sheet__fact-value--verified {
  color: #7dffb2;
}

.identity-qr-sheet__fact-value--unverified {
  color: #ffb347;
}

.identity-qr-sheet__qr {
  margin-bottom: calc(20 / 390 * 100cqw);
}

.identity-qr-sheet__qr-image {
  filter: none;
}

.identity-qr-sheet__empty {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 / 390 * 100cqw);
  margin: 0 auto calc(24 / 390 * 100cqw);
  max-width: var(--gift-sheet-card-w);
  text-align: center;
}

/* Legacy contact QR panel (unused — kept for alias views) */
.celosys-contact-qr__panel {
  display: flex;
  flex-direction: column;
  padding: calc(20 * var(--celosys-u)) calc(20 * var(--celosys-u)) calc(24 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
}

.celosys-contact-qr__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(18 * var(--celosys-u));
}

.celosys-contact-qr__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--celosys-u));
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.celosys-contact-qr__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #b5b5b5;
  display: inline-flex;
  font-size: calc(18 * var(--celosys-u));
  justify-content: center;
  line-height: 1;
  padding: calc(6 * var(--celosys-u));
}

.celosys-contact-qr__body {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.celosys-contact-qr__img {
  background: #fff;
  border-radius: calc(12 * var(--celosys-u));
  display: block;
  height: auto;
  max-width: min(100%, calc(280 * var(--celosys-u)));
  padding: calc(12 * var(--celosys-u));
  width: 100%;
}

.celosys-contact-qr__empty {
  color: #b5b5b5;
  margin: 0;
  text-align: center;
}

.tx-success-overlay__check {
  color: #e8fff2;
  margin: 0 auto 1rem;
  width: 4.5rem;
  height: 4.5rem;
}

.tx-success-overlay__ring {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: tx-success-ring 0.55s ease-out 0.1s forwards;
}

.tx-success-overlay__tick {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tx-success-tick 0.35s ease-out 0.45s forwards;
}

.tx-success-overlay__title {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  margin: 0 0 0.45rem;
}

.tx-success-overlay__message {
  color: rgba(244, 255, 248, 0.88);
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.tx-success-overlay__hint {
  color: rgba(244, 255, 248, 0.9);
  font-size: 0.9rem;
  line-height: 1.35;
  margin: 0 0 0.55rem;
}

.tx-success-overlay__link {
  color: #fff;
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tx-success-overlay__link:hover,
.tx-success-overlay__link:focus-visible {
  color: #e8fff2;
  outline: none;
}

.tx-success-overlay__btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #0f5f3d;
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.4rem;
  min-width: 8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.tx-success-overlay__btn:hover,
.tx-success-overlay__btn:focus-visible {
  background: #f0fff6;
  outline: none;
}

@keyframes tx-success-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tx-success-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tx-success-ring {
  to { stroke-dashoffset: 0; }
}

@keyframes tx-success-tick {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-success-overlay,
  .tx-success-overlay__panel,
  .tx-success-overlay__ring,
  .tx-success-overlay__tick {
    animation: none;
  }

  .tx-success-overlay__ring,
  .tx-success-overlay__tick {
    stroke-dashoffset: 0;
  }
}

/* Angebote catalog */
.angebote-page {
  margin: 0 auto;
  max-width: 1100px;
}

.angebote-page__header {
  margin-bottom: 1.25rem;
}

.angebote-page__title {
  font-size: 1.55rem;
  font-weight: 750;
  margin: 0 0 0.35rem;
}

.angebote-page__intro {
  color: var(--celosys-text-muted);
  margin: 0;
}

.portal-highlights--angebote {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-d-gap) * var(--celosys-u));
}

.angebote-card__prize {
  color: var(--celosys-purple-light);
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0.35rem 0 0.15rem;
}

.angebote-card__description {
  color: var(--celosys-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.25rem 0 0.75rem;
}

.angebote-card__cta {
  background: var(--celosys-purple);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 0.35rem;
  padding: 0.45rem 0.95rem;
  text-decoration: none;
}

.angebote-card__cta:hover,
.angebote-card__cta:focus-visible {
  background: var(--celosys-purple-hover);
  color: #fff;
  outline: none;
}

.angebote-card__image-col {
  flex-shrink: 0;
  min-width: 9.5rem;
}

.angebote-card__image {
  border-radius: 12px;
  display: block;
  height: 148px;
  object-fit: cover;
  width: 148px;
}

/* Aktionen sponsor spot — legacy fullscreen hook removed; see .aktionen-detail-sheet__spot */

/* ——— Home v2 (mockup App_designunterlagen) ——— */
/* Home uses fixed B hero + pinned .home-v2__body panel (same fold as app-hero). */
body.celosys-app--home-v2 {
  background: #000;
  overscroll-behavior-y: none;
}

body.celosys-app--home-v2 .celosys-header--home-hidden .celosys-app-topbar,
body.celosys-app--app-hero .celosys-header--home-hidden .celosys-app-topbar {
  display: none;
}

body.celosys-app--home-v2 .celosys-header--fixed,
body.celosys-app--app-hero .celosys-header--fixed {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

body.celosys-app--home-v2 .celosys-header-spacer--home,
body.celosys-app--app-hero .celosys-header-spacer--home {
  display: none;
  height: 0 !important;
}

/* Home / app-hero pages own the top chrome; layout nav-wrap still opens the menu */

body.celosys-app--home-v2 .celosys-main,
body.celosys-app--app-hero .celosys-main {
  max-width: 30rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
  width: 100%;
}

/* Home: strip Bootstrap .container insets — Figma 390 side margin via --hu only */
body.celosys-app--home-v2 .celosys-main.container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

body.celosys-app--home-v2 .celosys-main > main.pb-4 {
  padding-bottom: 0 !important;
}

body.celosys-app--home-v2,
body.celosys-app--app-hero {
  --hu: calc(100vw / 390);
}

.partner-hub__section {
  margin: 0;
  padding: 0;
}

/* Sticky title+intro under identity hero — cards scroll underneath; HG = .celosys-app-bg only.
 * C→D gap = same token as loyalty chrome last block (--celosys-c-gap-after-partner). */
.partner-hub__chrome {
  background: transparent;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: 0 0 calc(var(--celosys-c-gap-after-partner) * var(--celosys-u));
  position: sticky;
  top: var(--celosys-home-hero-offset, 10rem);
  z-index: 20;
}

.partner-hub__chrome > * {
  position: relative;
  z-index: 1;
}

.partner-hub__heading {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

.partner-hub__heading-row {
  align-items: center;
  display: flex;
  gap: 0.85rem;
}

/* Title badge: Figma 204:528 circle + SF glyph (see .celosys-title-circle). */
.partner-hub__heading-icon {
  align-items: center;
  color: #F8F8F8;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 2.1rem;
  height: 3.35rem;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 3.35rem;
}

.partner-hub__heading-icon-glyph {
  color: #F8F8F8;
  font-size: 1.35rem;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.partner-hub__heading-icon img {
  aspect-ratio: 1;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.partner-hub__title {
  color: var(--celosys-text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

/* Intro under the icon — left edge aligns with partnervorteile_weiss circle start */
.partner-hub__intro {
  color: rgba(248, 248, 248, 0.82);
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.partner-hub__cards {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-d-gap) * var(--celosys-u));
  margin: 0 auto;
  max-width: var(--celosys-card-w);
  padding-top: 0;
  width: var(--celosys-card-w);
}

body.celosys-app--app-hero .partner-hub:not(.stamp-cards-page) .app-hero-chrome-spacer {
  min-height: 0;
}

.partner-hub:not(.stamp-cards-page).partner-hub--booting .partner-hub__cards {
  opacity: 0;
  pointer-events: none;
}

.partner-hub:not(.stamp-cards-page) .partner-hub__cards {
  transition: opacity 0.12s ease;
}

/*
 * Partner hub D boxes — same plate tokens as Home Partner Vorteile.
 */
.partner-hub__card {
  --surface-btn-gap: 14pt;
  --partner-plate-u: var(--hu, var(--celosys-u));
  align-items: center;
  aspect-ratio: 2917 / 694;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--partner-plate-u)) calc(var(--celosys-partner-plate-ry) * var(--partner-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--partner-plate-u)) calc(var(--celosys-partner-plate-cy) * var(--partner-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--partner-plate-u));
  color: #F8F8F8;
  display: grid;
  gap: var(--surface-btn-gap);
  grid-template-columns: auto 1fr auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.4rem var(--surface-btn-gap);
  position: relative;
  text-decoration: none;
  width: 100%;
}

.partner-hub__card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-partner-stroke-rgb), 1) 0%,
    rgba(var(--celosys-partner-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.partner-hub__card:hover,
.partner-hub__card:focus-visible {
  color: #F8F8F8;
  text-decoration: none;
}

.partner-hub__card-icon,
.partner-hub__card-body,
.partner-hub__card-chevron {
  position: relative;
  z-index: 1;
}

.partner-hub__card-icon {
  align-items: center;
  color: #B0358B;
  display: flex;
  flex-shrink: 0;
  font-size: 1.85rem;
  height: 1.85rem;
  justify-content: center;
  line-height: 1;
  max-height: 1.85rem;
  max-width: 1.85rem;
  object-fit: contain;
  object-position: center;
  width: 1.85rem;
}

.partner-hub__card-icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.partner-hub__card-body {
  display: flex;
  flex-direction: column;
  gap: 4pt;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.partner-hub__card-title {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

.partner-hub__card-text,
.partner-hub__card-stat {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 10px;
  margin: 0;
  overflow: hidden;
  white-space: normal;
}

.partner-hub__card-text {
  color: #B5B5B5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.partner-hub__card-stat {
  color: #B0358B;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-hub__card-chevron {
  align-self: center;
  color: #B5B5B5;
  display: block;
  flex-shrink: 0;
  font-size: var(--celosys-card-chevron);
  height: auto;
  justify-self: center;
  line-height: 1;
  opacity: 0.95;
  speak: never;
}

/* Tickets hub — same Partner Vorteile structure; coral plate/stroke tokens */
.partner-hub--tickets {
  --celosys-title-circle-a: rgba(231, 111, 81, 0.95);
  --celosys-title-circle-b: rgba(231, 111, 81, 0.4);
}

.partner-hub--tickets .partner-hub__heading-row {
  width: 100%;
}

.partner-hub--tickets .partner-hub__title {
  flex: 1;
  min-width: 0;
}

.partner-hub__info-btn,
.tickets-hub__info-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: #e76f51;
  display: inline-flex;
  flex-shrink: 0;
  height: 3.35rem;
  justify-content: center;
  line-height: 0;
  margin-left: auto;
  padding: 0;
  width: auto;
}

.tickets-hub__info-icon {
  color: #e76f51;
  font-size: calc(var(--celosys-c-info-icon, 20) * var(--celosys-u));
  line-height: 1;
}

.partner-hub--tickets .partner-hub__card {
  --partner-plate-u: var(--hu, var(--celosys-u));
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--partner-plate-u))
      calc(var(--celosys-tickets-plate-ry) * var(--partner-plate-u))
      at calc(var(--celosys-tickets-plate-cx) * var(--partner-plate-u))
      calc(var(--celosys-tickets-plate-cy) * var(--partner-plate-u)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--partner-plate-u));
}

.partner-hub--tickets .partner-hub__card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  clip-path: inset(0 0 var(--celosys-tickets-stroke-clip-bottom) 0);
  padding: var(--celosys-tickets-stroke-w);
}

.partner-hub--tickets .partner-hub__card-icon,
.partner-hub--tickets .partner-hub__card-stat {
  color: #e76f51;
}

@supports (-webkit-touch-callout: none) {
  /* reserved */
}

body.celosys-app--app-hero .stamp-cards-page__chrome,
body.celosys-app--app-hero .partner-hub__chrome {
  box-sizing: border-box;
  left: 0;
  margin: 0 auto;
  max-width: 30rem;
  padding-left: var(--celosys-card-side);
  padding-right: var(--celosys-card-side);
  position: fixed;
  right: 0;
  top: calc(var(--celosys-home-hero-offset, 10rem) - 4px);
  touch-action: manipulation;
  width: 100%;
  z-index: 25;
}

body.celosys-app--app-hero .stamp-cards-page__chrome,
body.celosys-app--app-hero .partner-hub__chrome {
  background: transparent;
}

body.celosys-app--app-hero .app-hero-chrome-spacer {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
  width: 100%;
}

body.celosys-app--home-v2 .app-hero-chrome-spacer {
  display: none;
}

body.modal-open .celosys-bottom-nav {
  pointer-events: none;
  visibility: hidden;
}

@font-face {
  font-family: "Celosys SF Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/celosys-sf-icons.woff2?v=421") format("woff2"),
       url("/fonts/celosys-sf-icons.ttf?v=421") format("truetype");
}

.home-sf-icon,
.mt-sf-icon {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Celosys SF Icons", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  speak: never;
}

/*
 * Home 112:6109 + B_Identity hero 150:8323 — Figma 1:1 (hu = 1px @ 390).
 * Text: Inter. Icons: celosys-sf-icons (PUA subset). Plates: CSS.
 */
.home-v2 {
  --hu: calc(100vw / 390);
  box-sizing: border-box;
  color: var(--celosys-text);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.home-v2__hero {
  /* Figma B_Identity 150:8323 — 390×181 from top edge; C starts at y=181.
     --celosys-android-lift is 0 on iOS; on Android-nosat subtracts status band. */
  --hu: calc(100vw / 390);
  --celosys-b-hero-u: 181;
  background: transparent;
  box-sizing: border-box;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  height: calc(var(--celosys-b-hero-u) * var(--hu) - var(--celosys-android-lift, 0px));
  left: 0;
  margin: 0;
  max-height: calc(var(--celosys-b-hero-u) * var(--hu) - var(--celosys-android-lift, 0px));
  min-height: calc(var(--celosys-b-hero-u) * var(--hu) - var(--celosys-android-lift, 0px));
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  touch-action: manipulation;
  view-transition-name: none;
  width: 100%;
  z-index: 30;
}

/*
 * TRIAL compact panel B (non-Home): logo + hamburger only.
 * Revert: remove body class "celosys-app--compact-b" from _Layout + shell.js updateBodyClasses,
 * and delete this CSS block.
 *
 * Logo/hamburger MUST match Home exactly (same .home-v2__topbar: top 68hu, left/right 15hu).
 * Compact only shortens B to the bottom of that topbar row — never repositions the topbar.
 */
body.celosys-app--compact-b {
  --hu: calc(100vw / 390);
  /* Home topbar top 68 + height 34.43 → B ends flush under logo/hamburger */
  --celosys-compact-b-u: 102.43;
  --celosys-compact-b-h: calc(var(--celosys-compact-b-u) * var(--hu) - var(--celosys-android-lift, 0px));
  --celosys-home-hero-offset: var(--celosys-compact-b-h);
}

body.celosys-app--compact-b .home-v2__hero {
  --celosys-b-hero-u: var(--celosys-compact-b-u);
  height: var(--celosys-compact-b-h);
  max-height: var(--celosys-compact-b-h);
  min-height: var(--celosys-compact-b-h);
  /* Empty B area must not steal taps from panel C (lente / info). */
  pointer-events: none;
}

body.celosys-app--compact-b .home-v2__identity {
  display: none !important;
}

body.celosys-app--compact-b .home-v2__topbar,
body.celosys-app--compact-b .home-v2__logo,
body.celosys-app--compact-b .home-v2__menu {
  pointer-events: auto;
}

/* Do NOT override .home-v2__topbar top/left/right — identical to Home */

/* Spacer: beat stale inline px from Home so document flow matches short B */
body.celosys-app--compact-b .home-v2__hero-spacer {
  height: var(--celosys-compact-b-h) !important;
  min-height: var(--celosys-compact-b-h) !important;
}

/* Panel C above B so heading actions stay clickable */
body.celosys-app--compact-b.celosys-app--app-hero .stamp-cards-page__chrome,
body.celosys-app--compact-b.celosys-app--app-hero .partner-hub__chrome {
  top: var(--celosys-compact-b-h) !important;
  z-index: 31;
}

.home-v2__hero-inner {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  max-width: none;
  position: relative;
  width: 100%;
  z-index: 1;
}

.home-v2__hero-spacer {
  display: block;
  flex-shrink: 0;
  height: var(--celosys-home-hero-offset, calc(var(--celosys-b-hero-u, 181) * var(--hu, 1px)));
  min-height: var(--celosys-home-hero-offset, calc(var(--celosys-b-hero-u, 181) * var(--hu, 1px)));
  pointer-events: none;
  visibility: hidden;
}

.home-v2__body {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: calc(368 * var(--hu));
  padding: 0;
  position: relative;
  width: calc(368 * var(--hu));
}

/* Fixed fold: full-bleed panel between hero and nav; keep Figma 11hu side inset. */
body.celosys-app--home-v2 .home-v2__body[data-app-panel-fixed="1"],
body.celosys-app--home-v2 .home-v2__body[data-app-hero-scroll="1"] {
  -webkit-overflow-scrolling: touch;
  margin: 0;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: calc(12 * var(--hu));
  padding-left: calc(11 * var(--hu));
  padding-right: calc(11 * var(--hu));
  width: 100%;
}

.home-v2.partner-hub .home-v2__body {
  max-width: var(--celosys-card-w);
  width: var(--celosys-card-w);
}

.home-v2__body > .home-v2__section:first-child {
  margin-top: 0;
}

.home-v2__topbar {
  align-items: center;
  display: flex;
  height: calc(34.43 * var(--hu));
  justify-content: space-between;
  left: calc(15 * var(--hu));
  margin: 0;
  min-height: 0;
  position: absolute;
  right: calc(15 * var(--hu));
  top: max(10px, calc(68 * var(--hu) - var(--celosys-android-lift, 0px)));
}

.home-v2__logo {
  display: block;
  flex-shrink: 0;
  height: calc(34.43 * var(--hu, 1px));
  line-height: 0;
  overflow: hidden;
  width: calc(105 * var(--hu, 1px));
}

.home-v2__logo img {
  display: block;
  height: calc(34.43 * var(--hu, 1px)) !important;
  max-height: calc(34.43 * var(--hu, 1px));
  max-width: calc(105 * var(--hu, 1px));
  object-fit: contain;
  width: calc(105 * var(--hu, 1px)) !important;
}

.home-v2__menu {
  background: transparent;
  border: 0;
  line-height: 0;
  padding: 0;
}

.home-v2__menu-icon {
  color: #F8F8F8;
  display: block;
  font-size: calc(30 * var(--hu));
  line-height: 1;
}

.home-v2__identity {
  align-items: flex-start;
  display: flex;
  gap: calc(8 * var(--hu));
  justify-content: space-between;
  left: calc(15 * var(--hu));
  margin: 0;
  padding-top: 0;
  position: absolute;
  right: calc(11 * var(--hu));
  top: max(48px, calc(107 * var(--hu) - var(--celosys-android-lift, 0px)));
}

.home-v2__identity-main {
  flex: 1;
  min-width: 0;
}

.home-v2__greeting {
  color: #B5B5B5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--hu));
  font-weight: 600;
  letter-spacing: 0;
  line-height: calc(18 * var(--hu));
  margin: 0 0 calc(8 * var(--hu));
}

.home-v2__badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--hu));
}

.home-v2__badge {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: calc(10 * var(--hu));
  font-weight: 500;
  gap: calc(4 * var(--hu));
  line-height: 1;
  padding: calc(4 * var(--hu)) calc(8 * var(--hu));
  text-decoration: none;
}

.home-v2__badge-star {
  color: #B0358B;
  font-family: "Inter", sans-serif;
  font-size: calc(12 * var(--hu));
  line-height: 1;
}

.home-v2__badge-check {
  color: #2EB7A5;
  font-size: calc(10 * var(--hu));
  line-height: 1;
}

.home-v2__badge--membership {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #B0358B;
  font-weight: 700;
  padding-left: 0;
  padding-right: calc(2 * var(--hu));
}

.home-v2__badge--verified {
  background: transparent;
  border: 1px solid #2EB7A5;
  border-radius: 999px;
  color: #2EB7A5;
  line-height: 1;
  min-height: calc(22 * var(--hu));
  padding: calc(4 * var(--hu)) calc(10 * var(--hu)) calc(4 * var(--hu)) calc(8 * var(--hu));
}

.home-v2__badge--unverified {
  border-color: rgba(181, 181, 181, 0.55);
  color: var(--celosys-text-muted);
}

.home-v2__qr.celosys-qr-btn,
.home-v2__qr {
  align-items: center !important;
  align-self: flex-start !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0.5px solid #F8F8F8 !important;
  border-radius: calc(8 * var(--hu)) !important;
  box-shadow: none !important;
  color: #F8F8F8 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: calc(44 * var(--hu)) !important;
  justify-content: center !important;
  line-height: 1.05;
  max-height: none !important;
  max-width: none !important;
  min-height: calc(44 * var(--hu)) !important;
  min-width: calc(64 * var(--hu)) !important;
  overflow: visible !important;
  padding: calc(4 * var(--hu)) !important;
  position: relative !important;
  width: calc(64 * var(--hu)) !important;
}

.home-v2__qr.celosys-qr-btn:hover,
.home-v2__qr.celosys-qr-btn:focus,
.home-v2__qr:hover,
.home-v2__qr:focus {
  background: transparent !important;
  border-color: #F8F8F8 !important;
  box-shadow: none !important;
  color: #F8F8F8 !important;
}

.home-v2__qr-icon {
  color: #F8F8F8;
  display: block !important;
  flex-shrink: 0;
  font-size: calc(22 * var(--hu));
  height: auto !important;
  line-height: 1;
  speak: never;
  width: auto !important;
}

.home-v2__qr-bg {
  display: none !important;
}

.home-v2__qr-label {
  bottom: auto !important;
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--hu));
  font-weight: 600;
  left: auto !important;
  line-height: 1.1;
  margin-top: calc(1 * var(--hu));
  position: static !important;
  right: auto !important;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  z-index: 1;
}

.home-v2__section {
  margin: 0;
  padding: 0;
}

.home-v2__section--balances {
  margin-bottom: calc(16 * var(--hu));
  position: relative;
}

.home-v2__section-title,
#home-balances-title,
#home-highlights-title {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 calc(12 * var(--hu));
}

/* Figma 147:7301 — title overlays top of Credits/Punkte plates */
#home-balances-title {
  font-size: calc(16 * var(--hu));
  left: calc(4 * var(--hu));
  letter-spacing: calc(0.48 * var(--hu));
  line-height: calc(19 * var(--hu));
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 2;
}

#home-highlights-title {
  font-size: calc(20 * var(--hu));
  line-height: calc(20 * var(--hu));
  margin-bottom: calc(11 * var(--hu));
}

.home-v2__wallets {
  display: flex;
  flex-direction: row;
  gap: calc(17.64 * var(--hu));
  margin: 0;
  /* plates start at section top; title sits on top of them */
  padding-top: 0;
}

.home-v2__wallet {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(7 * var(--hu));
  box-sizing: border-box;
  color: #F8F8F8;
  display: block;
  height: calc(120 * var(--hu));
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  width: calc(176 * var(--hu));
}

/* Figma 196:526 — GRADIENT_RADIAL (updated matrix: center BR 176,120; axes ~196.95×288.83) */
.home-v2__wallet--credits {
  background-image: radial-gradient(
    calc(196.95 * var(--hu)) calc(288.83 * var(--hu)) at calc(176 * var(--hu)) calc(120 * var(--hu)),
    rgba(137, 39, 102, 0.7) 5.2247%,
    rgba(103, 29, 77, 0.525) 15.421%,
    rgba(69, 20, 51, 0.35) 25.618%,
    rgba(0, 0, 0, 0) 46.01%
  );
}

/* Figma 196:519 — GRADIENT_RADIAL, center (88,120), axes ~317.64×120 */
.home-v2__wallet--points {
  background-image: radial-gradient(
    calc(317.64 * var(--hu)) calc(120 * var(--hu)) at calc(88 * var(--hu)) calc(120 * var(--hu)),
    rgba(137, 39, 102, 0.8) 0%,
    rgba(137, 39, 102, 0.3) 50%,
    rgba(69, 20, 51, 0.15) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Figma Guthaben: label/value absolute; glyphs at y≈93–95, size 22 / chevron 20 */
.home-v2__wallet-label {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--hu));
  font-weight: 700;
  left: calc(10 * var(--hu));
  line-height: calc(14 * var(--hu));
  margin: 0;
  position: absolute;
  top: calc(31.7 * var(--hu));
}

.home-v2__wallet-value {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--hu));
  font-weight: 700;
  left: calc(10 * var(--hu));
  line-height: calc(14 * var(--hu));
  margin: 0;
  position: absolute;
  top: calc(53.7 * var(--hu));
  white-space: nowrap;
}

.home-v2__wallet-foot {
  /* Absolute children; foot is layout host only */
  display: block;
  margin: 0;
  padding: 0;
}

.home-v2__wallet-glyph {
  font-size: calc(22 * var(--hu));
  left: calc(10 * var(--hu));
  line-height: 1;
  position: absolute;
  top: calc(94.93 * var(--hu));
  transform: translateY(-50%);
}

.home-v2__wallet--points .home-v2__wallet-glyph {
  top: calc(93.48 * var(--hu));
}

.home-v2__wallet--credits .home-v2__wallet-glyph,
.home-v2__wallet--credits .home-v2__chevron {
  color: #B0358B;
}

.home-v2__wallet--points .home-v2__wallet-glyph,
.home-v2__wallet--points .home-v2__chevron {
  color: #F8F8F8;
}

.home-v2__wallet-foot .home-v2__chevron {
  font-size: calc(20 * var(--hu));
  left: calc(149.81 * var(--hu));
  line-height: 1;
  position: absolute;
  top: calc(94.93 * var(--hu));
  transform: translateY(-50%);
}

.home-v2__wallet--points .home-v2__wallet-foot .home-v2__chevron {
  left: calc(148.17 * var(--hu));
  top: calc(93.48 * var(--hu));
}

.home-v2__chevron {
  display: inline-block;
  line-height: 1;
  speak: never;
}

.home-v2__highlights {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--hu));
}

.home-v2__card {
  align-items: center;
  background-color: transparent;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border: 0;
  /* Plate PNGs already have soft corners — CSS radius was clipping them away */
  border-radius: 0;
  box-sizing: border-box;
  color: #F8F8F8;
  display: grid;
  gap: 0;
  grid-template-columns: calc(40 * var(--hu)) minmax(0, 1fr) calc(22 * var(--hu));
  height: calc(63 * var(--hu));
  overflow: visible;
  padding: 0 calc(12 * var(--hu)) 0 calc(10 * var(--hu));
  position: relative;
  text-decoration: none;
  width: 100%;
}

/* Home highlight plates — shared radial geometry; colors per card */
.home-v2__card--partner,
.home-v2__card--gutscheine,
.home-v2__card--tickets,
.home-v2__card--meet {
  background-color: transparent;
  background-image: radial-gradient(
    calc(283.5 * var(--hu)) calc(212.5 * var(--hu)) at calc(283.5 * var(--hu)) 0,
    var(--home-plate-radial-a) 25%,
    var(--home-plate-radial-b) 62.5%,
    rgba(2, 2, 2, 0) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(7 * var(--hu));
  overflow: hidden;
}

/* Partner Home — uses shared --celosys-partner-plate-* tokens */
.home-v2__card--partner {
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--hu)) calc(var(--celosys-partner-plate-ry) * var(--hu))
      at calc(var(--celosys-partner-plate-cx) * var(--hu)) calc(var(--celosys-partner-plate-cy) * var(--hu)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--hu));
}

/* Gutscheine Home — uses shared --celosys-gutscheine-plate-* tokens */
.home-v2__card--gutscheine {
  background-image: radial-gradient(
    calc(var(--celosys-gutscheine-plate-rx) * var(--hu)) calc(var(--celosys-gutscheine-plate-ry) * var(--hu))
      at calc(var(--celosys-gutscheine-plate-cx) * var(--hu)) calc(var(--celosys-gutscheine-plate-cy) * var(--hu)),
    var(--celosys-gutscheine-plate-a) var(--celosys-gutscheine-plate-stop-a),
    var(--celosys-gutscheine-plate-b) var(--celosys-gutscheine-plate-stop-b),
    var(--celosys-gutscheine-plate-c) 100%
  );
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--hu));
}

/* Tickets Home — uses shared --celosys-tickets-plate-* tokens */
.home-v2__card--tickets {
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--hu)) calc(var(--celosys-tickets-plate-ry) * var(--hu))
      at calc(var(--celosys-tickets-plate-cx) * var(--hu)) calc(var(--celosys-tickets-plate-cy) * var(--hu)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--hu));
}

/* Meet&Trust Home — uses shared --celosys-meet-plate-* tokens */
.home-v2__card--meet {
  background-image: radial-gradient(
    calc(var(--celosys-meet-plate-rx) * var(--hu)) calc(var(--celosys-meet-plate-ry) * var(--hu))
      at calc(var(--celosys-meet-plate-cx) * var(--hu)) calc(var(--celosys-meet-plate-cy) * var(--hu)),
    var(--celosys-meet-plate-a) var(--celosys-meet-plate-stop-a),
    var(--celosys-meet-plate-b) var(--celosys-meet-plate-stop-b),
    var(--celosys-meet-plate-c) 100%
  );
  border-radius: calc(var(--celosys-meet-plate-radius) * var(--hu));
}

.home-v2__card--tickets::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-tickets-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-tickets-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.home-v2__card--meet::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-meet-stroke-rgb), 1) 0%,
    rgba(var(--celosys-meet-stroke-rgb), 0) var(--celosys-meet-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-meet-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-meet-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* Partner Home stroke — same tokens as hub D boxes */
.home-v2__card--partner::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-partner-stroke-rgb), 1) 0%,
    rgba(var(--celosys-partner-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Gutscheine Home stroke — same tokens as gift D boxes */
.home-v2__card--gutscheine::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-gutscheine-stroke-rgb), 1) 0%,
    rgba(var(--celosys-gutscheine-stroke-rgb), 0) var(--celosys-gutscheine-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-gutscheine-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-gutscheine-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.home-v2__card--partner > *,
.home-v2__card--gutscheine > *,
.home-v2__card--tickets > *,
.home-v2__card--meet > * {
  position: relative;
  z-index: 1;
}

.home-v2__card-icon.home-sf-icon {
  font-size: calc(22 * var(--hu));
  justify-self: center;
  line-height: 1;
  text-align: center;
}

.home-v2__card--partner .home-v2__card-icon { color: #B0358B; }
.home-v2__card--gutscheine .home-v2__card-icon { color: #695DA5; }
.home-v2__card--tickets .home-v2__card-icon { color: #E76F51; }
.home-v2__card--meet .home-v2__card-icon { color: #F5A623; }

.home-v2__card-body {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--hu));
  min-width: 0;
}

.home-v2__card-title {
  color: #F8F8F8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--hu));
  font-weight: 700;
  line-height: calc(14 * var(--hu));
}

.home-v2__card-text {
  color: #B5B5B5;
  display: -webkit-box;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--hu));
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  line-height: calc(10 * var(--hu));
  margin: 0;
  overflow: hidden;
}

.home-v2__card .home-v2__chevron {
  color: #B5B5B5;
  font-size: calc(12 * var(--hu));
  justify-self: center;
}



/*
 * Tickets → Events — Meet&Trust chrome/fold clone; coral / tickets plate tokens.
 * Cards reuse .mt-appointment-card layout (Bestätigt).
 */
.tickets-events-page {
  --mt-accent: #e76f51;
  --mt-accent-soft: rgba(231, 111, 81, 0.22);
  --mt-u: var(--celosys-u);
  --celosys-title-circle-a: rgba(231, 111, 81, 0.95);
  --celosys-title-circle-b: rgba(231, 111, 81, 0.4);
  box-sizing: border-box;
  position: relative;
}

.tickets-events-page.tickets-events-page--booting .te-tabs__viewport {
  opacity: 0;
}

body.celosys-app--app-hero .tickets-events-page {
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}

body.celosys-app--app-hero .tickets-events-page > .stamp-cards-page__chrome {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

body.celosys-app--app-hero .tickets-events-page > .stamp-cards-page__chrome > * {
  margin-top: 0;
}

.tickets-events-page .stamp-cards-page__body {
  padding-top: 0;
}

.tickets-events-page .tickets-events-page__info-btn,
.tickets-events-page .tickets-events-page__info-icon,
.tickets-events-page .tickets-events-page__find-btn,
.tickets-events-page .tickets-events-page__find-icon {
  color: #e76f51;
}

.tickets-events-page .tickets-events-page__heading-actions {
  gap: calc(6 * var(--mt-u));
}

.tickets-events-page .tickets-events-page__find-icon,
.tickets-events-page .tickets-events-page__info-icon {
  font-size: calc(var(--celosys-c-info-icon) * var(--mt-u));
  line-height: 1;
}

.tickets-events-page .tickets-events-page__find-btn {
  margin-right: 0;
}

.tickets-events-page .te-seg {
  aspect-ratio: 348.19 / 35;
  height: auto;
  isolation: isolate;
  margin: 0 0 calc(var(--celosys-c-gap-after-seg) * var(--mt-u)) var(--celosys-bar-side);
  overflow: visible;
  width: var(--celosys-bar-w);
}

.tickets-events-page .te-seg__thumb {
  --celosys-seg-thumb-a: rgba(231, 111, 81, 1);
  --celosys-seg-thumb-b: rgba(231, 111, 81, 0.6);
  --celosys-seg-thumb-c: rgba(196, 94, 69, 0.5);
  --celosys-seg-thumb-d: rgba(147, 71, 52, 0.4);
  --celosys-seg-thumb-e: rgba(73, 35, 26, 0.3);
  --celosys-seg-thumb-f: rgba(0, 0, 0, 0.2);
  background: none !important;
  background-color: transparent !important;
  background-image: radial-gradient(
    106.6% 244.3% at 0% 0%,
    var(--celosys-seg-thumb-a) 0%,
    var(--celosys-seg-thumb-b) 49.648%,
    var(--celosys-seg-thumb-c) 62.236%,
    var(--celosys-seg-thumb-d) 74.824%,
    var(--celosys-seg-thumb-e) 87.412%,
    var(--celosys-seg-thumb-f) 100%
  ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-radius: calc(var(--celosys-seg-thumb-radius) * var(--mt-u, var(--celosys-u)));
  height: calc(25.58 / 35 * 100%);
  left: calc(5.13 / 348.19 * 100%);
  overflow: hidden;
  top: calc(4.96 / 35 * 100%);
  transform: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: calc(169.97 / 348.19 * 100%);
}

.tickets-events-page .te-seg--events .stamp-cards-seg__thumb,
.tickets-events-page .te-seg--events .te-seg__thumb {
  transform: translate3d(calc((174.9 - 5.13) / 169.97 * 100%), 0, 0);
}

.tickets-events-page .te-seg--mine .stamp-cards-seg__thumb,
.tickets-events-page .te-seg--mine .te-seg__thumb {
  transform: translate3d(0, 0, 0);
}

.tickets-events-page .stamp-cards-seg__buttons {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.tickets-events-page .stamp-cards-seg__btn {
  color: #B5B5B5;
}

.tickets-events-page .stamp-cards-seg__btn--active {
  color: #F8F8F8;
  font-weight: 600;
}

.tickets-events-page .te-seg__icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Events finden — D-plate remapped to tickets coral; last C block → D fold (Meet&Trust gap). */
.tickets-events-page .tickets-events-partner-find {
  --pf-plate-u: var(--mt-u, var(--celosys-u));
  --celosys-partner-plate-a: var(--celosys-tickets-plate-a);
  --celosys-partner-plate-b: var(--celosys-tickets-plate-b);
  --celosys-partner-plate-c: var(--celosys-tickets-plate-c);
  --celosys-partner-plate-radius: var(--celosys-tickets-plate-radius);
  --celosys-partner-stroke-rgb: var(--celosys-tickets-stroke-rgb);
  --celosys-partner-stroke-fade-at: var(--celosys-tickets-stroke-fade-at);
  --celosys-partner-stroke-w: var(--celosys-tickets-stroke-w);
  --celosys-partner-stroke-clip-bottom: var(--celosys-tickets-stroke-clip-bottom);
  aspect-ratio: var(--celosys-c-partner-ratio-w) / var(--celosys-c-partner-ratio-h);
  margin: 0 0 calc(var(--celosys-c-gap-after-partner) * var(--mt-u)) var(--celosys-bar-side);
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: var(--celosys-bar-w);
}

.tickets-events-page .tickets-events-partner-find .stamp-cards-partner-find__lupe,
.tickets-events-page .tickets-events-partner-find .stamp-cards-partner-find__title,
.tickets-events-page .tickets-events-partner-find .stamp-cards-partner-find__arrow {
  color: #e76f51;
}

.tickets-events-page .tickets-events-partner-find:hover .stamp-cards-partner-find__title,
.tickets-events-page .tickets-events-partner-find:focus-visible .stamp-cards-partner-find__title {
  color: #e76f51;
}

.tickets-events-page .te-tabs__viewport {
  box-sizing: border-box;
  min-height: 0;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.12s ease;
  width: 100%;
}

.tickets-events-page--panel-scroll .te-tabs__viewport {
  min-height: 0;
}

.tickets-events-page .te-tabs__track {
  align-items: stretch;
  display: flex;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: 200%;
  will-change: transform;
}

.tickets-events-page--mine .te-tabs__track {
  transform: translate3d(0, 0, 0);
}

.tickets-events-page--events .te-tabs__track {
  transform: translate3d(-50%, 0, 0);
}

.tickets-events-page .te-tabs__panel {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  flex: 0 0 50%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 var(--celosys-card-side) calc(12 * var(--mt-u));
  touch-action: pan-y;
  width: 50%;
}

.tickets-events-page .tickets-events-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-d-gap) * var(--mt-u));
  margin: 0 auto;
  max-width: 100%;
  padding: 0 0 calc(8 * var(--mt-u));
  width: var(--celosys-bar-w);
}

.tickets-events-page .mt-appointment-card {
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-ry) * var(--mt-u))
      at calc(var(--celosys-tickets-plate-cx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-cy) * var(--mt-u)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--mt-u));
  color: inherit;
  text-decoration: none;
}

.tickets-events-page .mt-appointment-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  clip-path: inset(0 0 var(--celosys-tickets-stroke-clip-bottom) 0);
  padding: var(--celosys-tickets-stroke-w);
}

.tickets-events-page .mt-appointment-card__date--gold {
  background: linear-gradient(180deg, #f0a090 0%, #e76f51 100%);
  color: #121018;
}

.tickets-events-page .mt-appointment-card__ticket {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tickets-events-page .mt-appointment-card__rows,
.tickets-events-page .mt-appointment-card__status {
  display: none;
}

.tickets-events-card-link:hover,
.tickets-events-card-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* Tickets wizard stepper — same size/font/opacity ramp as Meet&Trust, coral (not yellow). */
.tickets-events-page .appointment-wizard__form--card-scroll > .appointment-wizard__stepper,
.tickets-events-page .appointment-wizard__form--card-scroll .appointment-wizard__header {
  padding-right: var(--celosys-bar-side);
}

.tickets-events-page .appointment-wizard__stepper {
  border-bottom: 0;
  gap: 0;
  justify-content: center;
  margin: 0 0 calc(8 * var(--mt-u));
  padding: 0 0 calc(4 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .appointment-wizard__step-line {
  background: rgba(248, 248, 248, 0.18);
  display: block;
  flex: 1 1 auto;
  height: 2px;
  max-width: none;
  min-width: calc(6 * var(--mt-u));
}

.tickets-events-page .appointment-wizard__step-line--done {
  background: #e76f51;
}

.tickets-events-page .appointment-wizard__step {
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 50%;
  color: #f8f8f8;
  flex: 0 0 auto;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  height: calc(30.5 * var(--mt-u));
  line-height: 1;
  width: calc(28.5 * var(--mt-u));
  z-index: 1;
}

/* Future = black 30%. Reached = coral, opacity by step index 15%→95%. */
.tickets-events-page .appointment-wizard__step--active[data-step="1"],
.tickets-events-page .appointment-wizard__step--done[data-step="1"] { background: rgba(231, 111, 81, 0.15); }
.tickets-events-page .appointment-wizard__step--active[data-step="2"],
.tickets-events-page .appointment-wizard__step--done[data-step="2"] { background: rgba(231, 111, 81, 0.283); }
.tickets-events-page .appointment-wizard__step--active[data-step="3"],
.tickets-events-page .appointment-wizard__step--done[data-step="3"] { background: rgba(231, 111, 81, 0.417); }
.tickets-events-page .appointment-wizard__step--active[data-step="4"],
.tickets-events-page .appointment-wizard__step--done[data-step="4"] { background: rgba(231, 111, 81, 0.55); }
.tickets-events-page .appointment-wizard__step--active[data-step="5"],
.tickets-events-page .appointment-wizard__step--done[data-step="5"] { background: rgba(231, 111, 81, 0.683); }
.tickets-events-page .appointment-wizard__step--active[data-step="6"],
.tickets-events-page .appointment-wizard__step--done[data-step="6"] { background: rgba(231, 111, 81, 0.817); }

.tickets-events-page .appointment-wizard__step--active,
.tickets-events-page .appointment-wizard__step--done {
  border-color: transparent;
  color: #f8f8f8;
}

.tickets-events-page .appointment-wizard__step-btn:hover,
.tickets-events-page .appointment-wizard__step-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(231, 111, 81, 0.35);
}

.tickets-events-page .appointment-wizard__header {
  margin-bottom: calc(14 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .appointment-wizard__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--mt-u));
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 calc(6 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .appointment-wizard__subtitle {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

/* Wizard cards — Inter for umlauts; SF icons only on .mt-sf-icon */
.tickets-events-page,
.tickets-events-page .appointment-wizard,
.tickets-events-page .appointment-wizard__title,
.tickets-events-page .appointment-wizard__subtitle,
.tickets-events-page .appointment-wizard-card__title,
.tickets-events-page .appointment-wizard-card__meta,
.tickets-events-page .te-wiz-event-card,
.tickets-events-page .te-wiz-panel,
.tickets-events-page .te-wiz-field,
.tickets-events-page .te-wiz-heading__title,
.te-pay-page,
.te-pay-page .te-pay-title,
.te-pay-page .te-pay-meta,
.te-pay-page .te-pay-gutscheine-title,
.te-pay-page .te-pay-gutscheine-hint,
.te-pay-page .te-pay-gift-item {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.tickets-events-page .te-wiz-cat-card {
  align-items: center;
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-ry) * var(--mt-u))
      at calc(var(--celosys-tickets-plate-cx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-cy) * var(--mt-u)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  border: 0;
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--mt-u));
  color: #f8f8f8;
  position: relative;
}

/* Dashboard background_file — do not let the plate fill override --wizard-card-bg */
.tickets-events-page .te-wiz-cat-card.appointment-wizard-card--themed {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.42), rgba(20, 12, 10, 0.62)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.tickets-events-page .te-wiz-cat-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: var(--celosys-tickets-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.tickets-events-page .te-wiz-cat-card > * {
  position: relative;
  z-index: 1;
}

.tickets-events-page .te-wiz-cat-card .mt-appointment-card__chevron {
  color: #b5b5b5;
  font-size: calc(16 * var(--mt-u));
  margin-left: auto;
}

.tickets-events-page .te-wiz-event-list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .te-wiz-event-card {
  align-items: stretch;
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-tickets-plate-rx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-ry) * var(--mt-u))
      at calc(var(--celosys-tickets-plate-cx) * var(--mt-u))
      calc(var(--celosys-tickets-plate-cy) * var(--mt-u)),
    var(--celosys-tickets-plate-a) var(--celosys-tickets-plate-stop-a),
    var(--celosys-tickets-plate-b) var(--celosys-tickets-plate-stop-b),
    var(--celosys-tickets-plate-c) 100%
  );
  border: 0;
  border-radius: calc(var(--celosys-tickets-plate-radius) * var(--mt-u));
  color: #f8f8f8;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) auto;
  min-height: calc(123 * var(--mt-u));
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
}

.tickets-events-page .te-wiz-event-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: var(--celosys-tickets-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.tickets-events-page .te-wiz-event-card__media {
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 42%,
      rgba(10, 10, 12, 0.35) 62%,
      rgba(10, 10, 12, 0.88) 88%,
      rgba(10, 10, 12, 0.96) 100%
    ),
    var(--te-event-bg, none) center / cover no-repeat;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 100%;
  position: relative;
  z-index: 0;
}

.tickets-events-page .te-wiz-event-card:not(.te-wiz-event-card--has-bg) .te-wiz-event-card__media {
  background: linear-gradient(135deg, rgba(231, 111, 81, 0.35) 0%, rgba(20, 16, 14, 0.9) 70%);
}

.tickets-events-page .te-wiz-event-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--mt-u));
  grid-column: 2 / 3;
  justify-content: center;
  min-width: 0;
  padding: calc(10 * var(--mt-u)) calc(10 * var(--mt-u)) calc(10 * var(--mt-u)) calc(18 * var(--mt-u));
  position: relative;
  z-index: 1;
}

.tickets-events-page .te-wiz-event-card__avail {
  color: #b5b5b5;
  font-size: calc(11 * var(--mt-u));
  margin-top: calc(8 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card__cat-icon {
  align-items: center;
  color: #e76f51;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(12 * var(--mt-u));
  line-height: 1;
}

.tickets-events-page .te-wiz-event-card__cat-icon .appointment-wizard-card__asset-icon,
.tickets-events-page .te-wiz-event-card__cat-icon img {
  height: calc(14 * var(--mt-u));
  object-fit: contain;
  width: calc(14 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card__cat-icon svg {
  height: calc(14 * var(--mt-u));
  width: calc(14 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card__date {
  align-items: center;
  background: rgba(18, 16, 24, 0.92);
  border: 1px solid #e76f51;
  border-radius: calc(6 * var(--mt-u));
  display: flex;
  flex-direction: column;
  height: calc(37 * var(--mt-u));
  justify-content: center;
  left: calc(12 * var(--mt-u));
  position: absolute;
  top: calc(10 * var(--mt-u));
  width: calc(36 * var(--mt-u));
  z-index: 3;
}

.tickets-events-page .te-wiz-event-card__day {
  font-size: calc(16 * var(--mt-u));
  font-weight: 700;
  line-height: 1;
}

.tickets-events-page .te-wiz-event-card__month {
  font-size: calc(10 * var(--mt-u));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.tickets-events-page .te-wiz-event-card__title {
  color: #f8f8f8;
  font-size: calc(14 * var(--mt-u));
  font-weight: 700;
  line-height: 1.15;
}

.tickets-events-page .te-wiz-event-card__row {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  gap: calc(6 * var(--mt-u));
  line-height: 1.2;
  min-width: 0;
}

.tickets-events-page .te-wiz-event-card__row > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tickets-events-page .te-wiz-event-card__row .mt-sf-icon {
  flex: 0 0 auto;
  font-size: calc(12 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card__avail strong {
  color: #e76f51;
  font-weight: 700;
}

.tickets-events-page .te-wiz-event-card__chevron {
  align-self: end;
  color: #b5b5b5;
  font-size: calc(12 * var(--mt-u));
  grid-column: 3;
  margin: 0 calc(12 * var(--mt-u)) calc(12 * var(--mt-u)) 0;
  z-index: 1;
}

/* Meine Tickets: same plate as event cards, no media column */
.tickets-events-page .te-wiz-event-card--mine {
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(110 * var(--mt-u));
  position: relative;
}

.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__body {
  grid-column: 1;
  padding-left: calc(56 * var(--mt-u));
  padding-right: calc(52 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__date {
  left: calc(12 * var(--mt-u));
}

.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__ticket {
  color: #f8f8f8;
  font-size: calc(12 * var(--mt-u));
  font-weight: 600;
}

/* Same tools chrome as Stempel / Meet&Trust bestätigt */
.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  flex-direction: row;
  gap: calc(10 * var(--mt-u));
  justify-content: flex-end;
  line-height: 1;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: calc(10 / 350.5 * 100%);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__qr,
.tickets-events-page .te-wiz-event-card--mine .te-wiz-event-card__chevron {
  align-self: center;
  color: inherit;
  display: inline-flex;
  font-size: calc(20 * var(--mt-u));
  grid-column: auto;
  line-height: 1;
  margin: 0;
}

/* Meine Abonnemente — Apple Wallet stack (seasons page mine tab only) */
.tickets-seasons-page .season-wallet-stack {
  --season-wallet-pass-h: calc(168 * var(--mt-u));
  --season-wallet-peek: calc(26 * var(--mt-u));
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  max-width: 100%;
  padding: calc(8 * var(--mt-u)) 0 calc(24 * var(--mt-u));
  width: var(--celosys-bar-w);
}

.tickets-seasons-page .season-wallet-pass {
  background: #1c1c1e;
  border: 0;
  border-radius: calc(14 * var(--mt-u));
  box-shadow:
    0 calc(2 * var(--mt-u)) calc(8 * var(--mt-u)) rgba(0, 0, 0, 0.35),
    0 calc(10 * var(--mt-u)) calc(24 * var(--mt-u)) rgba(0, 0, 0, 0.28);
  color: #f8f8f8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: var(--season-wallet-pass-h);
  overflow: hidden;
  position: relative;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

.tickets-seasons-page .season-wallet-pass:not(:first-child) {
  margin-top: calc(var(--season-wallet-peek) - var(--season-wallet-pass-h));
}

.tickets-seasons-page .season-wallet-pass:first-child {
  box-shadow:
    0 calc(4 * var(--mt-u)) calc(12 * var(--mt-u)) rgba(0, 0, 0, 0.42),
    0 calc(16 * var(--mt-u)) calc(32 * var(--mt-u)) rgba(0, 0, 0, 0.32);
}

.tickets-seasons-page .season-wallet-pass:focus-visible {
  outline: calc(2 * var(--mt-u)) solid rgba(231, 111, 81, 0.85);
  outline-offset: calc(2 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__header {
  align-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.42) 100%
    ),
    var(--season-wallet-header-bg, none) center / cover no-repeat;
  display: flex;
  flex: 0 0 auto;
  gap: calc(8 * var(--mt-u));
  min-height: calc(44 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(14 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__header--fallback {
  background:
    linear-gradient(
      135deg,
      rgba(231, 111, 81, 0.95) 0%,
      rgba(180, 72, 52, 0.92) 55%,
      rgba(28, 28, 30, 0.98) 100%
    );
}

.tickets-seasons-page .season-wallet-pass__logo {
  border-radius: 50%;
  flex: 0 0 auto;
  height: calc(32 * var(--mt-u));
  object-fit: cover;
  width: calc(32 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__org {
  color: rgba(248, 248, 248, 0.92);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--mt-u));
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tickets-seasons-page .season-wallet-pass__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(6 * var(--mt-u));
  min-height: 0;
  padding: calc(12 * var(--mt-u)) calc(14 * var(--mt-u)) calc(8 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__primary {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--mt-u));
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.tickets-seasons-page .season-wallet-pass__secondary {
  color: rgba(248, 248, 248, 0.72);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.tickets-seasons-page .season-wallet-pass__fields {
  display: grid;
  gap: calc(8 * var(--mt-u));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(4 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__field {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--mt-u));
  margin: 0;
  min-width: 0;
}

.tickets-seasons-page .season-wallet-pass__field-label {
  color: rgba(248, 248, 248, 0.52);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--mt-u));
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tickets-seasons-page .season-wallet-pass__field-value {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--mt-u));
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tickets-seasons-page .season-wallet-pass__footer {
  align-items: center;
  border-top: 1px solid rgba(248, 248, 248, 0.08);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  min-height: calc(34 * var(--mt-u));
  padding: calc(8 * var(--mt-u)) calc(14 * var(--mt-u)) calc(10 * var(--mt-u));
}

.tickets-seasons-page .season-wallet-pass__kind {
  color: rgba(248, 248, 248, 0.55);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tickets-seasons-page .season-wallet-pass__qr-hint {
  color: rgba(248, 248, 248, 0.88);
  font-size: calc(18 * var(--mt-u));
  line-height: 1;
}

/* Wallet pass overlay — seasons abonnemente only */
.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__panel {
  background: #1c1c1e;
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__hero {
  min-height: calc(120 * var(--aq-u, var(--mt-u)));
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__rows {
  background: #1c1c1e;
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__wallet-perforation {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(6 * var(--aq-u, var(--mt-u))),
      rgba(248, 248, 248, 0.22) calc(6 * var(--aq-u, var(--mt-u))),
      rgba(248, 248, 248, 0.22) calc(12 * var(--aq-u, var(--mt-u)))
    );
  height: calc(1 * var(--aq-u, var(--mt-u)));
  margin: calc(8 * var(--aq-u, var(--mt-u))) calc(16 * var(--aq-u, var(--mt-u))) 0;
  width: auto;
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__qr--wallet {
  background: #f8f8f8;
  border-radius: calc(12 * var(--aq-u, var(--mt-u)));
  margin: calc(12 * var(--aq-u, var(--mt-u))) calc(16 * var(--aq-u, var(--mt-u))) calc(16 * var(--aq-u, var(--mt-u)));
  padding: calc(16 * var(--aq-u, var(--mt-u))) calc(12 * var(--aq-u, var(--mt-u))) calc(12 * var(--aq-u, var(--mt-u)));
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__hint {
  color: rgba(18, 16, 24, 0.72);
}

.appointment-qr-sheet--wallet-pass .appointment-qr-sheet__route {
  margin-bottom: calc(16 * var(--aq-u, var(--mt-u)));
}

.tickets-events-page .te-wiz-type-row--radio {
  align-items: center;
  cursor: pointer;
  gap: calc(12 * var(--mt-u));
}

.tickets-events-page .te-wiz-type-row--radio input[type="radio"] {
  accent-color: #e76f51;
  flex: 0 0 auto;
  height: calc(18 * var(--mt-u));
  margin: 0;
  width: calc(18 * var(--mt-u));
}

.tickets-events-page .te-wiz-panel {
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  border-radius: calc(var(--celosys-tickets-plate-radius, 10) * var(--mt-u));
  margin: 0 0 calc(12 * var(--mt-u));
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
  position: relative;
}

.tickets-events-page .te-wiz-panel::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-tickets-stroke-rgb), 1) 0%,
    rgba(var(--celosys-tickets-stroke-rgb), 0) var(--celosys-tickets-stroke-fade-at)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: var(--celosys-tickets-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.tickets-events-page .te-wiz-panel > * {
  position: relative;
  z-index: 1;
}

.tickets-events-page .te-wiz-panel--event {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(120 * var(--mt-u));
  overflow: hidden;
  padding: calc(18 * var(--mt-u)) calc(14 * var(--mt-u));
  position: relative;
}

/* Shop logo: fixed circle top-right (do NOT reuse .appointment-qr-sheet__logo — --aq-u missing here) */
.tickets-events-page .te-wiz-panel--event .te-wiz-panel__shop-logo-wrap {
  background: #0a0a0a;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(248, 248, 248, 0.35);
  height: calc(48 * var(--mt-u));
  left: auto;
  overflow: hidden;
  position: absolute !important;
  right: calc(12 * var(--mt-u));
  top: calc(12 * var(--mt-u));
  width: calc(48 * var(--mt-u));
  z-index: 3;
}

.tickets-events-page .te-wiz-panel--event .te-wiz-panel__shop-logo {
  border-radius: 50%;
  display: block;
  height: 100%;
  left: auto;
  object-fit: cover;
  object-position: center;
  position: static;
  top: auto;
  width: 100%;
}

.tickets-events-page .te-wiz-panel--event-has-bg {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.72) 100%),
    var(--te-event-bg) center / cover no-repeat;
}

.tickets-events-page .te-wiz-panel__title {
  color: #f8f8f8;
  font-size: calc(16 * var(--mt-u));
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 calc(6 * var(--mt-u));
  padding-right: calc(56 * var(--mt-u));
  position: relative;
  z-index: 1;
}

.tickets-events-page .te-wiz-panel__avail {
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u));
  margin: 0;
  position: relative;
  z-index: 1;
}

.tickets-events-page .te-wiz-panel--event .te-wiz-panel__avail {
  color: rgba(248, 248, 248, 0.88);
}

.tickets-events-page .te-wiz-panel__avail strong {
  color: #e76f51;
}

.tickets-events-page .te-wiz-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: calc(4 * var(--mt-u));
  padding-bottom: calc(4 * var(--mt-u));
}

.tickets-events-page .te-wiz-info-row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(231, 111, 81, 0.28);
  color: #f8f8f8;
  display: flex;
  font-size: calc(11 * var(--mt-u));
  gap: calc(10 * var(--mt-u));
  line-height: 1.35;
  margin: 0;
  padding: calc(10 * var(--mt-u)) 0;
}

.tickets-events-page .te-wiz-info-list > .te-wiz-info-row:last-child {
  border-bottom: 0;
}

.tickets-events-page .te-wiz-info-row--loose {
  border-bottom: 0;
  color: #b5b5b5;
  margin: 0 0 calc(6 * var(--mt-u));
  padding: 0;
}

.tickets-events-page .te-wiz-info-list .mt-sf-icon,
.tickets-events-page .te-wiz-info-list .home-sf-icon {
  color: #e76f51;
  flex: 0 0 auto;
  font-size: calc(14 * var(--mt-u));
  line-height: 1.2;
}

.tickets-events-page .te-wiz-section-title {
  color: #f8f8f8;
  font-size: calc(14 * var(--mt-u));
  font-weight: 700;
  margin: calc(8 * var(--mt-u)) 0 calc(10 * var(--mt-u));
}

.tickets-events-page .te-wiz-section-title--tickets {
  margin-bottom: calc(4 * var(--mt-u));
}

.tickets-events-page .te-wiz-map {
  margin-bottom: calc(16 * var(--mt-u));
}

.tickets-events-page .te-wiz-zone {
  margin-bottom: calc(14 * var(--mt-u));
  padding-top: calc(10 * var(--mt-u));
  padding-bottom: calc(10 * var(--mt-u));
}

.tickets-events-page .te-wiz-zone__head {
  align-items: baseline;
  display: flex;
  gap: calc(8 * var(--mt-u));
  justify-content: space-between;
  margin: 0 0 calc(6 * var(--mt-u));
}

.tickets-events-page .te-wiz-zone__name {
  color: #f8f8f8;
  font-size: calc(13 * var(--mt-u));
  font-weight: 700;
  margin: 0;
}

.tickets-events-page .te-wiz-zone__avail {
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u));
  margin: 0;
}

.tickets-events-page .te-wiz-zone__avail strong {
  color: #e76f51;
}

.tickets-events-page .te-wiz-type-row {
  align-items: center;
  display: flex;
  gap: calc(8 * var(--mt-u));
  justify-content: space-between;
  margin: 0 0 calc(6 * var(--mt-u));
  min-height: calc(28 * var(--mt-u));
}

.tickets-events-page .te-wiz-type-row__label {
  align-items: center;
  color: #f8f8f8;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  font-size: calc(11 * var(--mt-u));
  gap: calc(8 * var(--mt-u));
  min-width: 0;
  white-space: nowrap;
}

.tickets-events-page .te-wiz-type-row__label .mt-sf-icon {
  color: #e76f51;
  flex: 0 0 auto;
  font-size: calc(14 * var(--mt-u));
}

.tickets-events-page .te-wiz-type-row__price {
  color: #e76f51;
  font-weight: 700;
  margin-left: calc(4 * var(--mt-u));
}

.tickets-events-page .te-wiz-qty__select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(231, 111, 81, 0.45);
  border-radius: calc(6 * var(--mt-u));
  color: #f8f8f8;
  min-width: calc(52 * var(--mt-u));
  padding: calc(4 * var(--mt-u)) calc(6 * var(--mt-u));
}

.tickets-events-page .appointment-wizard__actions {
  align-items: center;
  gap: calc(12 * var(--mt-u));
  justify-content: flex-end;
  margin-top: calc(14 * var(--mt-u));
  padding-bottom: calc(18 * var(--mt-u));
}

.tickets-events-page .appointment-wizard__btn--primary {
  background: #e76f51;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: #000000;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  min-height: calc(24 * var(--mt-u));
  min-width: calc(73 * var(--mt-u));
  padding: calc(6 * var(--mt-u)) calc(18 * var(--mt-u));
}

.tickets-events-page .appointment-wizard__btn--primary:hover,
.tickets-events-page .appointment-wizard__btn--primary:focus,
.tickets-events-page .appointment-wizard__btn--primary:focus-visible {
  background: #f08a70;
  border: 0;
  color: #000000;
}

.tickets-events-page .appointment-wizard__btn--primary:disabled,
.tickets-events-page .appointment-wizard__btn--primary[aria-disabled="true"] {
  background: rgba(231, 111, 81, 0.35);
  color: rgba(0, 0, 0, 0.45);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.tickets-events-page .appointment-wizard__btn--secondary {
  color: #f8f8f8;
}

.tickets-events-page .appointment-wizard__btn--secondary::before,
.tickets-events-page .appointment-wizard__btn--secondary::after {
  color: #e76f51;
}

.tickets-events-page .appointment-wizard__form--card-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background-color: transparent;
}

.tickets-events-page .te-tabs__panel:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding-right: 0;
  background-color: transparent;
}

.tickets-events-page .ticket-event-wizard-page:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  margin: 0;
  max-width: none;
  min-height: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: transparent;
  width: 100%;
}

/* Same content width as Meet&Trust / event cards (100% of panel). */
.tickets-events-page .appointment-wizard {
  margin: 0;
  max-width: none;
  width: 100%;
}

.tickets-events-page .appointment-wizard:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  max-width: none;
  min-height: 0;
  width: 100%;
}

/* Panel D must not sit in the skinny partner-hub card column (that was the
   “rimpicciolito” gutters on steps 1/4/5 when pin had not stuck yet). */
.tickets-events-page .home-v2__body,
.appointments-page .home-v2__body {
  margin: 0;
  max-width: none;
  width: 100%;
}

.tickets-events-page .appointment-wizard__form--card-scroll > .appointment-wizard__stepper {
  flex: 0 0 auto;
  margin-bottom: 0;
  overflow: visible;
  padding-bottom: calc(8 * var(--mt-u));
  padding-right: var(--celosys-bar-side);
  position: relative;
  z-index: 5;
  background-color: transparent;
}

.tickets-events-page .appointment-wizard__form--card-scroll > .appointment-wizard__stage {
  background-color: transparent;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.tickets-events-page .appointment-wizard__form--card-scroll .appointment-wizard__header {
  flex: 0 0 auto;
  margin-bottom: calc(10 * var(--mt-u));
  overflow: visible;
  padding-bottom: calc(8 * var(--mt-u));
  padding-right: var(--celosys-bar-side);
  padding-top: 0;
  position: relative;
  z-index: 4;
  background-color: transparent;
}

.tickets-events-page .appointment-wizard__form--card-scroll .appointment-wizard__scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
  padding-right: 0;
}

.tickets-events-page .appointment-wizard__form--card-scroll .appointment-wizard__actions {
  flex: 0 0 auto;
  margin-top: calc(14 * var(--mt-u));
  margin-bottom: 0;
  padding-bottom: calc(12 * var(--mt-u) + 3.35rem + env(safe-area-inset-bottom, 0px));
  padding-top: calc(4 * var(--mt-u));
  padding-right: var(--celosys-bar-side);
}

.tickets-events-page .appointment-wizard__slide {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(12 * var(--mt-u) + 3.35rem + env(safe-area-inset-bottom, 0px));
  padding-right: var(--celosys-bar-side);
  box-sizing: border-box;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 0.28s ease-out;
  will-change: transform;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(181, 181, 181, 0.45) transparent;
}

/* Same slide enter as Meet&Trust — was appointments-only, so Tickets never animated to full width. */
.tickets-events-page .appointment-wizard__slide--enter-forward {
  transform: translate3d(100%, 0, 0);
}

.tickets-events-page .appointment-wizard__slide--enter-back {
  transform: translate3d(-100%, 0, 0);
}

.tickets-events-page .appointment-wizard__slide--enter-forward.appointment-wizard__slide--in,
.tickets-events-page .appointment-wizard__slide--enter-back.appointment-wizard__slide--in {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .tickets-events-page .appointment-wizard__slide {
    transition: none;
  }
}

.tickets-events-page .appointment-wizard__cards,
.tickets-events-page .te-wiz-cards {
  gap: calc(8 * var(--mt-u));
  min-height: 0;
  width: 100%;
}

.tickets-events-page .appointment-wizard__cards--category .appointment-wizard-card,
.tickets-events-page .te-wiz-cat-card {
  box-sizing: border-box;
  min-height: calc(54 * var(--mt-u));
  padding: calc(8 * var(--mt-u)) calc(14 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .te-wiz-panel,
.tickets-events-page .te-wiz-guest-card {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

/* UA fieldset min-width:min-content shrinks/skews date inputs vs text fields */
.tickets-events-page fieldset.te-wiz-guest-card {
  min-width: 0;
}

.tickets-events-page .appointment-wizard__slide::-webkit-scrollbar {
  width: 3px;
}

.tickets-events-page .appointment-wizard__slide::-webkit-scrollbar-track {
  background: transparent;
}

.tickets-events-page .appointment-wizard__slide::-webkit-scrollbar-thumb {
  background: rgba(181, 181, 181, 0.45);
  border-radius: 999px;
}

.tickets-events-page .te-wiz-heading--plain {
  align-items: flex-start;
}

.tickets-events-page .te-wiz-heading--plain .te-wiz-heading__title {
  margin: 0;
}

.tickets-events-page .te-wiz-accent-count {
  color: #e76f51;
  font-weight: 700;
}

.tickets-events-page .te-wiz-field__readonly,
.tickets-events-page .te-wiz-field__input {
  box-sizing: border-box;
  min-height: calc(36 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .te-wiz-field__input--date,
.tickets-events-page .te-wiz-field__input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-height: calc(36 * var(--mt-u));
  min-width: 0;
  width: 100%;
}

.tickets-events-page .te-wiz-field__input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.tickets-purchase-success-page .appointment-wizard-success__icon,
.tickets-purchase-success-page .appointment-wizard-success__eyebrow,
.tickets-purchase-success-page .appointment-wizard-success__btn {
  color: #e76f51;
}

.tickets-purchase-success-page .appointment-wizard-success__btn {
  background: #e76f51;
  border: 0;
  color: #000;
}

.tickets-events-page .te-wiz-btn-ghost {
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.35);
  border-radius: 999px;
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  font-weight: 600;
  min-height: calc(36 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .te-wiz-backlink {
  background: none;
  border: 0;
  color: #e76f51;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  margin: 0 0 calc(10 * var(--mt-u));
  padding: 0;
}

.tickets-events-page .te-wiz-heading {
  align-items: center;
  display: flex;
  gap: calc(10 * var(--mt-u));
  margin: 0 0 calc(14 * var(--mt-u));
}

.tickets-events-page .te-wiz-heading__icon {
  align-items: center;
  background: linear-gradient(180deg, #f0a090 0%, #e76f51 100%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: calc(18 * var(--mt-u));
  height: calc(40 * var(--mt-u));
  justify-content: center;
  width: calc(40 * var(--mt-u));
}

.tickets-events-page .te-wiz-heading__title {
  color: #f9f9f9;
  font-size: calc(20 * var(--mt-u));
  font-weight: 600;
  margin: 0;
}

.tickets-events-page .te-wiz-guest-card__legend {
  color: #f8f8f8;
  float: none;
  font-size: calc(13 * var(--mt-u));
  font-weight: 700;
  margin: 0 0 calc(10 * var(--mt-u));
  padding: 0;
  width: auto;
}

.tickets-events-page .te-wiz-field {
  box-sizing: border-box;
  display: block;
  margin: 0 0 calc(10 * var(--mt-u));
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.tickets-events-page .te-wiz-field__label {
  color: #b5b5b5;
  display: block;
  font-size: calc(10 * var(--mt-u));
  margin-bottom: calc(4 * var(--mt-u));
}

.tickets-events-page .te-wiz-field__input,
.tickets-events-page .te-wiz-field__readonly {
  background: rgba(40, 40, 44, 0.95);
  border: 1px solid rgba(248, 248, 248, 0.12);
  border-radius: calc(6 * var(--mt-u));
  color: #f8f8f8;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(12 * var(--mt-u));
  width: 100%;
}

.tickets-events-page .te-wiz-field__readonly {
  color: #f8f8f8;
}

.tickets-events-page .te-wiz-field__readonly strong,
.tickets-events-page .te-wiz-type-row__price {
  color: #e76f51;
}

.tickets-events-page .te-wiz-verify-line {
  color: #f8f8f8;
  margin: 0 0 4px;
}

.tickets-events-page .te-wiz-verify-meta {
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u));
  margin: 0;
}

.tickets-events-page .te-wiz-pay__hint,
.tickets-events-page .te-wiz-pay__gift-note {
  color: #b5b5b5;
  font-size: calc(11 * var(--mt-u));
  margin: 0 0 calc(10 * var(--mt-u));
}

.tickets-events-page .te-wiz-pay__event {
  color: #f8f8f8;
  font-size: calc(14 * var(--mt-u));
  font-weight: 700;
  margin: 0 0 calc(6 * var(--mt-u));
}

.tickets-events-page .te-wiz-pay__meta {
  color: #b5b5b5;
  font-size: calc(11 * var(--mt-u));
  margin: 0 0 calc(14 * var(--mt-u));
}

.tickets-events-page .te-wiz-pay__section-title {
  color: #f8f8f8;
  font-size: calc(13 * var(--mt-u));
  font-weight: 700;
  margin: 0 0 calc(6 * var(--mt-u));
}

.tickets-events-page .te-wiz-pay__gift-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--mt-u));
  list-style: none;
  margin: 0 0 calc(14 * var(--mt-u));
  padding: 0;
}

.tickets-events-page .te-wiz-pay__gift-item {
  align-items: flex-start;
  background: rgba(40, 40, 44, 0.95);
  border: 1px solid rgba(248, 248, 248, 0.12);
  border-radius: calc(6 * var(--mt-u));
  color: #f8f8f8;
  display: flex;
  font-size: calc(12 * var(--mt-u));
  gap: calc(10 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(12 * var(--mt-u));
}

.tickets-events-page .te-wiz-pay__gift-item input {
  accent-color: #e76f51;
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.tickets-events-page .te-wiz-pay__actions {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--mt-u));
}

.credits-pay-page.te-pay-page {
  --mt-accent: #e76f51;
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.te-pay-page .te-pay-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(231, 111, 81, 0.4);
  border-radius: calc(12 * var(--celosys-u));
  padding: calc(18 * var(--celosys-u));
}

.te-pay-page .te-pay-back {
  color: #e76f51;
  display: inline-block;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  text-decoration: none;
}

.te-pay-page .te-pay-title {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  gap: 0.65rem;
  margin: 0 0 1rem;
}

.te-pay-page .te-pay-title .mt-sf-icon {
  font-size: 1.35rem;
}

.te-pay-page .te-pay-event {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.te-pay-page .te-pay-meta {
  color: #b5b5b5;
  font-size: 0.75rem;
  margin: 0 0 1.25rem;
}

.te-pay-page .te-pay-gutscheine-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.te-pay-page .te-pay-gutscheine-hint {
  color: #b5b5b5;
  font-size: 0.7rem;
  margin: 0 0 0.85rem;
}

.te-pay-page .te-pay-gift-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.te-pay-page .te-pay-gift-item {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-size: 0.75rem;
  gap: 0.55rem;
}

.te-pay-page .te-pay-gift-item input {
  accent-color: #e76f51;
  height: 1rem;
  width: 1rem;
}

.te-pay-page .te-pay-confirm {
  background: linear-gradient(180deg, #f0a090 0%, #e76f51 55%, #c35e46 100%);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  min-height: 2.5rem;
  width: 100%;
}

.te-pay-page .te-pay-cancel {
  background: transparent;
  border: 1px solid rgba(248, 248, 248, 0.35);
  border-radius: 999px;
  color: #b5b5b5;
  font-weight: 600;
  margin-top: 0.65rem;
  min-height: 2.25rem;
  width: 100%;
}

/*
 * Meet&Trust — Deine Termine (draft publication.html + Figma 64:428).
 * Icons: same Celosys SF Icons PUA subset as Home (.mt-sf-icon).
 * PNG only for composite chrome/cards that cannot be CSS.
 */
.appointments-page {
  --mt-accent: #f5a623;
  --mt-accent-soft: rgba(245, 166, 35, 0.22);
  --mt-u: var(--celosys-u);
  box-sizing: border-box;
  position: relative;
}

/* Reserve fold height before JS; hide only until first sync (anti FOUC/flash). */
.appointments-page.appointments-page--booting .appointments-tabs__viewport {
  opacity: 0;
}

.appointments-page .appointments-tabs__viewport {
  box-sizing: border-box;
  /* Height/max-height come only from JS (chrome.bottom → nav.top).
     A CSS min-height previously overshot and painted cards under the transparent nav. */
  min-height: 0;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.12s ease;
}

.appointments-page--panel-scroll .appointments-tabs__viewport {
  min-height: 0;
  max-height: none; /* inline max-height from syncViewportHeight */
}

/* Cancel .celosys-main 1rem pad so left:20.18 maps from frame edge. */
body.celosys-app--app-hero .appointments-page {
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}

body.celosys-app--app-hero .appointments-page > .stamp-cards-page__chrome {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

body.celosys-app--app-hero .appointments-page > .stamp-cards-page__chrome > * {
  margin-top: 0;
}

.appointments-page .stamp-cards-page__body {
  padding-top: 0;
}

/* Title row — gift chrome: gap 7.75 below heading (draft ~title→tabs) */
.appointments-page .appointments-page__heading {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: calc(var(--celosys-c-heading-gap-x) * var(--mt-u));
  height: calc(var(--celosys-c-heading-h) * var(--mt-u));
  margin: 0 0 calc(var(--celosys-c-gap-after-heading) * var(--mt-u));
  min-height: calc(var(--celosys-c-heading-h) * var(--mt-u));
  padding-left: calc(var(--celosys-c-heading-pad-x) * var(--mt-u));
  padding-right: calc(var(--celosys-c-heading-pad-x) * var(--mt-u));
  width: 100%;
}

/* Title badge: Figma 204:528 amber circle + glyph. */
.appointments-page .appointments-page__logo {
  align-items: center;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: calc(var(--celosys-c-icon-h) * var(--mt-u));
  justify-content: center;
  overflow: visible;
  position: relative;
  width: calc(var(--celosys-c-icon-w) * var(--mt-u));
}

.appointments-page .appointments-page__logo img {
  aspect-ratio: 1;
  background: transparent;
  border-radius: 0;
  display: block;
  height: calc(var(--celosys-c-icon-h) * var(--mt-u));
  max-height: none;
  max-width: none;
  object-fit: contain;
  object-position: center;
  width: calc(var(--celosys-c-icon-w) * var(--mt-u));
}

.appointments-page .appointments-page__logo-glyph {
  color: #F8F8F8;
  font-size: calc(18 * var(--mt-u));
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.appointments-page .appointments-page__title {
  color: #f9f9f9;
  flex: 1 1 auto;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-title-size) * var(--mt-u));
  font-weight: 600;
  letter-spacing: var(--celosys-c-title-tracking);
  line-height: 1;
  margin: 0;
  min-width: 0;
}

/* Info “i” — same footprint as Gutscheine (23.18²) */
.appointments-page .appointments-page__info-btn {
  align-items: center;
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--mt-accent);
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: calc(var(--celosys-c-info) * var(--mt-u));
  justify-content: center;
  margin: 0 0 0 auto;
  opacity: 1;
  padding: 0;
  width: calc(var(--celosys-c-info) * var(--mt-u));
}

.appointments-page .stamp-cards-page__heading-actions .appointments-page__info-btn {
  margin-left: 0;
}

.appointments-page .appointments-page__info-icon {
  color: inherit;
  display: block;
  font-size: calc(var(--celosys-c-info-icon) * var(--mt-u));
  height: auto;
  line-height: 1;
  width: auto;
}

/* Tabs 348.19×35 — draft Caption 9px (180×0.05); gap ~10 before Partner finden */
.appointments-page .appointments-seg {
  aspect-ratio: 348.19 / 35;
  height: auto;
  isolation: isolate;
  margin: 0 0 calc(var(--celosys-c-gap-after-seg) * var(--mt-u)) var(--celosys-bar-side);
  overflow: visible;
  width: var(--celosys-bar-w);
}

.appointments-page .appointments-seg__thumb {
  background: none !important;
  background-image: none !important;
  height: calc(25.58 / 35 * 100%);
  left: calc(5.13 / 348.19 * 100%);
  overflow: hidden;
  top: calc(4.96 / 35 * 100%);
  transform: none;
  width: calc(169.97 / 348.19 * 100%);
}

.appointments-page .appointments-seg__thumb img {
  display: block;
  height: 100%;
  object-fit: fill;
  width: 100%;
}

.appointments-page .appointments-seg--new .stamp-cards-seg__thumb,
.appointments-page .appointments-seg--new .appointments-seg__thumb {
  transform: translate3d(calc((174.9 - 5.13) / 169.97 * 100%), 0, 0);
}

.appointments-page .appointments-seg--mine .stamp-cards-seg__thumb,
.appointments-page .appointments-seg--mine .appointments-seg__thumb {
  transform: translate3d(0, 0, 0);
}

.appointments-page .stamp-cards-seg__buttons {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  width: 100%;
  z-index: 2;
}

/* Match Gutscheine tab labels (draft Caption ≈ 9) +1pt */
.appointments-page .stamp-cards-seg__btn {
  align-items: center;
  box-sizing: border-box;
  color: #b5b5b5;
  display: inline-flex;
  flex-direction: row;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-tab-size) * var(--mt-u) + 1pt);
  font-weight: 500;
  gap: calc(var(--celosys-c-tab-gap) * var(--mt-u));
  height: 100%;
  justify-content: center;
  letter-spacing: var(--celosys-c-tab-tracking);
  line-height: 1;
  margin: 0;
  min-height: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0;
  text-decoration: none;
  transform: none;
}

.appointments-page .stamp-cards-seg__btn--active {
  color: #F8F8F8;
  font-weight: 600;
}

.appointments-page .stamp-cards-seg__btn:not(.stamp-cards-seg__btn--active) {
  color: #B5B5B5;
}

.appointments-page .stamp-cards-seg__btn > span {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  margin: 0;
  overflow: visible;
  padding: 0;
}

/* SF icons — draft ~12px (240×0.05); no clip on badge side */
.appointments-page .appointments-seg__icon {
  display: inline-block;
  flex-shrink: 0;
  font-size: calc(var(--celosys-c-tab-icon) * var(--mt-u));
  height: auto;
  letter-spacing: 0;
  line-height: 1;
  min-width: 1.15em;
  overflow: visible;
  text-align: center;
  width: auto;
}

/* Partner finden — D-plate fill remapped to Meet&Trust amber */
.appointments-page .appointments-partner-find {
  --pf-plate-u: var(--mt-u, var(--celosys-u));
  --celosys-partner-plate-a: var(--celosys-meet-plate-a);
  --celosys-partner-plate-b: var(--celosys-meet-plate-b);
  --celosys-partner-plate-c: var(--celosys-meet-plate-c);
  --celosys-partner-plate-radius: var(--celosys-meet-plate-radius);
  --celosys-partner-stroke-rgb: var(--celosys-meet-stroke-rgb);
  --celosys-partner-stroke-fade-at: var(--celosys-meet-stroke-fade-at);
  --celosys-partner-stroke-w: var(--celosys-meet-stroke-w);
  --celosys-partner-stroke-clip-bottom: var(--celosys-meet-stroke-clip-bottom);
  aspect-ratio: var(--celosys-c-partner-ratio-w) / var(--celosys-c-partner-ratio-h);
  margin: 0 0 calc(var(--celosys-c-gap-after-partner) * var(--mt-u)) var(--celosys-bar-side);
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: var(--celosys-bar-w);
}

/* Solo su «Deine Termine»; su Neuer il chrome si accorcia e il fold cresce. */
.appointments-page--new .appointments-partner-find {
  display: none;
}

.appointments-page .appointments-partner-find .stamp-cards-partner-find__bg {
  display: none !important;
}

.appointments-page .appointments-partner-find .stamp-cards-partner-find__row {
  align-items: center;
  box-sizing: border-box;
  display: grid !important;
  gap: calc(var(--celosys-c-partner-grid-gap) * var(--mt-u));
  grid-template-columns: calc(var(--celosys-c-partner-icon-col) * var(--mt-u)) minmax(0, 1fr) calc(var(--celosys-c-partner-arrow-col) * var(--mt-u));
  height: 100%;
  padding: 0 calc(var(--celosys-c-partner-pad-x) * var(--mt-u));
  position: relative;
  width: 100%;
  z-index: 1;
}

.appointments-page .appointments-partner-find .appointments-partner-find__lupe {
  color: var(--mt-accent);
  display: inline-flex;
  justify-content: center;
  position: static;
  transform: none;
}

.appointments-page .appointments-partner-find .stamp-cards-partner-find__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--celosys-c-partner-text-gap) * var(--mt-u));
  justify-content: center;
  min-width: 0;
  position: static;
}

.appointments-page .appointments-partner-find .stamp-cards-partner-find__title {
  color: var(--mt-accent);
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-partner-title) * var(--mt-u));
  font-weight: 700;
  line-height: 1;
  margin: 0;
  position: static;
  transform: none;
}

.appointments-page .appointments-partner-find .stamp-cards-partner-find__sub {
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--celosys-c-partner-sub) * var(--mt-u));
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  position: static;
  transform: none;
  white-space: normal;
}

.appointments-page .appointments-partner-find .appointments-partner-find__arrow {
  color: var(--mt-accent);
  display: inline-flex;
  justify-content: center;
  position: static;
  transform: none;
}

.appointments-page .appointments-partner-find__lupe {
  font-size: calc(var(--celosys-c-partner-lupe) * var(--mt-u));
  line-height: 1;
}

.appointments-page .appointments-partner-find__arrow {
  font-size: calc(var(--celosys-c-partner-arrow) * var(--mt-u));
  line-height: 1;
}

/* Dual-panel carousel — same motion as Gutscheine (0.32s cubic-bezier). */
.appointments-page .appointments-tabs__viewport {
  overflow: hidden;
  width: 100%;
}

.appointments-page .appointments-tabs__track {
  align-items: stretch;
  display: flex;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: 200%;
  will-change: transform;
}

.appointments-page--new .appointments-tabs__track {
  transform: translate3d(-50%, 0, 0);
}

.appointments-page .appointments-tabs__panel {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  flex: 0 0 50%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 var(--celosys-bar-side) calc(12 * var(--mt-u));
  position: relative;
  scrollbar-gutter: stable;
  width: 50%;
}


.appointments-page .appointments-tabs__panel:has(.appointment-wizard-page) {
  /* Wizard scrolls inside the panel like the appointments list. */
  overscroll-behavior-y: contain;
}

.appointments-page .appointments-tabs__panel:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Let wizard scrollbar sit on the right panel edge (not over the boxes) */
  padding-right: 0;
  background-color: transparent;
}

.appointments-page .appointment-wizard-page:has(.appointment-wizard__form--card-scroll) {
  padding-right: 0;
  background-color: transparent;
}

.appointments-page .appointment-wizard__form--card-scroll > .appointment-wizard__stepper,
.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__header {
  padding-right: var(--celosys-bar-side);
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
  padding-right: 0;
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__actions {
  flex: 0 0 auto;
  margin-top: calc(14 * var(--mt-u));
  margin-bottom: 0;
  /* Just enough clearance above bottom nav when scrolled to end */
  padding-bottom: calc(12 * var(--mt-u) + 3.35rem + env(safe-area-inset-bottom, 0px));
  padding-top: calc(4 * var(--mt-u));
  padding-right: var(--celosys-bar-side);
}

.appointments-page .appointment-wizard__slide {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(12 * var(--mt-u) + 3.35rem + env(safe-area-inset-bottom, 0px));
  /* Content inset on the right; track sits at the true right margin */
  padding-right: var(--celosys-bar-side);
  box-sizing: border-box;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 0.28s ease-out;
  will-change: transform;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(181, 181, 181, 0.45) transparent;
}

.appointments-page .appointment-wizard__slide::-webkit-scrollbar {
  width: 3px;
}

.appointments-page .appointment-wizard__slide::-webkit-scrollbar-track {
  background: transparent;
}

.appointments-page .appointment-wizard__slide::-webkit-scrollbar-thumb {
  background: rgba(181, 181, 181, 0.45);
  border-radius: 999px;
}

/* Slide body children inherit full width inside the padded slide */
.appointments-page .appointment-wizard__slide > .appointment-wizard__actions {
  padding-right: 0;
}

.appointments-page .appointment-wizard-page {
  box-sizing: border-box;
  /* Panel already pads like Deine Termine (19.11); no extra inset. */
  min-height: 0;
  padding: 0 0 calc(16 * var(--mt-u));
  width: 100%;
}

/* Pages 5–7: scroll past bottom nav so zurück/Weiter are not covered */
.appointments-page .appointment-wizard-page:not(:has(.appointment-wizard__form--card-scroll)) {
  padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
}

.appointments-page .appointment-wizard__form:not(.appointment-wizard__form--card-scroll) .appointment-wizard__actions {
  padding-bottom: calc(28 * var(--mt-u) + env(safe-area-inset-bottom, 0px));
}

.appointments-page .appointment-wizard-page:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
}

/* Same content width as Deine Termine cards (100% of panel after 19.11). */
.appointments-page .appointment-wizard {
  max-width: none;
  width: 100%;
}

.appointments-page .appointment-wizard:has(.appointment-wizard__form--card-scroll) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.appointments-page .appointment-wizard__form--card-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  /* Stepper pinned; stage (title+boxes+actions) is the sliding unit */
  overflow: hidden;
  background-color: transparent;
}

.appointments-page .appointment-wizard__form--card-scroll > .appointment-wizard__stepper {
  flex: 0 0 auto;
  margin-bottom: 0;
  overflow: visible;
  padding-bottom: calc(8 * var(--mt-u));
  position: relative;
  z-index: 5;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appointments-page .appointment-wizard__form--card-scroll > .appointment-wizard__stage {
  background-color: transparent;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.appointments-page .appointment-wizard__form--card-scroll > .appointment-wizard__stage-viewport {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color: transparent;
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__header {
  flex: 0 0 auto;
  margin-bottom: calc(10 * var(--mt-u));
  overflow: visible;
  padding-bottom: calc(8 * var(--mt-u));
  padding-top: 0;
  position: relative;
  z-index: 4;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* HG from fixed .celosys-app-bg — no cloned ::before / --mt-sticky-hg-shift */

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
}

/* Stage chrome stays put; slide is the scroller (boxes + actions) */
.appointments-page .appointment-wizard__form--card-scroll > .appointment-wizard__stage {
  background-color: transparent;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.appointments-page .appointment-wizard__slide--enter-forward {
  transform: translate3d(100%, 0, 0);
}

.appointments-page .appointment-wizard__slide--enter-back {
  transform: translate3d(-100%, 0, 0);
}

.appointments-page .appointment-wizard__slide--enter-forward.appointment-wizard__slide--in,
.appointments-page .appointment-wizard__slide--enter-back.appointment-wizard__slide--in {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .appointments-page .appointment-wizard__slide {
    transition: none;
  }
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__cards,
.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__custom-address,
.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard-dates,
.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard-details,
.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard-summary {
  flex: 0 0 auto;
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__cards {
  overflow: visible;
  padding-bottom: 0;
}

.appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__custom-address {
  max-height: none;
  overflow: visible;
}

.appointments-page .appointment-wizard__stepper {
  border-bottom: 0;
  gap: 0;
  justify-content: center;
  margin: 0 0 calc(8 * var(--mt-u));
  padding: 0 0 calc(4 * var(--mt-u));
  width: 100%;
}

.appointments-page .appointment-wizard__step-line {
  background: rgba(248, 248, 248, 0.18);
  display: block;
  flex: 1 1 auto;
  height: 2px;
  max-width: none;
  min-width: calc(6 * var(--mt-u));
}

.appointments-page .appointment-wizard__step-line--done {
  background: #f5a623;
}

.appointments-page .appointment-wizard__step {
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 50%;
  color: #f8f8f8;
  flex: 0 0 auto;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  height: calc(30.5 * var(--mt-u));
  line-height: 1;
  width: calc(28.5 * var(--mt-u));
  z-index: 1;
}

/* Future = black 30%. Reached (active/done) = yellow, opacity by step index 15%→95%. */
.appointments-page .appointment-wizard__step--active[data-step="1"],
.appointments-page .appointment-wizard__step--done[data-step="1"] { background: rgba(245, 166, 35, 0.15); }
.appointments-page .appointment-wizard__step--active[data-step="2"],
.appointments-page .appointment-wizard__step--done[data-step="2"] { background: rgba(245, 166, 35, 0.283); }
.appointments-page .appointment-wizard__step--active[data-step="3"],
.appointments-page .appointment-wizard__step--done[data-step="3"] { background: rgba(245, 166, 35, 0.417); }
.appointments-page .appointment-wizard__step--active[data-step="4"],
.appointments-page .appointment-wizard__step--done[data-step="4"] { background: rgba(245, 166, 35, 0.55); }
.appointments-page .appointment-wizard__step--active[data-step="5"],
.appointments-page .appointment-wizard__step--done[data-step="5"] { background: rgba(245, 166, 35, 0.683); }
.appointments-page .appointment-wizard__step--active[data-step="6"],
.appointments-page .appointment-wizard__step--done[data-step="6"] { background: rgba(245, 166, 35, 0.817); }
.appointments-page .appointment-wizard__step--active[data-step="7"],
.appointments-page .appointment-wizard__step--done[data-step="7"] { background: rgba(245, 166, 35, 0.95); }

.appointments-page .appointment-wizard__step--active,
.appointments-page .appointment-wizard__step--done {
  border-color: transparent;
  color: #f8f8f8;
}

.appointments-page .appointment-wizard__step-btn:hover,
.appointments-page .appointment-wizard__step-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.35);
}

.appointments-page .appointment-wizard__header {
  margin-bottom: calc(14 * var(--mt-u));
  width: 100%;
}

.appointments-page .appointment-wizard__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--mt-u));
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 calc(6 * var(--mt-u));
  width: 100%;
}

.appointments-page .appointment-wizard__subtitle {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  width: 100%;
}

.appointments-page .appointment-wizard__cards {
  gap: calc(8 * var(--mt-u));
  min-height: 0;
  width: 100%;
}

/* Page 1 category cards: slightly shorter */
.appointments-page .appointment-wizard__cards--category .appointment-wizard-card {
  min-height: calc(54 * var(--mt-u));
  padding: calc(8 * var(--mt-u)) calc(14 * var(--mt-u));
}

.appointments-page .appointment-wizard-card {
  border-radius: calc(10 * var(--mt-u));
  box-sizing: border-box;
  gap: calc(12 * var(--mt-u));
  /* Midway height: Figma ~45u vs old 4.75rem (~76px). */
  min-height: calc(60 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(14 * var(--mt-u));
  width: 100%;
}

.appointments-page .appointment-wizard-card.appointment-wizard-card--themed,
.appointments-page .appointment-wizard-card.appointment-wizard-card--themed.appointment-wizard-card--selected {
  background-size: 100% 100%;
  overflow: hidden;
}

/*
 * Category background inscribed in EVERY themed box (outer panels + inner fields/rows).
 * Fill the rounded rect exactly; clip to radius; never let bootstrap solid bg cover it.
 */
.appointments-page .appointment-wizard-card--themed,
.appointments-page .appointment-wizard-dates--themed,
.appointments-page .appointment-wizard-details--themed,
.appointments-page .appointment-wizard-summary--themed,
.appointments-page .appointment-wizard__custom-address--themed,
.appointments-page .appointment-wizard-dates--themed .appointment-wizard__input,
.appointments-page .appointment-wizard-details--themed .appointment-wizard__input,
.appointments-page .appointment-wizard-details--themed .appointment-wizard__input[readonly],
.appointments-page .appointment-wizard-details--themed .appointment-wizard__input:read-only,
.appointments-page .appointment-wizard__custom-address--themed .appointment-wizard__input,
.appointments-page .appointment-wizard-summary--themed .appointment-wizard-summary__row {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-origin: border-box;
  background-clip: padding-box;
  overflow: hidden;
}

/*
 * Outer wizard boxes: 0.5px stroke #B5B5B5 — 80% top-right → 0% bottom-left.
 * Masked ::after ring only (never a fill layer — translucent fill would tint the whole card).
 */
.appointments-page .appointment-wizard-card.appointment-wizard-card--themed,
.appointments-page .appointment-wizard-dates--themed,
.appointments-page .appointment-wizard-details--themed,
.appointments-page .appointment-wizard-summary--themed,
.appointments-page .appointment-wizard__custom-address--themed {
  border: none !important;
  position: relative;
}

.appointments-page .appointment-wizard-card.appointment-wizard-card--themed::after,
.appointments-page .appointment-wizard-dates--themed::after,
.appointments-page .appointment-wizard-details--themed::after,
.appointments-page .appointment-wizard-summary--themed::after,
.appointments-page .appointment-wizard__custom-address--themed::after {
  background: linear-gradient(to bottom left, rgba(181, 181, 181, 0.8), rgba(181, 181, 181, 0));
  border-radius: inherit;
  content: "";
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 0.5px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.appointments-page .appointment-wizard-dates--themed .appointment-wizard__input:focus,
.appointments-page .appointment-wizard-details--themed .appointment-wizard__input:focus,
.appointments-page .appointment-wizard__custom-address--themed .appointment-wizard__input:focus {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.4), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none;
}

.appointments-page .appointment-wizard-dates--themed,
.appointments-page .appointment-wizard-details--themed,
.appointments-page .appointment-wizard-summary--themed,
.appointments-page .appointment-wizard__custom-address--themed {
  border-radius: calc(14 * var(--mt-u));
}

.appointments-page .appointment-wizard__custom-address--themed {
  box-sizing: border-box;
  padding: calc(14 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-card--themed.appointment-wizard-card--selected,
.appointments-page .appointment-wizard-card--themed.appointment-wizard-card--selected:hover {
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.35), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, 0.55);
}

.appointments-page .appointment-wizard-card__icon {
  background: rgba(245, 166, 35, 0.18);
  color: #f5a623;
  height: calc(38 * var(--mt-u));
  overflow: hidden;
  width: calc(38 * var(--mt-u));
}

.appointments-page .appointment-wizard-card__icon:has(.appointment-wizard-card__asset-icon) {
  background: transparent;
  padding: 0;
}

.appointments-page .appointment-wizard-card__asset-icon {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: fill;
  width: 100%;
}

.appointments-page .appointment-wizard-card__icon svg {
  height: calc(18 * var(--mt-u));
  width: calc(18 * var(--mt-u));
}

.appointments-page .appointment-wizard-card__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u) + 2pt);
  font-weight: 600;
  line-height: 1.2;
}

.appointments-page .appointment-wizard-card__meta,
.appointments-page .appointment-wizard-card__reward {
  font-size: calc(9 * var(--mt-u) + 2pt);
}

/* Wizard 3 / Partner boxes — Figma 64:1120 text + colorText, vertically centered */
.appointments-page .appointment-wizard-card--company {
  align-items: center;
  min-height: calc(52 * var(--mt-u));
  padding: calc(6 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__body {
  gap: calc(8 * var(--mt-u));
  justify-content: center;
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__title {
  font-size: calc(10 * var(--mt-u) + 2pt);
  font-weight: 600;
  line-height: 1.2;
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__reward {
  align-items: center;
  color: #b5b5b5;
  display: inline-flex;
  flex-wrap: wrap;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 700;
  gap: calc(4 * var(--mt-u));
  line-height: 1;
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__reward-label {
  color: #b5b5b5;
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__reward-gift {
  color: var(--mt-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(12 * var(--mt-u));
  letter-spacing: 0;
  line-height: 1;
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__reward-value {
  color: var(--mt-accent);
}

.appointments-page .appointment-wizard-card--company .appointment-wizard-card__chevron {
  color: #b5b5b5;
}

/* Wizard 4 / location boxes — Figma 64:1260 + 66:2048, text+icons vertically centered */
.appointments-page .appointment-wizard-card--location {
  align-items: center;
  min-height: calc(57 * var(--mt-u));
  padding: calc(6 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__body {
  gap: calc(3 * var(--mt-u));
  justify-content: center;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__title {
  color: #f8f8f8;
  font-size: calc(10 * var(--mt-u) + 2pt);
  font-weight: 600;
  line-height: 1.2;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__meta,
.appointments-page .appointment-wizard-card--location .appointment-wizard-card__address {
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u));
  font-weight: 400;
  line-height: 1.25;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__icon {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: inline-flex;
  flex-shrink: 0;
  height: calc(var(--celosys-c-icon-h) * var(--mt-u));
  justify-content: center;
  line-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: calc(var(--celosys-c-icon-w) * var(--mt-u));
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__title-badge {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__title-badge-circle {
  /* Fill #3C3C3B + same radial shape (NOT amber title-circle tokens) */
  background-color: #3c3c3b !important;
  background-image: radial-gradient(
    138% 160% at 13.75% 0%,
    #555553 50%,
    #3c3c3b 85%
  ) !important;
  inset: 0;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__title-badge-glyph {
  color: var(--mt-accent);
  font-size: calc(18 * var(--mt-u));
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__figma-icon {
  display: none;
}

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__icon svg,
.appointments-page .appointment-wizard-card--location .appointment-wizard-card__sf-svg {
  display: none;
}

.appointments-page .appointment-wizard-card--location.appointment-wizard-card--selected,
.appointments-page .appointment-wizard-card--location.appointment-wizard-card--selected:hover {
  border: none;
  box-shadow: none;
}

.appointments-page .appointment-wizard-card--location.appointment-wizard-card--themed.appointment-wizard-card--selected,
.appointments-page .appointment-wizard-card--location.appointment-wizard-card--themed.appointment-wizard-card--selected:hover {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.35), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg);
  border: none;
  box-shadow: none;
}

/* Meet&Trust primary CTA — Figma amber pill, black label (not purple) */
.appointments-page .appointment-wizard__actions {
  align-items: center;
  gap: calc(12 * var(--mt-u));
  justify-content: flex-end;
  margin-top: calc(14 * var(--mt-u));
  padding-bottom: calc(18 * var(--mt-u));
}

.appointments-page .appointment-wizard__btn--primary {
  background: var(--mt-accent);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: #000000;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--mt-u));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  min-height: calc(24 * var(--mt-u));
  min-width: calc(73 * var(--mt-u));
  padding: calc(6 * var(--mt-u)) calc(18 * var(--mt-u));
}

.appointments-page .appointment-wizard__btn--primary:hover,
.appointments-page .appointment-wizard__btn--primary:focus,
.appointments-page .appointment-wizard__btn--primary:focus-visible {
  background: #f7b84a;
  border: 0;
  color: #000000;
}

/* Keyboard: native interactive-widget=overlays-content only (no custom lift CSS). */

.appointments-page .appointment-wizard-card--location .appointment-wizard-card__chevron {
  background: transparent;
  color: #b5b5b5;
  font-size: calc(16 * var(--mt-u));
  height: auto;
  min-width: calc(12 * var(--mt-u));
  width: auto;
}

.appointments-page .appointment-wizard__custom-address {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--mt-u));
  margin-top: calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard__custom-address-fields {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard__custom-field {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--mt-u));
}

.appointments-page .appointment-wizard__custom-label {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

/* Wizard pages 5–6: labels +2pt (inputs also bumped above) */
.appointments-page .appointment-wizard-dates .appointment-wizard__custom-label,
.appointments-page .appointment-wizard-details .appointment-wizard__custom-label {
  font-size: calc(10 * var(--mt-u) + 2pt);
}

/* Step 6 details: error text above input + red field */
.appointments-page .appointment-wizard-details .appointment-wizard-date-field {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--mt-u));
}

.appointments-page .appointment-wizard__field-error:empty {
  display: none;
}

.appointments-page .appointment-wizard__field-error.field-validation-error:not(:empty),
.appointments-page .appointment-wizard-details .appointment-wizard__field-error {
  color: #ff6b6b;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.appointments-page .appointment-wizard__input.input-validation-error,
.appointments-page .appointment-wizard__input.input-validation-error:focus {
  border-color: #e76f51 !important;
  box-shadow: 0 0 0 calc(1.5 * var(--mt-u)) rgba(231, 111, 81, 0.35);
  outline: none;
}

/* Step 8 — Fertig/Danke replaces numbers+cards, same slide language */
.appointments-page .appointment-wizard-page--success {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 var(--celosys-bar-side) calc(16 * var(--mt-u));
  transform: translate3d(0, 0, 0);
  transition: transform 0.28s ease-out;
  width: 100%;
  will-change: transform;
}

.appointments-page .appointment-wizard-page--success.appointment-wizard__slide--enter-forward {
  transform: translate3d(100%, 0, 0);
}

.appointments-page .appointment-wizard-page--success.appointment-wizard__slide--enter-forward.appointment-wizard__slide--in {
  transform: translate3d(0, 0, 0);
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success {
  align-items: center;
  background: rgba(18, 16, 24, 0.72);
  border: 1px solid rgba(248, 248, 248, 0.12);
  border-radius: calc(22 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  margin: 0 auto calc(20 * var(--mt-u));
  max-width: 100%;
  min-height: calc(420 * var(--mt-u));
  padding: calc(36 * var(--mt-u)) calc(22 * var(--mt-u)) calc(32 * var(--mt-u));
  text-align: center;
  width: 100%;
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__icon {
  align-items: center;
  background: linear-gradient(180deg, #ffd56a 0%, #f5a623 55%, #d48c12 100%);
  border-radius: 50%;
  box-shadow: 0 calc(4 * var(--mt-u)) calc(14 * var(--mt-u)) rgba(0, 0, 0, 0.35);
  color: #f8f8f8;
  display: inline-flex;
  flex: 0 0 auto;
  height: calc(60 * var(--mt-u));
  justify-content: center;
  margin: 0 0 calc(22 * var(--mt-u));
  width: calc(60 * var(--mt-u));
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__check-svg {
  color: #f8f8f8;
  display: block;
  height: calc(30 * var(--mt-u));
  width: calc(30 * var(--mt-u));
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__eyebrow {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--mt-u));
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 calc(10 * var(--mt-u));
  text-transform: uppercase;
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--mt-u));
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__body {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 500;
  line-height: calc(14 * var(--mt-u));
  margin: 0 0 calc(28 * var(--mt-u));
  max-width: calc(300 * var(--mt-u));
}

.appointments-page .appointment-wizard-page--success .appointment-wizard-success__btn {
  align-items: center;
  background: var(--mt-accent, #f5a623);
  border: 0;
  border-radius: 999px;
  color: #000000;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(16 * var(--mt-u));
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.007px;
  line-height: 1;
  min-height: calc(37 * var(--mt-u));
  min-width: calc(152 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(22 * var(--mt-u));
  text-decoration: none;
}

.appointments-page.appointments-page--success-slide .appointments-tabs__panel:has(.appointment-wizard-page--success) {
  overflow-y: auto;
}

.appointments-page .appointment-wizard__custom-label span {
  color: var(--mt-accent);
}

.appointments-page .appointment-wizard__custom-address .appointment-wizard__input {
  border-radius: calc(10 * var(--mt-u));
  color: #b5b5b5;
  font-size: calc(10 * var(--mt-u));
  min-height: calc(35 * var(--mt-u));
  padding: calc(10 * var(--mt-u)) calc(12 * var(--mt-u));
}

.appointments-page .appointment-wizard__custom-address--themed .appointment-wizard__input {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.58)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(181, 181, 181, 0.35);
}

.appointments-page .appointment-wizard__custom-address--themed .appointment-wizard__input:focus {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(8, 8, 12, 0.4), rgba(8, 8, 12, 0.5)),
    var(--wizard-card-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: var(--mt-accent);
  box-shadow: none;
  color: #f8f8f8;
}

.appointments-page .appointment-wizard__custom-address .appointment-wizard__input::placeholder {
  color: #b5b5b5;
  opacity: 1;
}

.appointments-page .appointment-wizard-card__chevron {
  background: transparent;
  color: #f8f8f8;
  font-size: calc(18 * var(--mt-u));
  height: calc(20 * var(--mt-u));
  min-width: calc(16 * var(--mt-u));
  width: auto;
}

.appointments-new-placeholder {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: calc(24 * var(--mt-u)) calc(16 * var(--mt-u));
  text-align: center;
}

.appointments-new-placeholder__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--mt-u));
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 calc(8 * var(--mt-u));
}

.appointments-new-placeholder__hint {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--mt-u));
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  max-width: calc(260 * var(--mt-u));
}

/* List fold — only the cards scroll under fixed chrome */
.appointments-page--panel-scroll .appointments-fold__viewport {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--celosys-bar-side) calc(12 * var(--mt-u));
  scrollbar-gutter: stable;
  width: 100%;
}

.appointments-empty {
  color: #b5b5b5;
  font-size: calc(12 * var(--mt-u));
  margin: calc(24 * var(--mt-u)) 0;
  text-align: center;
}

/* Cards — draft gaps ~7–10; D gap via --celosys-d-gap (Gutscheine) */
.mt-appointment-list {
  display: grid;
  gap: calc(var(--celosys-d-gap) * var(--mt-u));
  margin: 0 auto;
  padding: 0 0 calc(8 * var(--mt-u));
  width: var(--celosys-bar-w);
  max-width: 100%;
}

.mt-appointment-card {
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-meet-plate-rx) * var(--mt-u, var(--celosys-u)))
      calc(var(--celosys-meet-plate-ry) * var(--mt-u, var(--celosys-u)))
      at calc(var(--celosys-meet-plate-cx) * var(--mt-u, var(--celosys-u)))
      calc(var(--celosys-meet-plate-cy) * var(--mt-u, var(--celosys-u))),
    var(--celosys-meet-plate-a) var(--celosys-meet-plate-stop-a),
    var(--celosys-meet-plate-b) var(--celosys-meet-plate-stop-b),
    var(--celosys-meet-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-meet-plate-radius) * var(--mt-u, var(--celosys-u)));
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.mt-appointment-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-meet-stroke-rgb), 1) 0%,
    rgba(var(--celosys-meet-stroke-rgb), 0) var(--celosys-meet-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-meet-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-meet-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.mt-appointment-card--plain,
.mt-appointment-card--confirmed {
  aspect-ratio: 350.5 / 105.3;
}

.mt-appointment-card__body {
  box-sizing: border-box;
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

/* Date / status chip 28.13×29.13 — Figma left badge */
.mt-appointment-card__date {
  align-items: center;
  border-radius: calc(6 * var(--mt-u));
  box-sizing: border-box;
  display: flex;
  height: calc(29.13 / 105.3 * 100%);
  justify-content: center;
  left: calc(11.84 / 350.5 * 100%);
  position: absolute;
  top: calc(35.61 / 105.3 * 100%);
  width: calc(28.13 / 350.5 * 100%);
  z-index: 3;
}

.mt-appointment-card__date--gold {
  background: linear-gradient(180deg, #ffd56a 0%, #f5a623 100%);
  color: #121018;
}

.mt-appointment-card__date--outline {
  background: #121018;
  border: 1.5px solid var(--mt-accent);
  color: var(--mt-accent);
}

.mt-appointment-card__date--reject,
.mt-appointment-card__date--wait {
  background: #121018;
  border: 1.5px solid var(--mt-accent);
  color: var(--mt-accent);
}

.mt-appointment-card__date--dark {
  background: #2a2a2e;
  color: #f8f8f8;
}

.mt-appointment-card__day {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12.8 * var(--mt-u));
  font-weight: 700;
  left: 50%;
  letter-spacing: -0.01em;
  line-height: 1;
  position: absolute;
  top: calc(9.71 / 29.13 * 100%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.mt-appointment-card__month {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(7.7 * var(--mt-u));
  font-weight: 600;
  left: 50%;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  top: calc(20.12 / 29.13 * 100%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.mt-appointment-card__wait-glyph,
.mt-appointment-card__reject-glyph {
  /* Fill chip; flex-center — avoids Unicode side-bearing bias (×/◔ sat to the right) */
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.mt-appointment-card__reject-glyph {
  color: inherit;
  font-size: calc(15 * var(--mt-u));
  font-weight: 350;
}

.mt-appointment-card__wait-glyph::before {
  aspect-ratio: 1;
  background: conic-gradient(from 90deg, var(--mt-accent) 0 90deg, transparent 0);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mt-accent);
  content: "";
  display: block;
  width: 56%;
}

.mt-appointment-card__company {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--mt-u));
  font-weight: 700;
  left: calc(50 / 350.5 * 100%);
  line-height: 1;
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: calc(120 / 350.5 * 100%);
  text-overflow: ellipsis;
  /* Figma text top ≈ 9.6–10 (center 16.6 minus half of 14px) — was 12.95% + translateY(-50%) = too high */
  top: calc(10 / 105.3 * 100%);
  white-space: nowrap;
}

.mt-appointment-card__ticket {
  align-items: baseline;
  color: #f8f8f8;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  gap: calc(4 * var(--mt-u));
  line-height: 1;
  margin: 0;
  position: absolute;
  right: calc(10 / 350.5 * 100%);
  top: calc(12 / 105.3 * 100%);
  white-space: nowrap;
  z-index: 3;
}

.mt-appointment-card__ticket-label {
  font-weight: 400;
}

.mt-appointment-card__ticket-id {
  font-weight: 700;
}

.mt-appointment-card__tools {
  align-items: center;
  color: #f8f8f8;
  display: inline-flex;
  gap: calc(10 * var(--mt-u));
  position: absolute;
  right: calc(10 / 350.5 * 100%);
  top: calc(50 / 105.3 * 100%);
  transform: translateY(-50%);
  z-index: 3;
}

.mt-appointment-card__info,
.mt-appointment-card__chevron {
  color: inherit;
  display: inline-flex;
  font-size: calc(16 * var(--mt-u));
  line-height: 1;
}

.mt-appointment-card__qr .mt-sf-icon {
  font-size: calc(18 * var(--mt-u));
}

.mt-appointment-card__rows {
  left: calc(50 / 350.5 * 100%);
  position: absolute;
  right: calc(48 / 350.5 * 100%);
  /* First row center ≈ 35.6 → top of 10px line ≈ 30.6 */
  top: calc(30.6 / 105.3 * 100%);
}

.mt-appointment-card__rows--pending {
  /* Figma pending: first row center ≈ 42 */
  top: calc(37 / 105.3 * 100%);
}

/* Bestätigt: date chip + QR/chevron vertically centered in the card */
.mt-appointment-card--confirmed .mt-appointment-card__date {
  top: 50%;
  transform: translateY(-50%);
}

.mt-appointment-card--confirmed .mt-appointment-card__tools {
  color: #f8f8f8;
  top: 50%;
  transform: translateY(-50%);
}

.mt-appointment-card--confirmed .mt-appointment-card__status {
  bottom: calc(6 / 105.3 * 100%);
}

.mt-appointment-card__qr {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  padding: 0;
}

.mt-appointment-card__info .mt-sf-icon,
.mt-appointment-card__info.mt-sf-icon,
.mt-appointment-card__chevron.mt-sf-icon,
.mt-appointment-card__qr .mt-sf-icon {
  font-size: calc(20 * var(--mt-u));
  line-height: 1;
}

.mt-appointment-card__row {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--mt-u));
  font-weight: 400;
  gap: calc(8 * var(--mt-u));
  line-height: 1;
  margin: 0 0 calc(6 * var(--mt-u));
}

.mt-appointment-card__row--strong {
  font-weight: 700;
}

/* Preferred dates CSV must stay one line — not bold */
.mt-appointment-card__row--dates {
  font-weight: 400;
  white-space: nowrap;
}

.mt-appointment-card__row--broker {
  color: var(--mt-accent);
  font-weight: 700;
}

.mt-appointment-card__icon {
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(12 * var(--mt-u));
  line-height: 1;
  width: calc(14 * var(--mt-u));
}

/* Status pills — same height on all 4 states; hug icon+label with slight pad */
.mt-appointment-card__status {
  align-items: center;
  border-radius: 999px;
  bottom: calc(8 / 105.3 * 100%);
  box-sizing: border-box;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--mt-u));
  font-weight: 600;
  gap: calc(4 * var(--mt-u));
  height: calc(16 * var(--mt-u));
  justify-content: center;
  line-height: 1;
  padding: 0 calc(9 * var(--mt-u));
  position: absolute;
  right: calc(10.2 / 350.5 * 100%);
  top: auto;
  white-space: nowrap;
  z-index: 3;
}

.mt-appointment-card__status-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(9 * var(--mt-u));
  height: 1em;
  justify-content: center;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.mt-appointment-card__status > span {
  position: relative;
  z-index: 1;
}

.mt-appointment-card__status--confirmed {
  background: #121018;
  border: 0;
  color: #f8f8f8;
  min-width: calc(92.53 * var(--mt-u));
}

.mt-appointment-card__status--pending {
  background: #121018;
  border: 1.5px solid #b5b5b5;
  color: #b5b5b5;
  font-weight: 400;
  min-width: calc(127 * var(--mt-u));
  padding: 0 calc(8 * var(--mt-u));
}

.mt-appointment-card__status--pending .mt-appointment-card__status-icon {
  color: var(--mt-accent);
}

.mt-appointment-card__status--done,
.mt-appointment-card__status--rejected {
  background: var(--mt-accent);
  border: 0;
  color: #000;
  min-width: calc(92.53 * var(--mt-u));
}

.mt-appointment-card__status--done {
  min-width: calc(97 * var(--mt-u));
}

.mt-appointment-card__status--done .mt-appointment-card__status-icon,
.mt-appointment-card__status--rejected .mt-appointment-card__status-icon {
  color: #000;
}

.mt-appointment-card__row--dates span:last-child {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-appointment-card--openable {
  cursor: pointer;
}

/* Bestätigt QR overlay — Figma 64:591 / panel 64:735 (351×633 @ 390).
   Opens: bottom-nav slides down, then sheet rises and docks to bottom edge. */
/*
 * celosys-overlay-sheet — ONE portal overlay chrome (Meet&Trust QR model).
 * Also: .appointment-qr-sheet (alias), .gift-card-sheet / .bonus-card-sheet when paired.
 */
.celosys-overlay-sheet.stamp-card-sheet,
.appointment-qr-sheet.stamp-card-sheet {
  z-index: 12050;
}

.celosys-overlay-sheet .stamp-card-sheet__backdrop,
.appointment-qr-sheet .stamp-card-sheet__backdrop {
  background: var(--celosys-overlay-backdrop);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.celosys-overlay-sheet.celosys-overlay-sheet--open .stamp-card-sheet__backdrop,
.appointment-qr-sheet.appointment-qr-sheet--open .stamp-card-sheet__backdrop,
.appointment-qr-sheet.celosys-overlay-sheet--open .stamp-card-sheet__backdrop {
  opacity: 1;
}

.celosys-overlay-sheet__panel,
.appointment-qr-sheet__panel,
.celosys-overlay-sheet .stamp-card-sheet__panel,
.celosys-overlay-sheet .gift-card-sheet__panel {
  --aq-u: var(--celosys-u);
  background: var(--celosys-overlay-panel-bg);
  border: 0;
  border-radius: var(--celosys-overlay-radius) var(--celosys-overlay-radius) 0 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: var(--celosys-overlay-panel-h);
  left: 50%;
  margin: 0;
  max-height: var(--celosys-overlay-panel-h);
  max-width: var(--celosys-overlay-panel-w);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(18 * var(--aq-u) + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  position: absolute;
  top: auto;
  transform: translateX(-50%) translateY(110%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  width: var(--celosys-overlay-panel-w);
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.celosys-overlay-sheet.celosys-overlay-sheet--open .celosys-overlay-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--open .stamp-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--open .gift-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--open .appointment-qr-sheet__panel,
.appointment-qr-sheet.appointment-qr-sheet--open .appointment-qr-sheet__panel,
.appointment-qr-sheet.celosys-overlay-sheet--open .appointment-qr-sheet__panel {
  transform: translateX(-50%) translateY(0);
}

.celosys-overlay-sheet.celosys-overlay-sheet--stack-push {
  z-index: 12060;
}

.celosys-overlay-sheet.celosys-overlay-sheet--stack-push.celosys-overlay-sheet--ready:not(.celosys-overlay-sheet--open) .celosys-overlay-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--stack-push.celosys-overlay-sheet--ready:not(.celosys-overlay-sheet--open) .stamp-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--stack-push.celosys-overlay-sheet--ready:not(.celosys-overlay-sheet--open) .gift-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--stack-push.celosys-overlay-sheet--ready:not(.celosys-overlay-sheet--open) .appointment-qr-sheet__panel {
  transform: translateX(50%) translateY(0);
}

.celosys-overlay-sheet.celosys-overlay-sheet--under.celosys-overlay-sheet--open .celosys-overlay-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--under.celosys-overlay-sheet--open .stamp-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--under.celosys-overlay-sheet--open .gift-card-sheet__panel,
.celosys-overlay-sheet.celosys-overlay-sheet--under.celosys-overlay-sheet--open .appointment-qr-sheet__panel {
  filter: brightness(0.9);
  transform: translateX(calc(-50% - 7%)) translateY(0);
  transition: filter 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gift/Bonus sheets: docked overlay panel (not fullscreen floating). */
.celosys-overlay-sheet.gift-card-sheet .gift-card-sheet__panel {
  background: var(--celosys-overlay-panel-bg);
  border: 0;
  border-radius: var(--celosys-overlay-radius) var(--celosys-overlay-radius) 0 0;
  bottom: 0;
  box-shadow: none;
  height: var(--celosys-overlay-panel-h);
  left: 50%;
  max-height: var(--celosys-overlay-panel-h);
  max-width: var(--celosys-overlay-panel-w);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 calc(18 * var(--celosys-u) + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  position: absolute;
  top: auto;
  transform: translateX(-50%) translateY(110%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  width: var(--celosys-overlay-panel-w);
}

.celosys-overlay-sheet.gift-card-sheet.celosys-overlay-sheet--open .gift-card-sheet__panel {
  transform: translateX(-50%) translateY(0);
}

.celosys-overlay-sheet.gift-card-sheet .gift-card-sheet__fixed {
  padding-top: calc(16 * var(--celosys-u));
}

.celosys-overlay-sheet.gift-card-sheet:not(.bonus-card-sheet) .bonus-card-sheet__toolbar {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  width: var(--gift-sheet-card-w);
}

.celosys-overlay-sheet.gift-card-sheet:not(.bonus-card-sheet) .bonus-card-sheet__close {
  color: #b5b5b5;
  height: auto;
  margin: 0 calc(6.37 / 350 * 100%) calc(6.71 / 390 * 100cqw) 0;
  position: relative;
  right: auto;
  top: auto;
  width: calc(25.75 / 350 * 100%);
}

.celosys-overlay-sheet.gift-card-sheet .stamp-card-sheet__backdrop {
  background: var(--celosys-overlay-backdrop);
}

/* Bottom nav exits downward before any celosys overlay rises. */
body.appointment-qr-nav-hiding .celosys-bottom-nav,
body.celosys-overlay-nav-hiding .celosys-bottom-nav {
  pointer-events: none;
  transform: translateY(120%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Meet&Trust + Tickets wizards: hide panel E (bottom nav) like an overlay */
body.celosys-wizard-active .celosys-bottom-nav {
  pointer-events: none;
  transform: translateY(120%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.celosys-wizard-active .appointments-page .appointment-wizard__form--card-scroll .appointment-wizard__actions,
body.celosys-wizard-active .tickets-events-page .appointment-wizard__form--card-scroll .appointment-wizard__actions {
  padding-bottom: calc(16 * var(--mt-u) + env(safe-area-inset-bottom, 0px));
}

body.celosys-wizard-active .appointments-page .appointment-wizard__slide,
body.celosys-wizard-active .tickets-events-page .appointment-wizard__slide {
  scroll-padding-bottom: calc(16 * var(--mt-u) + env(safe-area-inset-bottom, 0px));
}

body:not(.appointment-qr-nav-hiding):not(.celosys-overlay-nav-hiding):not(.celosys-wizard-active) .celosys-bottom-nav {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.appointment-qr-sheet__hero {
  aspect-ratio: 350 / 170.23;
  background: #121018;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.appointment-qr-sheet__hero--fallback {
  background: linear-gradient(165deg, #2a2418 0%, #121018 55%, #0a0a0c 100%);
}

.appointment-qr-sheet__hero-bg {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.appointment-qr-sheet__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  display: inline-flex;
  font-size: calc(20 * var(--aq-u));
  height: calc(28 * var(--aq-u));
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: calc(10 * var(--aq-u));
  top: calc(12 * var(--aq-u));
  width: calc(28 * var(--aq-u));
  z-index: 3;
}

.appointment-qr-sheet__logo {
  background: #0a0a0a;
  border-radius: 50%;
  display: block;
  height: calc(67.5 * var(--aq-u));
  left: calc(10 * var(--aq-u));
  object-fit: cover;
  position: absolute;
  top: calc(12 * var(--aq-u));
  width: calc(67.5 * var(--aq-u));
  z-index: 2;
}

.appointment-qr-sheet__title {
  bottom: calc(12 * var(--aq-u));
  color: #f8f8f8;
  display: -webkit-box;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--aq-u));
  font-weight: 600;
  left: calc(12 * var(--aq-u));
  line-height: 1.15;
  margin: 0;
  max-width: calc(326 * var(--aq-u));
  overflow: hidden;
  position: absolute;
  right: calc(12 * var(--aq-u));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  z-index: 2;
}

.appointment-qr-sheet__rows {
  display: grid;
  gap: calc(10 * var(--aq-u));
  margin: calc(18 * var(--aq-u)) 0 0;
  padding: 0 calc(18 * var(--aq-u));
}

.appointment-qr-sheet__row {
  align-items: flex-start;
  color: #b5b5b5;
  display: grid;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--aq-u));
  font-weight: 400;
  gap: calc(12 * var(--aq-u));
  grid-template-columns: calc(16 * var(--aq-u)) minmax(0, 1fr);
  line-height: 1.25;
  margin: 0;
}

.appointment-qr-sheet__row--strong {
  color: #b5b5b5;
  font-weight: 700;
}

.appointment-qr-sheet__row--broker,
.appointment-qr-sheet__row--broker .appointment-qr-sheet__icon {
  color: #f5a623;
  font-weight: 700;
}

.appointment-qr-sheet__icon {
  color: inherit;
  display: block;
  font-size: calc(16 * var(--aq-u));
  line-height: 1;
  margin-top: calc(1 * var(--aq-u));
  text-align: center;
}

.appointment-qr-sheet__qr {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: calc(22 * var(--aq-u)) 0 0;
  padding: 0;
}

.appointment-qr-sheet__qr-image {
  background: transparent;
  border-radius: calc(8 * var(--aq-u));
  display: block;
  height: calc(198 * var(--aq-u));
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0;
  width: calc(198 * var(--aq-u));
}

.appointment-qr-sheet__hint {
  color: #f5a623;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--aq-u));
  font-weight: 600;
  line-height: 1;
  margin: calc(10 * var(--aq-u)) 0 0;
  text-align: center;
}

.appointment-qr-sheet__route {
  align-items: center;
  background: #f5a623;
  border-radius: 999px;
  color: #121018;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9.4 * var(--aq-u));
  font-weight: 700;
  gap: calc(6 * var(--aq-u));
  justify-content: center;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: calc(16 * var(--aq-u)) auto 0;
  min-height: calc(25 * var(--aq-u));
  min-width: calc(148 * var(--aq-u));
  padding: calc(6 * var(--aq-u)) calc(18 * var(--aq-u));
  text-decoration: none;
  text-transform: uppercase;
}

.appointment-qr-sheet__route .mt-sf-icon {
  font-size: calc(12 * var(--aq-u));
  line-height: 1;
}

.appointment-qr-sheet__route:hover,
.appointment-qr-sheet__route:focus-visible {
  color: #121018;
  filter: brightness(1.06);
  text-decoration: none;
}

/* Pending / rejected Meine Termine overlays — same chrome, summary or reject body */
.appointment-qr-sheet__summary-wrap,
.appointment-qr-sheet__reject-wrap {
  box-sizing: border-box;
  margin: calc(18 * var(--aq-u)) 0 0;
  padding: 0 calc(18 * var(--aq-u));
}

.appointment-qr-sheet__summary-heading,
.appointment-qr-sheet__reject-heading {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--aq-u));
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 calc(12 * var(--aq-u));
}

.appointment-qr-sheet__summary {
  background: rgba(18, 16, 24, 0.72);
  border-radius: calc(14 * var(--aq-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--aq-u));
  margin: 0;
  padding: calc(14 * var(--aq-u)) calc(12 * var(--aq-u));
}

.appointment-qr-sheet__summary .appointment-wizard-summary__row {
  background: rgba(18, 16, 24, 0.55);
  border: 1px solid rgba(181, 181, 181, 0.25);
  border-radius: calc(10 * var(--aq-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--aq-u));
  justify-content: center;
  min-height: calc(43.5 * var(--aq-u));
  padding: calc(8 * var(--aq-u)) calc(12 * var(--aq-u));
}

.appointment-qr-sheet__summary .appointment-wizard-summary__row dt {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--aq-u));
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.appointment-qr-sheet__summary .appointment-wizard-summary__row dd {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(10 * var(--aq-u));
  font-weight: 400;
  line-height: calc(14 * var(--aq-u));
  margin: 0;
}

.appointment-qr-sheet__summary .appointment-wizard-summary__reward {
  align-items: center;
  color: var(--mt-accent, #f5a623);
  display: inline-flex;
  font-weight: 700;
  gap: calc(4 * var(--aq-u));
  line-height: 1;
}

.appointment-qr-sheet__summary .appointment-wizard-summary__reward-gift {
  color: var(--mt-accent, #f5a623);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(12 * var(--aq-u));
  line-height: 1;
}

.appointment-qr-sheet__summary .appointment-wizard-summary__reward-value {
  color: var(--mt-accent, #f5a623);
  font-size: calc(10 * var(--aq-u));
  font-weight: 700;
  line-height: 1;
}

.appointment-qr-sheet__reject-body {
  background: rgba(18, 16, 24, 0.55);
  border: 1px solid rgba(181, 181, 181, 0.25);
  border-radius: calc(10 * var(--aq-u));
  box-sizing: border-box;
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--aq-u));
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  padding: calc(14 * var(--aq-u)) calc(12 * var(--aq-u));
  white-space: pre-wrap;
}

.appointment-qr-sheet__rows--reject-meta {
  margin-top: calc(18 * var(--aq-u));
  padding: 0;
}

/* Tickets Events sheets — coral accents (Bestätigt overlay clone). */
.appointment-qr-sheet--tickets .appointment-qr-sheet__hero--fallback {
  background: linear-gradient(165deg, #3a221c 0%, #121018 55%, #0a0a0c 100%);
}

.appointment-qr-sheet--tickets .appointment-qr-sheet__hint {
  color: #e76f51;
}

.appointment-qr-sheet--tickets .appointment-qr-sheet__route {
  background: #e76f51;
}

.appointment-qr-sheet--tickets .appointment-qr-sheet__route + .appointment-qr-sheet__route {
  margin-top: calc(8 * var(--aq-u));
}

/* Ticket buy overlay — Partner finden sheet; BODY scrolls (iframe sized to content). */
.ticket-buy-modal .ticket-buy-modal__dialog {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 4.25rem) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 4.25rem) !important;
}

.ticket-buy-modal .ticket-buy-modal__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

.ticket-buy-modal__body {
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  padding: calc(6 * var(--where-u, var(--celosys-u))) 0 calc(12 * var(--where-u, var(--celosys-u))) !important;
  touch-action: pan-y;
}

.ticket-buy-modal__frame {
  background: #0b0b0b;
  border: 0;
  border-radius: calc(12 * var(--where-u, var(--celosys-u)));
  display: block;
  min-height: calc(60dvh);
  width: 100%;
}

/* Embed page grows with content — parent modal body is the scroller. */
html:has(body.celosys-app--ticket-embed),
body.celosys-app--ticket-embed {
  background-color: #0b0b0b !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.celosys-app--ticket-embed .ticket-embed-main {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 0 calc(16 * var(--celosys-u));
  width: 100%;
}

.portal-page--ticket-embed {
  margin: 0;
  padding: 0 calc(4 * var(--celosys-u));
}

.portal-page--ticket-embed .ticket-event-hero {
  border-radius: calc(12 * var(--celosys-u));
  overflow: hidden;
}


/* Credits TWINT pay overlay — Figma 149:7714 on celosys-overlay-sheet */
.credits-twint-pay {
  --ctp-u: var(--celosys-u);
}

.credits-twint-pay__close {
  background: transparent;
  border: 0;
  color: #1a1a1a;
  display: grid;
  font-size: calc(20 * var(--ctp-u));
  height: calc(32 * var(--ctp-u));
  place-items: center;
  position: absolute;
  right: calc(15 * var(--ctp-u));
  top: calc(10 * var(--ctp-u));
  width: calc(32 * var(--ctp-u));
  z-index: 2;
}

.credits-twint-pay__close .home-sf-icon {
  color: inherit;
  line-height: 1;
}

.credits-twint-pay__header {
  align-items: center;
  display: flex;
  gap: calc(11 * var(--ctp-u));
  margin: calc(23 * var(--ctp-u)) 0 0 calc(17 * var(--ctp-u));
  min-height: calc(46 * var(--ctp-u));
  padding-right: calc(48 * var(--ctp-u));
}

.credits-twint-pay__logo {
  display: block;
  flex: 0 0 auto;
  height: calc(45.66 * var(--ctp-u));
  object-fit: contain;
  width: calc(40.04 * var(--ctp-u));
}

.credits-twint-pay__logo-icon {
  color: #b0358b;
  display: grid;
  flex: 0 0 auto;
  font-size: calc(36 * var(--ctp-u));
  height: calc(46 * var(--ctp-u));
  line-height: 1;
  place-items: center;
  width: calc(40 * var(--ctp-u));
}

.credits-twint-pay__title {
  color: #f9f9f9;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--ctp-u));
  font-weight: 600;
  line-height: calc(20 * var(--ctp-u));
  margin: 0;
}

.credits-twint-pay__body {
  box-sizing: border-box;
  margin: calc(46 * var(--ctp-u)) calc(20 * var(--ctp-u)) 0;
}

.credits-twint-pay__amount {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--ctp-u));
  font-weight: 700;
  line-height: calc(18 * var(--ctp-u));
  margin: 0 0 calc(8 * var(--ctp-u));
}

.credits-twint-pay__hint {
  align-items: flex-start;
  color: #b5b5b5;
  display: flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--ctp-u));
  font-weight: 400;
  gap: calc(10 * var(--ctp-u));
  line-height: calc(12 * var(--ctp-u));
  margin: 0;
}

.credits-twint-pay__hint-icon {
  color: #b5b5b5;
  flex: 0 0 auto;
  font-size: calc(14 * var(--ctp-u));
  line-height: 1;
  margin-top: calc(-1 * var(--ctp-u));
}

.credits-twint-pay__note {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--ctp-u));
  line-height: 1.35;
  margin: calc(18 * var(--ctp-u)) 0 0;
}

.credits-twint-pay__confirm {
  background: #b0358b;
  border: 0;
  border-radius: calc(15 * var(--ctp-u));
  color: #f8f8f8;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--ctp-u));
  font-weight: 600;
  height: calc(23 * var(--ctp-u));
  letter-spacing: -0.004px;
  line-height: calc(13 * var(--ctp-u));
  margin: calc(122 * var(--ctp-u)) auto 0;
  padding: 0;
  text-align: center;
  width: calc(169 * var(--ctp-u));
}

.credits-twint-pay__cancel {
  background: transparent;
  border: 1px solid #b5b5b5;
  border-radius: calc(15 * var(--ctp-u));
  color: #b5b5b5;
  display: block;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12.2 * var(--ctp-u));
  font-weight: 600;
  height: calc(21 * var(--ctp-u));
  letter-spacing: 0.0235px;
  line-height: calc(12.15 * var(--ctp-u));
  margin: calc(51 * var(--ctp-u)) auto 0;
  padding: 0;
  text-align: center;
  width: calc(89 * var(--ctp-u));
}

/* === PNG→CSS gradients (shell-v256) ====================================== */

/* Tx rows + package cards (Credits/Punkte) — same Partner plate + stroke as stamp/hub D boxes */
.credits-tx-row,
.punkte-tx-row,
.credits-package-card,
.punkte-package-card {
  --tx-plate-u: var(--credits-u, var(--punkte-u, var(--celosys-u)));
  background-color: transparent;
  background-image: radial-gradient(
    calc(var(--celosys-partner-plate-rx) * var(--tx-plate-u))
      calc(var(--celosys-partner-plate-ry) * var(--tx-plate-u))
      at calc(var(--celosys-partner-plate-cx) * var(--tx-plate-u))
      calc(var(--celosys-partner-plate-cy) * var(--tx-plate-u)),
    var(--celosys-partner-plate-a) var(--celosys-partner-plate-stop-a),
    var(--celosys-partner-plate-b) var(--celosys-partner-plate-stop-b),
    var(--celosys-partner-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--tx-plate-u));
  isolation: isolate;
}

.credits-tx-row::before,
.punkte-tx-row::before,
.credits-package-card::before,
.punkte-package-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-partner-stroke-rgb), 1) 0%,
    rgba(var(--celosys-partner-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.credits-tx-row > *,
.punkte-tx-row > *,
.credits-package-card > *,
.punkte-package-card > * {
  z-index: 1;
}

/* P09 — title icon circle (Figma 204:528). Absolute fill behind glyph; color via --celosys-title-circle-*. */
.celosys-title-circle,
.stamp-cards-page > .stamp-cards-page__chrome .credits-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .punkte-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .stamps-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .bonus-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .aktionen-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .gift-cards-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .appointments-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-page__heading-icon-circle,
.stamp-cards-page > .stamp-cards-page__chrome .tickets-events-page__heading-icon-circle,
.partner-hub__heading-icon-circle {
  background-image: radial-gradient(
    138% 160% at 13.75% 0%,
    var(--celosys-title-circle-a) 50%,
    var(--celosys-title-circle-b) 85%
  );
  border-radius: 50%;
  display: block;
  height: 100%;
  inset: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* P21 — TWINT / redeem capsule = same as P08 */
.credits-package-card__twint-bg,
.punkte-package-card__twint-bg {
  background: #b0358b;
  border-radius: calc(15 * var(--credits-u, var(--punkte-u, var(--celosys-u))));
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.punkte-package-card__twint-bg {
  border-radius: calc(15 * var(--punkte-u));
}

/* P16 — Punkte/Credits package coin (Figma 299:577 charcoal + neon ring) */
.punkte-package-card__coin-bg,
.credits-package-card__coin-bg {
  background-image: radial-gradient(
    100% 100% at 0% 0%,
    rgba(60, 60, 59, 1) 28.943%,
    rgba(60, 60, 59, 0.2) 100%
  );
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* P13/P14 — shop logo ring (Stempelkarte model + CSS neon halo) */
.stamp-offer__logo-ring,
.stamp-plate__logo-ring,
.gift-cards-page .gift-card__logo-ring,
.gift-card-sheet__hero .gift-card-sheet__logo-ring,
.punkte-package-card__coin-ring,
.credits-package-card__coin-ring {
  background: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  inset: calc(var(--stamp-logo-ring-inset, var(--celosys-shop-logo-ring-inset)) * 100%);
  object-fit: unset;
  pointer-events: none;
  position: absolute;
}

.stamp-offer__logo-ring,
.stamp-plate__logo-ring,
.punkte-package-card__coin-ring,
.credits-package-card__coin-ring {
  border: 1.5px solid rgba(224, 100, 185, 0.95);
  box-shadow:
    0 0 1px rgba(255, 180, 230, 0.9),
    0 0 6px rgba(var(--celosys-shop-logo-neon-magenta), 0.95),
    0 0 14px rgba(var(--celosys-shop-logo-neon-magenta), 0.55),
    0 0 22px rgba(var(--celosys-shop-logo-neon-magenta), 0.28),
    inset 0 0 8px rgba(var(--celosys-shop-logo-neon-magenta), 0.35);
  z-index: 1;
}

.punkte-package-card__coin-ring,
.credits-package-card__coin-ring {
  /* Full disc edge — not the inset used on stamp logo wraps */
  inset: 0;
}

.gift-cards-page .gift-card__logo-ring,
.gift-card-sheet__hero .gift-card-sheet__logo-ring {
  border: 1.5px solid rgba(160, 150, 220, 0.95);
  box-shadow:
    0 0 1px rgba(210, 200, 255, 0.9),
    0 0 6px rgba(var(--celosys-shop-logo-neon-lavendel), 0.95),
    0 0 14px rgba(var(--celosys-shop-logo-neon-lavendel), 0.55),
    0 0 22px rgba(var(--celosys-shop-logo-neon-lavendel), 0.28),
    inset 0 0 8px rgba(var(--celosys-shop-logo-neon-lavendel), 0.35);
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .stamp-offer__logo-ring,
  .stamp-plate__logo-ring,
  .gift-cards-page .gift-card__logo-ring,
  .gift-card-sheet__hero .gift-card-sheet__logo-ring,
  .punkte-package-card__coin-ring,
  .credits-package-card__coin-ring {
    animation: celosys-shop-logo-neon-pulse 2.8s ease-in-out infinite;
  }
}

@keyframes celosys-shop-logo-neon-pulse {
  0%,
  100% {
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    filter: brightness(1.12);
    opacity: 0.92;
  }
}

/* P15 — grey rule */
.gift-cards-trennlinie {
  background: #353535;
  display: block;
  height: 1px;
  width: 100%;
}

/* P10+P11 — gift summary plate (fill + stroke); glitter PNG kept */
.gift-cards-summary__plate {
  background-image: radial-gradient(
    calc(var(--celosys-gutscheine-plate-rx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-ry) * var(--gift-u, var(--celosys-u)))
      at calc(var(--celosys-gutscheine-plate-cx) * var(--gift-u, var(--celosys-u)))
      calc(var(--celosys-gutscheine-plate-cy) * var(--gift-u, var(--celosys-u))),
    var(--celosys-gutscheine-plate-a) var(--celosys-gutscheine-plate-stop-a),
    var(--celosys-gutscheine-plate-b) var(--celosys-gutscheine-plate-stop-b),
    var(--celosys-gutscheine-plate-c) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: calc(var(--celosys-gutscheine-plate-radius) * var(--gift-u, var(--celosys-u)));
  box-sizing: border-box;
  display: block;
  height: calc(83.11 / 87.99 * 100%);
  left: calc(1.93 / 351.93 * 100%);
  object-fit: unset;
  pointer-events: none;
  position: absolute;
  top: calc(4.88 / 87.99 * 100%);
  width: calc(350 / 351.93 * 100%);
  z-index: 2;
}

.gift-cards-summary__plate::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--celosys-gutscheine-stroke-rgb), 1) 0%,
    rgba(var(--celosys-gutscheine-stroke-rgb), 0) var(--celosys-gutscheine-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-gutscheine-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-gutscheine-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.gift-cards-summary__base {
  display: none !important;
}

/* P07 — Meet&Trust amber thumb (Figma 215:533 remap) */
.appointments-page .appointments-seg__thumb {
  --celosys-seg-thumb-a: rgba(245, 166, 35, 1);
  --celosys-seg-thumb-b: rgba(245, 166, 35, 0.6);
  --celosys-seg-thumb-c: rgba(208, 141, 29, 0.5);
  --celosys-seg-thumb-d: rgba(156, 106, 22, 0.4);
  --celosys-seg-thumb-e: rgba(78, 53, 11, 0.3);
  --celosys-seg-thumb-f: rgba(0, 0, 0, 0.2);
  background: none !important;
  background-color: transparent !important;
  background-image: radial-gradient(
    106.6% 244.3% at 0% 0%,
    var(--celosys-seg-thumb-a) 0%,
    var(--celosys-seg-thumb-b) 49.648%,
    var(--celosys-seg-thumb-c) 62.236%,
    var(--celosys-seg-thumb-d) 74.824%,
    var(--celosys-seg-thumb-e) 87.412%,
    var(--celosys-seg-thumb-f) 100%
  ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-radius: calc(var(--celosys-seg-thumb-radius) * var(--mt-u, var(--celosys-u)));
}

.appointments-page .appointments-seg__thumb img {
  display: none !important;
}

/* ——— Profile — partner-hub C chrome + charcoal info plate (#363635) ——— */
.profile-page .partner-hub__heading-row {
  align-items: center;
  width: 100%;
}

.profile-page .partner-hub__title {
  flex: 1;
  min-width: 0;
}

.profile-page__info-btn {
  color: #c34cae;
  flex-shrink: 0;
  margin-left: auto;
}

.profile-page__info-icon {
  font-size: calc(var(--celosys-c-info-icon) * var(--celosys-u));
  line-height: 1;
}

.profile-page__alert {
  margin: 0 auto calc(var(--celosys-d-gap) * var(--celosys-u));
  max-width: var(--celosys-card-w);
  width: var(--celosys-card-w);
}

.profile-page__cards {
  margin-top: 0;
}

.profile-card {
  --profile-plate-u: var(--hu, var(--celosys-u));
  --profile-stroke-rgb: 54, 54, 53;
  aspect-ratio: auto;
  background-color: transparent;
  background-image: radial-gradient(
    farthest-corner at 100% 0%,
    rgba(54, 54, 53, 0.8) 0%,
    rgba(54, 54, 53, 0) 100%
  );
  border-radius: calc(var(--celosys-partner-plate-radius) * var(--profile-plate-u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: calc(14 * var(--profile-plate-u)) calc(12 * var(--profile-plate-u)) calc(16 * var(--profile-plate-u));
  position: relative;
  width: 100%;
}

.profile-card::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--profile-stroke-rgb), 1) 0%,
    rgba(var(--profile-stroke-rgb), 0) var(--celosys-partner-stroke-fade-at)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.profile-card__row {
  border-bottom: 1px solid rgba(181, 181, 181, 0.22);
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--profile-plate-u));
  padding: calc(10 * var(--profile-plate-u)) 0;
  position: relative;
  z-index: 1;
}

.profile-card__row--last {
  border-bottom: 0;
}

.profile-card__label {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(15 * var(--profile-plate-u));
  font-weight: 700;
  line-height: calc(15 * var(--profile-plate-u));
  margin: 0;
}

.profile-card__value {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--profile-plate-u));
  font-weight: 500;
  line-height: calc(13 * var(--profile-plate-u));
  margin: 0;
  word-break: break-word;
}

.profile-card__value--verified {
  color: #2eb7a5;
}

.profile-card__value--unverified {
  color: rgba(255, 255, 255, 0.55);
}

.profile-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(6 * var(--profile-plate-u));
  position: relative;
  z-index: 1;
}

.profile-card__edit {
  background: transparent;
  border: 0.7px solid #b0358b;
  border-radius: calc(6 * var(--profile-plate-u));
  color: #b0358b;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--profile-plate-u));
  font-weight: 500;
  line-height: 1;
  min-height: calc(14 * var(--profile-plate-u));
  padding: calc(4 * var(--profile-plate-u)) calc(14 * var(--profile-plate-u));
}

.profile-edit-sheet__panel {
  --profile-edit-u: var(--celosys-u);
}

.profile-edit-sheet {
  box-sizing: border-box;
  color: #f8f8f8;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--profile-edit-u));
  padding: calc(20 * var(--profile-edit-u)) calc(16 * var(--profile-edit-u)) calc(24 * var(--profile-edit-u));
}

.profile-edit-sheet__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--profile-edit-u));
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.profile-edit-sheet__intro {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(12 * var(--profile-edit-u));
  line-height: 1.35;
  margin: calc(6 * var(--profile-edit-u)) 0 0;
}

.profile-edit-sheet__form {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--profile-edit-u));
}

.profile-edit-sheet__field {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--profile-edit-u));
}

.profile-edit-sheet__label {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--profile-edit-u));
  font-weight: 600;
}

.profile-edit-sheet__input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(181, 181, 181, 0.35);
  border-radius: calc(8 * var(--profile-edit-u));
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--profile-edit-u));
  min-height: calc(40 * var(--profile-edit-u));
  padding: calc(8 * var(--profile-edit-u)) calc(12 * var(--profile-edit-u));
}

.profile-edit-sheet__hint {
  color: #e76f51;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11 * var(--profile-edit-u));
  line-height: 1.35;
  margin: 0;
}

.profile-edit-sheet__actions {
  display: flex;
  gap: calc(10 * var(--profile-edit-u));
  justify-content: flex-end;
  margin-top: calc(4 * var(--profile-edit-u));
}

.profile-edit-sheet__cancel,
.profile-edit-sheet__save {
  border-radius: calc(8 * var(--profile-edit-u));
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(13 * var(--profile-edit-u));
  font-weight: 600;
  min-height: calc(36 * var(--profile-edit-u));
  padding: calc(8 * var(--profile-edit-u)) calc(16 * var(--profile-edit-u));
}

.profile-edit-sheet__cancel {
  background: transparent;
  border: 1px solid rgba(181, 181, 181, 0.45);
  color: #f8f8f8;
}

.profile-edit-sheet__save {
  background: #b0358b;
  border: 1px solid #b0358b;
  color: #fff;
}

.profile-page__alert {
  margin: 0 auto calc(12 * var(--hu, var(--celosys-u)));
  max-width: var(--celosys-card-w);
  width: var(--celosys-card-w);
}

/* ——— Shop Details (Figma 112:6834) — HTML/CSS, no PNG chrome ——— */
.stamp-cards-partner-detail--figma {
  background: #000;
  color: #f8f8f8;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero {
  border-radius: calc(16 * var(--celosys-u));
  margin: 0 calc(12 * var(--celosys-u));
  min-height: calc(170 * var(--celosys-u));
  overflow: hidden;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__logo {
  border-radius: 50%;
  height: calc(56 * var(--celosys-u));
  object-fit: cover;
  width: calc(56 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__title {
  color: #f8f8f8;
  font-size: calc(20 * var(--celosys-u));
  font-weight: 600;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__address {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-size: calc(9 * var(--celosys-u));
  font-weight: 500;
  gap: calc(6 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__address-icon {
  color: #b5b5b5;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--celosys-u));
  margin-top: calc(10 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__badge {
  align-items: center;
  background: rgba(46, 183, 165, 0.12);
  border: 1px solid rgba(46, 183, 165, 0.55);
  border-radius: 999px;
  color: #2eb7a5;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(8.1 * var(--celosys-u));
  font-weight: 600;
  gap: calc(4 * var(--celosys-u));
  line-height: 1;
  padding: calc(4 * var(--celosys-u)) calc(8 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__badge--devices {
  background: rgba(46, 183, 165, 0.2);
  border-color: transparent;
  color: #f8f8f8;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-detail__body {
  display: grid;
  gap: calc(18 * var(--celosys-u));
  padding: calc(16 * var(--celosys-u)) calc(12 * var(--celosys-u)) calc(8 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-card {
  background: transparent;
  border: 0;
  padding: 0;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-card__title {
  color: #f8f8f8;
  font-size: calc(14 * var(--celosys-u));
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 calc(10 * var(--celosys-u));
  text-transform: none;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-card__desc,
.stamp-cards-partner-detail--figma .stamp-cards-partner-card__subtitle {
  color: #b5b5b5;
  font-size: calc(10 * var(--celosys-u));
  font-weight: 500;
  line-height: 1.45;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-hero__badge-check {
  font-size: calc(7.5 * var(--celosys-u));
  line-height: 1;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-actions-list {
  display: grid;
  gap: calc(10 * var(--celosys-u));
  margin-top: calc(12 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-action-tile {
  background: rgba(28, 28, 30, 0.95);
  border: 1px solid rgba(176, 53, 139, 0.55);
  border-radius: calc(12 * var(--celosys-u));
  padding: calc(10 * var(--celosys-u)) calc(12 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-action-tile__icon {
  color: #b0358b;
  font-size: calc(18 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-action-tile__label {
  color: #f8f8f8;
  font-size: calc(12 * var(--celosys-u));
  font-weight: 600;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-action-tile__value {
  color: #b5b5b5;
  font-size: calc(10 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-action-tile__chevron {
  color: rgba(255, 255, 255, 0.35);
}

.stamp-cards-partner-benefits-list {
  display: grid;
  gap: calc(10 * var(--celosys-u));
}

.stamp-cards-partner-benefit-tile {
  align-items: center;
  background:
    radial-gradient(120% 180% at 100% 0%, rgba(176, 53, 139, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(176, 53, 139, 0.08) 0%, rgba(20, 20, 22, 0.96) 42%),
    #141416;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(14 * var(--celosys-u));
  display: flex;
  gap: calc(12 * var(--celosys-u));
  justify-content: space-between;
  padding: calc(12 * var(--celosys-u));
}

.stamp-cards-partner-benefit-tile__text {
  flex: 1 1 auto;
  min-width: 0;
}

.stamp-cards-partner-benefit-tile__name {
  color: #f8f8f8;
  font-size: calc(12 * var(--celosys-u));
  font-weight: 600;
  margin: 0;
}

.stamp-cards-partner-benefit-tile__reward {
  color: #b0358b;
  font-size: calc(10 * var(--celosys-u));
  font-weight: 600;
  margin: calc(4 * var(--celosys-u)) 0 0;
}

.stamp-cards-partner-benefit-tile__meta {
  align-items: center;
  color: #b5b5b5;
  display: flex;
  font-size: calc(9 * var(--celosys-u));
  gap: calc(6 * var(--celosys-u));
  margin: calc(6 * var(--celosys-u)) 0 0;
}

.stamp-cards-partner-benefit-tile__arrow {
  color: #b0358b;
  flex: 0 0 auto;
  font-size: calc(12 * var(--celosys-u));
  line-height: 1;
}

.stamp-cards-partner-benefit-tile__dot {
  background: #b0358b;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: calc(6 * var(--celosys-u));
  width: calc(6 * var(--celosys-u));
}

.stamp-cards-partner-benefit-tile__cta {
  background: #b0358b;
  border-radius: 999px;
  color: #fff;
  flex: 0 0 auto;
  font-size: calc(10 * var(--celosys-u));
  font-weight: 600;
  line-height: 1;
  padding: calc(8 * var(--celosys-u)) calc(12 * var(--celosys-u));
  white-space: nowrap;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-device__icon-wrap {
  align-items: center;
  background: #2a2a2c;
  border-radius: 50%;
  color: #b0358b;
  display: flex;
  height: calc(60 * var(--celosys-u));
  justify-content: center;
  overflow: hidden;
  width: calc(60 * var(--celosys-u));
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-device__name {
  color: #b5b5b5;
  font-size: calc(10 * var(--celosys-u));
  margin-top: calc(8 * var(--celosys-u));
  text-align: center;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-actions__btn--route {
  background: #2a2a2c;
  border: 0;
  border-radius: 999px;
  color: #b5b5b5;
  font-size: calc(12 * var(--celosys-u));
  font-weight: 600;
  gap: calc(8 * var(--celosys-u));
  letter-spacing: 0.08em;
  text-transform: none;
}

.stamp-cards-partner-detail--figma .stamp-cards-partner-actions__icon {
  color: #b0358b;
}

/* ——— Profile verify info (Figma 332:846) — reuse credits-how chrome ——— */
.profile-verify-how-sheet__panel {
  --ch-u: var(--celosys-u);
}

.profile-verify-how__glyph--partner {
  font-size: calc(30 * var(--ch-u));
  height: calc(30 * var(--ch-u));
}

.profile-verify-how__glyph--touchid {
  font-size: calc(30 * var(--ch-u));
  height: calc(30 * var(--ch-u));
}

.profile-verify-how__glyph--status {
  font-size: calc(35 * var(--ch-u));
  height: calc(35 * var(--ch-u));
}

.profile-verify-how .credits-how-step__desc strong {
  color: #b5b5b5;
  font-weight: 700;
}

/* ——— Angebote overlay carousel (Figma 334:1327) ——— */
/* Keep panel position:absolute from .celosys-overlay-sheet__panel — do NOT set relative. */
.angebote-sheet .celosys-overlay-sheet__panel.angebote-sheet__panel {
  overflow: hidden;
  padding: 0;
}

.angebote-sheet__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #b5b5b5;
  cursor: pointer;
  display: inline-flex;
  font-size: calc(20 * var(--celosys-u));
  height: calc(32 * var(--celosys-u));
  justify-content: center;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  right: calc(14 * var(--celosys-u));
  top: calc(27 * var(--celosys-u));
  width: calc(32 * var(--celosys-u));
  z-index: 40;
}

.angebote-sheet__empty {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--celosys-u));
  font-weight: 500;
  line-height: 1.35;
  margin: calc(120 * var(--celosys-u)) calc(24 * var(--celosys-u)) 0;
  text-align: center;
}

.angebote-carousel {
  --ao-u: var(--celosys-u);
  --ao-card-w: calc(350 * var(--ao-u));
  --ao-card-h: calc(622 * var(--ao-u));
  --ao-gap: calc(16 * var(--ao-u));
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: calc(72 * var(--ao-u)) 0 calc(18 * var(--ao-u) + env(safe-area-inset-bottom, 0px));
  position: relative;
  width: 100%;
  z-index: 1;
}

.angebote-carousel__viewport {
  -webkit-overflow-scrolling: touch;
  height: var(--ao-card-h);
  margin: 0 auto;
  max-width: var(--ao-card-w);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
  width: var(--ao-card-w);
}

.angebote-carousel__viewport::-webkit-scrollbar {
  display: none;
  height: 0;
}

.angebote-carousel__track {
  display: flex;
  gap: var(--ao-gap);
  height: 100%;
  width: max-content;
}

.angebote-slide {
  border-radius: calc(14 * var(--ao-u));
  box-sizing: border-box;
  flex: 0 0 var(--ao-card-w);
  height: var(--ao-card-h);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  width: var(--ao-card-w);
}

/* Same masked stroke as stamp/partner plates — white like the carousel arrows */
.angebote-slide::before {
  background: linear-gradient(
    to bottom,
    rgba(248, 248, 248, 1) 0%,
    rgba(248, 248, 248, 0) var(--celosys-partner-stroke-fade-at, 72%)
  );
  border-radius: inherit;
  clip-path: inset(0 0 var(--celosys-partner-stroke-clip-bottom, 1.25px) 0);
  content: "";
  display: block;
  inset: 0;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: var(--celosys-partner-stroke-w, 1.25px);
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.angebote-slide__bg {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  position: absolute;
  top: 0;
  user-select: none;
  width: 100%;
  z-index: 0;
}

.angebote-slide__bg--fallback {
  background: #1a0a14;
}

.angebote-slide__shade {
  background: linear-gradient(
    180deg,
    rgba(176, 53, 139, 0.72) 0%,
    rgba(120, 30, 95, 0.45) 22%,
    rgba(0, 0, 0, 0.35) 48%,
    rgba(0, 0, 0, 0.82) 72%,
    #000 100%
  );
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Figma 336:1532 — black disc 63 at 12.25/13.76; shop text 334:1086 at 81.99/22.26 */
.angebote-slide__head {
  box-sizing: border-box;
  height: calc((13.76 + 63) * var(--ao-u));
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.angebote-slide__logo-wrap {
  /* Fill the black 63 disc: neon near edge, logo inscribed (was global 0.145 inset → too small). */
  --stamp-logo-ring-inset: 0.04;
  --stamp-logo-gap: 0.012;
  background: #000;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
  height: calc(63 * var(--ao-u));
  left: calc(12.25 * var(--ao-u));
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: calc(13.76 * var(--ao-u));
  width: calc(63 * var(--ao-u));
  z-index: 2;
}

.angebote-slide__logo-ring {
  background: transparent;
  border: 1.5px solid rgba(224, 100, 185, 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 1px rgba(255, 180, 230, 0.9),
    0 0 6px rgba(var(--celosys-shop-logo-neon-magenta), 0.95),
    0 0 14px rgba(var(--celosys-shop-logo-neon-magenta), 0.55),
    0 0 22px rgba(var(--celosys-shop-logo-neon-magenta), 0.28),
    inset 0 0 8px rgba(var(--celosys-shop-logo-neon-magenta), 0.35);
  box-sizing: border-box;
  display: block;
  height: auto;
  inset: calc(var(--stamp-logo-ring-inset) * 100%);
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: 1;
}

.angebote-slide__logo {
  background: #000;
  border-radius: 50%;
  display: block;
  height: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  left: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  object-fit: contain;
  object-position: center;
  position: absolute;
  top: calc((var(--stamp-logo-ring-inset) + var(--stamp-logo-gap)) * 100%);
  width: calc((1 - 2 * (var(--stamp-logo-ring-inset) + var(--stamp-logo-gap))) * 100%);
  z-index: 2;
}

.angebote-slide__logo--fallback {
  background: #000;
}

.angebote-slide__shop {
  box-sizing: border-box;
  left: calc(81.99 * var(--ao-u));
  min-width: 0;
  padding: 0 calc(12 * var(--ao-u)) 0 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(22.26 * var(--ao-u));
}

.angebote-slide__shop-name {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(20 * var(--ao-u));
  font-weight: 600;
  letter-spacing: -0.026px;
  line-height: calc(20 * var(--ao-u));
  margin: 0;
  overflow-wrap: anywhere;
}

.angebote-slide__shop-address {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(9 * var(--ao-u));
  font-weight: 500;
  line-height: calc(9 * var(--ao-u));
  margin: calc(4 * var(--ao-u)) 0 0;
  overflow-wrap: anywhere;
}

.angebote-slide__offer {
  box-sizing: border-box;
  left: 0;
  padding: 0 calc(24 * var(--ao-u));
  position: absolute;
  text-align: center;
  top: calc(452 * var(--ao-u));
  width: 100%;
  z-index: 2;
}

.angebote-slide__title {
  color: #f8f8f8;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(18 * var(--ao-u));
  font-weight: 700;
  letter-spacing: -0.026px;
  line-height: calc(18 * var(--ao-u));
  margin: 0;
  overflow-wrap: anywhere;
}

.angebote-slide__prize {
  color: #b5b5b5;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(14 * var(--ao-u));
  font-weight: 500;
  line-height: calc(14 * var(--ao-u));
  margin: calc(6 * var(--ao-u)) 0 0;
  overflow-wrap: anywhere;
}

.angebote-slide__cta {
  align-items: center;
  background: #b0358b;
  border-radius: 999px;
  bottom: calc(45 * var(--ao-u));
  box-sizing: border-box;
  color: #f8f8f8;
  display: inline-flex;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: calc(11.3 * var(--ao-u));
  font-weight: 400;
  height: calc(24 * var(--ao-u));
  justify-content: center;
  left: 50%;
  letter-spacing: -0.01px;
  line-height: 1;
  min-width: calc(111 * var(--ao-u));
  padding: 0 calc(16 * var(--ao-u));
  position: absolute;
  text-decoration: none;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
}

.angebote-slide__cta:hover,
.angebote-slide__cta:focus-visible {
  color: #f8f8f8;
  filter: brightness(1.06);
  text-decoration: none;
}

/* Figma 334:1112 — elongated chevrons #f8f8f8, mid-card; nav layer above viewport */
.angebote-carousel__nav {
  height: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}

.angebote-carousel__arrow {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8f8f8;
  cursor: pointer;
  display: inline-flex;
  height: calc(48 * var(--ao-u));
  justify-content: center;
  line-height: 1;
  overflow: visible;
  padding: 0;
  /* Never block horizontal pan on the card — taps handled in JS on touch devices. */
  pointer-events: none;
  position: absolute;
  /* pad-top 72 + card mid ~304 − half hit 24 */
  top: calc(72 * var(--ao-u) + 280 * var(--ao-u));
  width: calc(44 * var(--ao-u));
  z-index: 21;
}

@media (hover: hover) and (pointer: fine) {
  .angebote-carousel__arrow {
    pointer-events: auto;
  }
}

.angebote-carousel__arrow-icon {
  color: #f8f8f8 !important;
  display: block;
  flex-shrink: 0;
  font-family: "Celosys SF Icons", sans-serif !important;
  font-size: calc(40 * var(--ao-u));
  height: calc(40 * var(--ao-u));
  line-height: 1;
  overflow: visible;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  /* elongate like Figma compact chevron (tall/narrow) */
  transform: scale(0.62, 1.35);
  transform-origin: center center;
  width: calc(40 * var(--ao-u));
}

.angebote-carousel__arrow.is-hidden,
.angebote-carousel__arrow[hidden] {
  display: none !important;
}

.angebote-carousel__arrow--prev {
  left: calc((100% - var(--ao-card-w)) / 2 + 2 * var(--ao-u));
}

.angebote-carousel__arrow--prev .angebote-carousel__arrow-icon {
  transform: scale(-0.62, 1.35);
}

.angebote-carousel__arrow--next {
  right: calc((100% - var(--ao-card-w)) / 2 + 2 * var(--ao-u));
}

.angebote-carousel__dots {
  align-items: center;
  display: flex;
  gap: calc(4.5 * var(--ao-u));
  justify-content: center;
  margin: calc(17 * var(--ao-u)) auto 0;
  min-height: calc(6 * var(--ao-u));
  padding: 0;
}

.angebote-carousel__dot {
  background: #3a3a3a;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 calc(6 * var(--ao-u));
  height: calc(6 * var(--ao-u));
  padding: 0;
  width: calc(6 * var(--ao-u));
}

.angebote-carousel__dot.is-active {
  background: #b0358b;
}