/* ============================================================================
   Trust-Strip — Welle 5.14 (aus hero-v3.css extrahiert, Komponente)
   ----------------------------------------------------------------------------
   Schmaler Premium-Bar zwischen Hero und Suite-Bento. Apple-Pro-Display-
   Pattern: Light = warm pearl mit dark navy values + gold accents.
   Dark = dark navy mit cream values.

   Reveal: nutzt globale .reveal/.is-visible-Choreographie (style.css §19,
   IO-getrieben via premium-polish.js). Stagger via .reveal-delay-1/2 im HTML.
   Number-CountUp: premium-polish.js → setupNumberCountUp() auf .trust-stat-value.

   Eigene Komponenten-Datei — gehört nicht in hero-v3.css.
   ============================================================================ */

.trust-strip {
  position: relative;
  padding: 0.85rem 0;
  background: linear-gradient(180deg, #f8f8fa 0%, #ececef 50%, #f8f8fa 100%);
  overflow: hidden;
}

/* Gold-Hairlines top + bottom mit edge-fade */
.trust-strip::before,
.trust-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184, 137, 90, 0.40) 18%,
    rgba(184, 137, 90, 0.70) 50%,
    rgba(184, 137, 90, 0.40) 82%,
    transparent 100%);
  pointer-events: none;
}
.trust-strip::before { top: 0; }
.trust-strip::after  { bottom: 0; }

.trust-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.trust-stat {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0 1.6rem;
  white-space: nowrap;
}

/* Hairline-Divider zwischen Stats */
.trust-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(184, 137, 90, 0.40) 30%,
    rgba(184, 137, 90, 0.40) 70%,
    transparent 100%);
}

.trust-stat-value {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #0f172a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.trust-stat-suffix {
  font-size: 0.85em;
  font-weight: 700;
  color: #b8895a;
  margin-left: 0.02em;
  letter-spacing: 0;
}
.trust-stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: #8c6a3d;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

/* Dark-Hero-Mode — dark navy mit cream + warm gold accents */
body.is-dark-bg .trust-strip {
  background: linear-gradient(180deg, #0c1422 0%, #131c2e 50%, #0c1422 100%);
}
body.is-dark-bg .trust-strip::before,
body.is-dark-bg .trust-strip::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 185, 127, 0.45) 18%,
    rgba(232, 185, 127, 0.75) 50%,
    rgba(232, 185, 127, 0.45) 82%,
    transparent 100%);
}
body.is-dark-bg .trust-stat:not(:last-child)::after {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232, 185, 127, 0.32) 30%,
    rgba(232, 185, 127, 0.32) 70%,
    transparent 100%);
}
body.is-dark-bg .trust-stat-value {
  color: #f5e8d6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
body.is-dark-bg .trust-stat-suffix { color: rgba(232, 185, 127, 0.95); }
body.is-dark-bg .trust-stat-label  { color: rgba(232, 185, 127, 0.85); }

/* Mobile (≤600px) — schmaler Padding, kompakter spacing */
@media (max-width: 600px) {
  .trust-strip      { padding: 0.7rem 0; }
  .trust-stat       { padding: 0 0.85rem; gap: 0.4rem; }
  .trust-stat-value { font-size: 0.92rem; }
  .trust-stat-label { font-size: 0.58rem; letter-spacing: 0.14em; }
}