.content-import .money-hero{
  padding: 14px 0 6px;
}
.content-import .h-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}
.content-import .badge18{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
}
.content-import .lead{
  color: rgba(255,255,255,.78);
}
.content-import .sub{
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}
.content-import .ctarow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
/* pill buttons */
.content-import .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.content-import .pill.primary{
  border-color: rgba(201,166,255,.22);
  background: linear-gradient(180deg, rgba(201,166,255,.10), rgba(255,255,255,.02));
}
/* cards/grid */
.content-import .money-grid{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}
.content-import .card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.content-import .card .p{
  padding: 14px;
}
.content-import .money-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.content-import .money-num{
  font-weight: 900;
  letter-spacing: .04em;
}
.content-import .money-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}
.content-import .tag, .content-import .row.tag{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  font-size: 11px;
  color: rgba(255,255,255,.78);
}
/* table */
.content-import .money-tablewrap{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.content-import .money-table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
}
.content-import .money-table th,
.content-import .money-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(255,255,255,.80);
  text-align:left;
}
.content-import .money-try{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(201,166,255,.18);
  background: rgba(201,166,255,.08);
  font-weight: 800;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 11px;
}
/* details */
.content-import details{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
}
.content-import details + details{ margin-top: 10px; }
.content-import summary{
  cursor: pointer;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}
.content-import .money-disclosure-inline{
  margin-top: 12px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}


/* ===============================
   Mobile Nav: FULLSCREEN overlay
   =============================== */
.mobile__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--topbar-h,74px) + 14px);
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.mobile__nav{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

/* If your layout uses a "phone canvas" wrapper, ensure overlay ignores it */
.phone{ position: relative; z-index: 1; }

/* When nav is open, prevent background scroll */
html.nav-open, body.nav-open{
  overflow: hidden;
  height: 100%;
}




/* ===============================
   Topbar fixed + Close button fix
   =============================== */

.mobile{
  z-index: 100;
}



/* HUB pill acts like a dedicated Home button */
[data-top-hub]:active{
  transform: translateY(1px);
}


/* ===== Aliases for maintainable component naming ===== */
.content-import .cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.content-import .cta-row > a{ text-decoration:none; }

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
}

.content-import .panel{
  border-radius: 16px;
  padding: 14px;
}

/* ===============================
   velvetAI.chat – Subtle Card Life
   =============================== 

@media (prefers-reduced-motion: reduce) {
  .pCard,
  .pCard::before,
  .pCard::after {
    animation: none !important;
    transition: none !important;
  }
}*/

.pCard{
  position: relative;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* Subtiler Float */
.pCard.is-alive{
  animation: cardFloat var(--floatDur, 10s) ease-in-out var(--delay, 0s) infinite;
}

/* Ambient Glow Layer */
.pCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(140px 90px at var(--gx,50%) var(--gy,40%),
      rgba(196,116,255,0.18),
      rgba(196,116,255,0) 70%);
  filter:blur(14px);
  mix-blend-mode:screen;
  z-index:0;
}

.pCard.is-alive::before{
  opacity:var(--glow,0.12);
  animation: glowBreath var(--glowDur,8s) ease-in-out var(--delay,0s) infinite;
}

/* Micro Shimmer */
.pCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.08) 48%,
    rgba(255,255,255,0) 62%
  );
  transform:translateX(-20%);
  mix-blend-mode:overlay;
}

.pCard.is-shimmer::after{
  opacity:var(--shimmer,0.08);
  animation: shimmerSweep var(--shimmerDur,12s) ease-in-out var(--delay,0s) infinite;
}

@keyframes cardFloat{
  0%   { transform:translate3d(0,0,0) rotate(var(--rA,-0.15deg)); }
  50%  { transform:translate3d(0,var(--y,-2px),0) rotate(var(--rB,0.15deg)); }
  100% { transform:translate3d(0,0,0) rotate(var(--rA,-0.15deg)); }
}

@keyframes glowBreath{
  0%   { opacity:calc(var(--glow)*0.7); }
  50%  { opacity:var(--glow); }
  100% { opacity:calc(var(--glow)*0.7); }
}

@keyframes shimmerSweep{
  0%   { transform:translateX(-20%); }
  50%  { transform:translateX(20%); }
  100% { transform:translateX(-20%); }
}

/* 3D frame for cards */
.pCard{
  position: relative;
  border-radius: 16px;              /* muss zu deinem aktuellen radius passen */
  overflow: hidden;                  /* wichtig, damit Highlights sauber clippen */
  outline: none;                     /* debug aus */
  transform: translateZ(0);
}

/* Outer bevel ring */
.pCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  /* “Bevel” = oben heller, unten dunkler + feiner Neon-Tint */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.06) 28%,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.22)
    );

  /* Border-Ersatz: wir nutzen Masking für einen echten Ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px; /* Ring-Dicke */

  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Inner depth + edge shadows */
.pCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    radial-gradient(120% 90% at 20% 15%,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0) 55%),
    radial-gradient(120% 90% at 80% 90%,
      rgba(0,0,0,0.35),
      rgba(0,0,0,0) 60%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -10px 24px rgba(0,0,0,0.35),
    0 10px 28px rgba(0,0,0,0.35);

  opacity: 0.9;
}

/* Bild über die Layer legen */
.pCard__img{
  position: relative;
  z-index: 2;
  display:block;
  width:100%;
  height:auto;
}