/* Pacelytics – seitenspezifische Ergänzungen zu site.css.
   Die Produktfarben (.pl, .btn-pl) stehen in site.css, weil auch die
   App-Karte auf der Startseite sie braucht. */

.pl .app-icon-sm {
  box-shadow: 0 0 0 1px rgba(243, 247, 255, 0.18), 0 16px 30px -14px rgba(0, 0, 0, 0.7);
}

/* Funktionskarten: Symbole in Produktfarben statt im Grün/Gold von SchnäppZettl */
.features--pl .feature .ico { background: #06265a; color: #ff7a50; }

/* Hervorgehobene Funktion in Produktfarben */
.features--pl .feature.feature--pl {
  border-color: transparent;
  background: linear-gradient(150deg, #0a5bd0 0%, #06265a 100%);
  color: #f3f7ff;
}
.features--pl .feature--pl .ico { background: #ff7a50; color: #06265a; }
.features--pl .feature--pl p { color: rgba(243, 247, 255, 0.85); }

/* Illustration: ein Blick auf die Überblick-Seite der App */
.pacechart {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: #f4f6f5;
  color: #13202a;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.75);
  transform: rotate(3deg);
  line-height: 1.3;
}
.pacechart::after {
  content: "PR";
  position: absolute;
  top: -20px;
  right: -16px;
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  background: #cbff3d;
  color: #12240a;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  transform: rotate(-9deg);
}
.pc-eyebrow {
  margin: 0 0 4px;
  color: #6f7c83;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pc-hero {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}
.pc-hero span {
  background: linear-gradient(120deg, #0074e8, #ff5a36);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc-hero small { color: #46545d; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.pc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.pc-tile { padding: 10px 12px; border-radius: 12px; background: rgba(0, 116, 232, 0.12); color: #0058b8; }
.pc-tile--orange { background: rgba(255, 90, 54, 0.12); color: #d63d1c; }
.pc-tile b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.pc-tile small {
  display: block;
  margin-bottom: 2px;
  color: #6f7c83;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 92px;
  padding: 0 2px;
  border-bottom: 1px solid #cbd3d1;
}
.pc-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #0074e8; }
.pc-bars i.peak { background: #ff5a36; }
.pc-caption { margin: 8px 0 0; color: #6f7c83; font-size: 0.72rem; font-weight: 600; }