/* Vergleichstabelle Reinigung vs. Neuanstrich (Herford) */
/* ---------- Grundgerüst ---------- */
  .fpv, .fpv * { box-sizing: border-box; margin: 0; padding: 0; }
  .fpv {
    --fpv-green:       #00AB32;
    --fpv-green-dark:  #008A28;
    --fpv-green-deep:  #0E3B20;
    --fpv-green-tint:  #F1FAF4;
    --fpv-green-line:  rgba(0,171,50,.28);
    --fpv-ink:         #020101;
    --fpv-ink-soft:    #46554B;
    --fpv-gray-bg:     #F7F8F9;
    --fpv-gray-head:   #EDEFF1;
    --fpv-gray-line:   #E7EAEC;
    --fpv-gray-text:   #4D565E;
    --fpv-rust:        #B4543E;
    font-family: inherit;
    color: var(--fpv-ink);
    max-width: 1250px;
    margin: 0 auto;
    padding: 8px 0 4px;
    line-height: 1.5;
  }
 
  /* ---------- Kopfbereich ---------- */
  .fpv-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--fpv-green-dark);
  }
  .fpv-eyebrow::before {
    content: ""; width: 26px; height: 2px; background: var(--fpv-green);
  }
  .fpv-title {
    margin-top: 12px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800; line-height: 1.15; letter-spacing: -.015em;
  }
  .fpv-title .fpv-mark {
    background: linear-gradient(transparent 64%, #C9F0D4 64%);
    padding: 0 2px;
  }
  /* ---------- Vergleichsraster ---------- */
  .fpv-grid {
    display: grid;
    grid-template-columns: minmax(150px, .85fr) 1.15fr 1.15fr;
    margin-top: 34px;
  }
  .fpv-row { display: contents; }
 
  .fpv-spacer { background: transparent; }
 
  /* Spaltenköpfe */
  .fpv-headcell {
    position: relative;
    padding: 24px 22px 20px;
  }
  .fpv-headcell--a {
    background: linear-gradient(135deg, var(--fpv-green) 0%, var(--fpv-green-dark) 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0,171,50,.22);
  }
  .fpv-headcell--b {
    background: var(--fpv-gray-head);
    color: var(--fpv-gray-text);
  }
  .fpv-headname {
    display: flex; align-items: center; gap: 9px;
    font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  }
  .fpv-headname svg { flex: none; }
  .fpv-headtag {
    display: block; margin-top: 4px;
    font-size: 13px; opacity: .85;
  }
  .fpv-badge {
    position: absolute; top: 0; left: 20px;
    transform: translateY(-55%);
    background: #F9C604; color: #020101;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    padding: 6px 14px;
    box-shadow: 0 6px 14px rgba(23,37,28,.18);
    white-space: nowrap;
  }
 
  /* Kriterien-Spalte */
  .fpv-label {
    display: flex; align-items: center;
    padding: 18px 18px 18px 4px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #6A776E;
    border-bottom: 1px solid #EFF2F0;
  }
  .fpv-row:last-of-type .fpv-label { border-bottom: 0; }
 
  /* Wertzellen */
  .fpv-cell {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: 18px 22px;
  }
  .fpv-cell--a {
    background: var(--fpv-green-tint);
    border-left: 1px solid var(--fpv-green-line);
    border-right: 1px solid var(--fpv-green-line);
    border-bottom: 1px solid rgba(0,171,50,.14);
  }
  .fpv-cell--b {
    background: var(--fpv-gray-bg);
    border-right: 1px solid var(--fpv-gray-line);
    border-bottom: 1px solid var(--fpv-gray-line);
  }
  .fpv-row:last-of-type .fpv-cell--a {
    border-bottom: 1px solid var(--fpv-green-line);
  }
  .fpv-row:last-of-type .fpv-cell--b {
    border-bottom: 1px solid var(--fpv-gray-line);
  }
 
  .fpv-val {
    display: flex; align-items: center; gap: 8px;
    font-size: 16.5px; font-weight: 700;
  }
  .fpv-cell--a .fpv-val { color: #0B3D1D; }
  .fpv-cell--b .fpv-val { color: var(--fpv-gray-text); font-weight: 600; }
  .fpv-val svg { flex: none; }
  .fpv-hint {
    font-size: 13px; color: #66746B;
  }
  .fpv-cell--b .fpv-hint { color: #7A838B; }
 
  /* Kostenbalken (animiert) */
  .fpv-bar {
    height: 7px; border-radius: 999px; overflow: hidden;
    background: rgba(0,0,0,.07); margin-top: 3px; max-width: 260px;
  }
  .fpv-bar i {
    display: block; height: 100%; width: 0;
    border-radius: inherit;
    transition: width 1.1s cubic-bezier(.2,.7,.2,1) .2s;
  }
  .fpv-bar--a i { background: linear-gradient(90deg, var(--fpv-green), #35C55F); }
  .fpv-bar--b i { background: #A8B0B7; }
  .fpv.is-inview .fpv-bar i { width: var(--w); }
 
  .fpv-note {
    margin-top: 14px; font-size: 12px; color: #93A099;
  }
 
  /* ---------- Mobil (≤ 760px) ---------- */
  @media (max-width: 760px) {
    .fpv-grid { grid-template-columns: 1fr 1fr; margin-top: 30px; }
    .fpv-spacer, .fpv-label { display: none; }
    .fpv-headcell { padding: 18px 14px 14px; }
    .fpv-headname { font-size: 15.5px; }
    .fpv-headtag { display: none; }
    .fpv-badge { left: 12px; font-size: 10.5px; padding: 5px 11px; }
    .fpv-cell { padding: 14px; }
    .fpv-val { font-size: 14.5px; }
    .fpv-hint { font-size: 12px; }
    /* Kriterium als Mini-Label in der grünen Zelle */
    .fpv-cell--a::before {
      content: attr(data-label);
      font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #3D8055;
    }
  }
 
  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .fpv-bar i { transition: none; width: var(--w); }
  }