/* ==========================================================================
   QRTasse – Dashboard & Tracking (Breite wie Hero, Konsistenz wie Explainer)
   ========================================================================== */
.dashboard{
  background: var(--warm);
  padding: clamp(2.6rem, 6vw, 4.8rem) 0;
}

/* Nutzt dieselbe Wrap-Breite wie der Hero-Bereich */
.dashboard .wrap{
  display: grid;
  gap: clamp(1.6rem, 3.6vw, 2.2rem);
}

/* Grid (2 Spalten: links Content/Visual, rechts USP/CTA) */
.dashboard__grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.4rem, 5vw, 2rem);
  align-items: start;
}

/* Linke Spalte – Typo & Lead */
.dashboard__left h2{
  margin: 0 0 var(--space-2);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
}
.dashboard__left .lead{
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
}

/* Visual: vollbreit, ohne Effekte; kurzer Fade nach unten */
.dashboard__visual{ margin: 0 0 var(--space-3); }
.dashboard__visual img{
  width: 100%;
  height: auto;
  display: block;
  border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;          mask-size: 100% 100%;
}

/* Rechte Spalte – USP-Liste */
.dashboard__right{
  display: grid;
  gap: var(--space-3);
}
.dashboard__usp{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
}
.dashboard__usp li{
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-2); align-items: center;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--r-m);
  padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-soft);
}
.dashboard__usp i{
  width: 52px; height: 52px; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
  background: var(--black); color: #fff; font-size: 20px;
}
.dashboard__usp strong{ display:block; margin:0 0 .15rem; }
.dashboard__usp p{ margin:0; color: var(--muted); }

.dashboard__actions{
  margin-top: var(--space-2);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .dashboard__grid{ grid-template-columns: 1fr; }
  .dashboard__visual img{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  }
}