/* Cantivo · CCLI-Suche – kinetischer Hero (Stil 2). Selbst gehostet, CSP-sicher.
   Ergänzt die bestehenden .ccli-*-Styles aus baptisten-tools.css. */
.ccli-hero{position:relative;overflow:hidden;isolation:isolate}
.ccli-hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.75}
.ccli-hero-waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:118px;z-index:0;pointer-events:none}
.ccli-hero-waves path{fill:none;stroke-width:2}
.ccli-hero-waves path:nth-child(1){stroke:rgba(123,215,203,.32);animation:ccliWave 9s ease-in-out infinite}
.ccli-hero-waves path:nth-child(2){stroke:rgba(21,156,139,.30);animation:ccliWave 13s ease-in-out infinite reverse}
.ccli-hero-waves path:nth-child(3){stroke:rgba(203,180,73,.20);animation:ccliWave 17s ease-in-out infinite}
@keyframes ccliWave{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-46px,-9px,0)}}

.ccli-hero-inner{position:relative;z-index:2;max-width:840px}
.ccli-hero-eyebrow{color:#7bd7cb}
.ccli-rot{display:inline-block;font-weight:800;background:linear-gradient(90deg,#7bd7cb,#159c8b,#cbb449,#7bd7cb);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ccliGrad 7s linear infinite;transition:opacity .34s ease,transform .34s ease;will-change:opacity,transform}
.ccli-rot.is-out{opacity:0;transform:translateY(9px)}
.ccli-grad{background:linear-gradient(90deg,#7bd7cb,#cbb449,#7bd7cb);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ccliGrad 8s linear infinite}
@keyframes ccliGrad{0%{background-position:0% 50%}100%{background-position:300% 50%}}
#ccli-title{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.06}

/* Suchfeld direkt im Hero – glasig auf dunklem Petrol */
.ccli-hero-form{margin:22px 0 14px;max-width:580px}
.ccli-hero-formlabel{display:block;font-weight:700;font-size:.9rem;color:#eaf6f4;margin-bottom:8px}
.ccli-hero-form .ccli-input-row{display:flex;align-items:stretch;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 22px 52px rgba(0,0,0,.34);transition:border-color .2s ease,box-shadow .2s ease}
.ccli-hero-form .ccli-input-row:focus-within{border-color:rgba(123,215,203,.6);box-shadow:0 22px 52px rgba(0,0,0,.34),0 0 0 4px rgba(123,215,203,.16)}
.ccli-hero-form .ccli-book-mark{display:grid;place-items:center;padding:0 13px;border-radius:11px;background:rgba(123,215,203,.16);color:#7bd7cb;font-weight:800;font-size:.8rem;letter-spacing:.03em}
.ccli-hero-form input[type=number]{flex:1;min-width:0;border:0;background:transparent;color:#fff;font-size:1.18rem;font-weight:700;padding:11px 6px;outline:none;-moz-appearance:textfield}
.ccli-hero-form input[type=number]::-webkit-outer-spin-button,.ccli-hero-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ccli-hero-form input[type=number]::placeholder{color:rgba(255,255,255,.5);font-weight:500}
.ccli-hero-form .btn.primary{border-radius:12px;padding:0 24px;font-weight:800;white-space:nowrap}
.ccli-hero-form .ccli-form-help{color:rgba(234,246,244,.66);font-size:.82rem;margin:9px 2px 0}
.ccli-hero-form .ccli-live-status{color:#ffd7cf;font-size:.86rem;margin:8px 2px 0;min-height:1em}
.ccli-hero-chips{margin-top:6px}

/* Ergebnis-Bereich direkt unter dem Hero (Sprungziel) */
.ccli-results-area{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.ccli-results-area .ccli-result:not(.is-visible),.ccli-results-area .ccli-not-found:not(.is-visible){display:none}
.ccli-results-area .ccli-result.is-visible{animation:ccliPop .45s cubic-bezier(.2,.7,.3,1)}
@keyframes ccliPop{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:none}}

/* Hinweis-Karten als responsives 3er-Grid */
.ccli-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:26px}

@media (max-width:760px){
  .ccli-hero-form{max-width:none}
  .ccli-hero-form .btn.primary{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  .ccli-hero-waves path,.ccli-rot,.ccli-grad,.ccli-hero-particles,.ccli-results-area .ccli-result.is-visible{animation:none!important}
}

/* Mobile-Feinschliff: Label lesbar + kompakteres Suchfeld/Button */
.ccli-hero-form .ccli-hero-formlabel{color:#dff3ef}
@media(max-width:760px){
  #ccli-title{font-size:clamp(1.7rem,7vw,2.15rem)}
  .ccli-hero-inner .lead{font-size:1rem;line-height:1.5}
  .ccli-hero-form{margin:16px 0 12px}
  .ccli-hero-form .ccli-input-row{padding:6px;border-radius:14px;gap:6px}
  .ccli-hero-form input[type=number]{font-size:1.02rem;padding:9px 4px}
  .ccli-hero-form .btn.primary{padding:0 15px;font-size:.92rem}
  .ccli-hero-form .ccli-book-mark{padding:0 9px;font-size:.7rem}
  .ccli-hero-form .ccli-form-help{font-size:.78rem}
}