/* ============================================================
   Sarac Design-Pack v1 — edle, dezente Animationen
   Geladen nur auf Seiten, die sarac-design.js einbinden.
   ============================================================ */

/* ---- Scroll-Reveal ------------------------------------------------ */
.sarac-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.sarac-rv.sarac-in{opacity:1;transform:none}

/* ---- Hero: sanfter Tiefenhintergrund ------------------------------ */
.sarac-hero{position:relative;overflow:hidden}
.sarac-hero::before{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(8,43,87,.055), transparent 70%),
    radial-gradient(30% 30% at 84% 12%, rgba(31,78,132,.05), transparent 70%),
    radial-gradient(26% 26% at 70% 85%, rgba(8,43,87,.04), transparent 70%);
  animation:saracDrift 26s ease-in-out infinite alternate}
.sarac-hero > *{position:relative;z-index:1}
@keyframes saracDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,3%,0) scale(1.05)}}

/* ---- Logo: einmaliger Glanz-Sweep --------------------------------- */
.sarac-shine{position:relative;overflow:hidden;display:inline-block}
.sarac-shine::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-18deg);animation:saracShine 2.2s ease-out .9s 1 both}
.sarac-shine:hover::after{animation:saracShine 1.4s ease-out 1}
@keyframes saracShine{from{left:-80%}to{left:130%}}

/* ---- Selbstzeichnende Hero-Icons ----------------------------------- */
.sarac-icon{width:52px;height:52px;display:inline-block}
.sarac-icon path,.sarac-icon circle,.sarac-icon rect,.sarac-icon line,.sarac-icon polyline{
  fill:none;stroke:#082B57;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:130;stroke-dashoffset:130}
.sarac-in .sarac-icon path,.sarac-in .sarac-icon circle,.sarac-in .sarac-icon rect,.sarac-in .sarac-icon line,.sarac-in .sarac-icon polyline{
  animation:saracDraw 1.3s cubic-bezier(.45,0,.25,1) forwards}
@keyframes saracDraw{to{stroke-dashoffset:0}}

/* ---- KPI-Band ------------------------------------------------------- */
.sarac-kpis{font-family:Nunito,system-ui,'Segoe UI',sans-serif;max-width:1080px;margin:6px auto 10px;padding:0 22px}
.sarac-kpis .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;background:#fff;
  border:1px solid #E3E9F0;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(8,43,87,.05)}
.sarac-kpis .cell{padding:26px 20px;text-align:center;position:relative}
.sarac-kpis .cell + .cell::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:#E3E9F0}
.sarac-kpis .num{font-family:Lora,Georgia,serif;font-weight:600;font-size:32px;color:#082B57;line-height:1.1;letter-spacing:.01em}
.sarac-kpis .lbl{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5B6B7B}
@media(max-width:760px){.sarac-kpis .cell + .cell::before{display:none}.sarac-kpis .cell{padding:18px 14px}.sarac-kpis .num{font-size:26px}}

/* ---- Micro-Interactions: Karten & Buttons --------------------------- */
.elementor-widget-price-table .elementor-price-table,
.elementor-widget-icon-box .elementor-widget-container,
.elementor-widget-testimonial .elementor-widget-container{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.elementor-widget-price-table .elementor-price-table:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(8,43,87,.13)}
.elementor-widget-icon-box .elementor-widget-container:hover{transform:translateY(-4px)}
#sarac-anlagen-teaser a,.sarac-cta-band a{transition:transform .25s ease,box-shadow .25s ease}
#sarac-anlagen-teaser a:hover,.sarac-cta-band a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22)}

/* ---- Testimonial-Slider --------------------------------------------- */
.sarac-slider{position:relative}
.sarac-slide{transition:opacity .8s ease;opacity:0;position:absolute;inset:0;pointer-events:none}
.sarac-slide.on{opacity:1;position:relative;pointer-events:auto}
.sarac-dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.sarac-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:#C9D6E4;cursor:pointer;transition:background .3s,transform .3s}
.sarac-dot.on{background:#082B57;transform:scale(1.25)}

/* ---- Unterseiten-Typografie (v2) ------------------------------------- */
.site-content .elementor-widget-text-editor h2{margin-top:1.5em}
.site-content .elementor-widget-text-editor h2::after{content:"";display:block;width:46px;height:3px;border-radius:2px;background:linear-gradient(90deg,#082B57,#1F4E84);margin-top:9px}
.site-content .elementor-widget-text-editor p{line-height:1.75}
.site-content .elementor-widget-text-editor ul{list-style:none;padding-left:2px}
.site-content .elementor-widget-text-editor ul li{position:relative;padding-left:28px;margin:9px 0;line-height:1.65}
.site-content .elementor-widget-text-editor ul li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ECF7F1' stroke='%239FBEE3' stroke-width='1.4'/%3E%3Cpolyline points='7.5 12.5 10.8 15.8 16.5 9' fill='none' stroke='%231E7A52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---- Gestaltungsberatung-Formular: H1 in normaler Größe ---------------- */
#fragebogen-box h1{font-size:clamp(26px,3.2vw,34px);line-height:1.2;word-break:normal;overflow-wrap:break-word}

/* ---- Reduzierte Bewegung: alles sofort sichtbar ---------------------- */
@media (prefers-reduced-motion: reduce){
  .sarac-rv{opacity:1 !important;transform:none !important;transition:none !important}
  .sarac-hero::before,.sarac-shine::after{animation:none !important}
  .sarac-icon path,.sarac-icon circle,.sarac-icon rect,.sarac-icon line,.sarac-icon polyline{stroke-dashoffset:0 !important;animation:none !important}
}