/* ===========================
   HomeHarbor – USP Block (global)
   Scope: #hh-inline-usp
   =========================== */

/* ---- Tokens / Scope ---- */
#hh-inline-usp{
  --ink:#0f172a;
  --ink-muted:#475569;
  --primary:#2563eb;
  --sky:#0ea5e9;
  --accent:#6699ff;
  --border:#e2e8f0;
  --divider:rgba(2,6,23,.08);
  --ring:#93c5fd;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}

/* Outer spacing (statt inline style) */
#hh-inline-usp .hh-usp-hero{
  padding:24px 20px;
}

#hh-inline-usp .hh-usp-wrapper{
  max-width:860px;
  margin:0 auto;
}

#hh-inline-usp h1{
  font-size:clamp(26px,4vw,36px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 10px;

  /* === NEU: Gradient-Headline wie im Beispiel === */
  background:linear-gradient(90deg, #0ea5e9, #6366f1 60%, #22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#hh-inline-usp .hh-usp-hero p{
  font-size:clamp(16px,2.2vw,18px);
  line-height:1.55;
  color:var(--ink-muted);
  margin:0 0 6px;
}

#hh-inline-usp .hh-usp-highlight{
  font-weight:700;
  margin:14px 0 22px;
  font-size:18px;
  color:var(--sky);
}

/* Box (accent left) */
#hh-inline-usp .hh-usp-box{
  background:#fff;
  border-left:8px solid var(--accent);
  padding:20px 20px 10px;
  border-radius:20px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  margin-top:18px;
  overflow:hidden;
}
#hh-inline-usp .hh-usp-intro{
  margin:0 0 8px;
  color:var(--ink);
}

/* Items & Divider */
#hh-inline-usp .hh-usp-item{ padding:0; }
#hh-inline-usp .hh-usp-item + .hh-usp-item{ border-top:1px solid var(--divider); }
#hh-inline-usp .hh-usp-item:last-child{ border-bottom:1px solid var(--divider); }

/* Toggles */
#hh-inline-usp .hh-usp-toggle{
  appearance:none;
  background:none;
  border:0;
  width:100%;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:16px;
  color:#1e293b;
  line-height:1.25;
  padding:12px 0;
  transition:color .25s ease;
}
#hh-inline-usp .hh-usp-toggle:hover{ color:#3366cc; }
#hh-inline-usp .hh-usp-toggle:focus-visible{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
  border-radius:8px;
}
#hh-inline-usp .toggle-icon{
  margin-left:auto;
  transition:transform .25s ease;
  min-width:16px; width:16px; height:16px;
}
#hh-inline-usp .hh-usp-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); }
#hh-inline-usp .emoji{ font-size:18px; line-height:1 }

/* Content */
#hh-inline-usp .hh-usp-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-8px);
  margin:0 0 0 40px;
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin .25s ease;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-muted);
}
#hh-inline-usp .hh-usp-content.show{
  max-height:560px;
  opacity:1;
  transform:translateY(0);
  margin-bottom:12px;
}
#hh-inline-usp .hh-usp-content p{ margin:0 0 8px; }
#hh-inline-usp .hh-donate-list{ margin:6px 0 0 18px; padding:0; }
#hh-inline-usp .hh-donate-list li{ margin:4px 0; }

/* CTA */
#hh-inline-usp .hh-cta-button{
  display:inline-block;
  font-weight:700;
  padding:12px 18px;
  border-radius:10px;
  background:linear-gradient(90deg,#3b82f6,#06b6d4);
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(59,130,246,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
#hh-inline-usp .hh-cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(59,130,246,.28);
}

/* Footer */
#hh-inline-usp .hh-final-quote{
  margin-top:18px;
  font-style:italic;
  color:#0ea5e9;
  font-weight:700;
  font-size:clamp(16px,2.5vw,20px);
}

/* Responsive */
@media (max-width:768px){
  #hh-inline-usp .hh-usp-wrapper{ text-align:center; }
  #hh-inline-usp .hh-usp-box{ text-align:left; }
  #hh-inline-usp .hh-usp-toggle{ font-size:15px; }
  #hh-inline-usp .hh-usp-content{ font-size:14px; margin-left:0 !important; }
  #hh-inline-usp .hh-final-quote{ text-align:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-inline-usp *{ transition:none !important; }
}