/* ElouraRise – Future-Schicht (Oktober 2026)
   Effekte, die auf „Soft Future“ aufsetzen: schimmernde Schlüsselwörter, Glas-Anzeigen mit
   hochzählenden Zahlen, laufendes Licht auf den Knöpfen, Lichtkegel auf Karten, Sternenfeld
   in der Methode, schwebende Plaketten an den Belegen, umlaufender Lichtrand am Schluss.
   Nur transform/opacity/background-position; bei „Bewegung reduzieren“ alles still. */

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- Schlüsselwörter in Schlagzeilen ---------- */
.glanz,.w.g{background:linear-gradient(100deg,var(--beere) 0%,#b5687f 22%,var(--gold) 45%,#e9d3a6 52%,var(--gold) 59%,#b5687f 78%,var(--beere) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:glanz 7s linear infinite}
.hero-stack h1 .w.g{animation:word 1.1s var(--ease-out) forwards,glanz 7s linear infinite;animation-delay:calc(.15s + var(--i) * .07s),0s}
.sec-dark .glanz{background-image:linear-gradient(100deg,#e8bfc8 0%,var(--gold) 40%,#fff3da 50%,var(--gold) 60%,#e8bfc8 100%)}
@keyframes glanz{from{background-position:0% 50%}to{background-position:250% 50%}}

/* ---------- Glas-Anzeigen mit Verlaufsrand ---------- */
.trust{border-block:0;gap:clamp(10px,2vw,20px)}
.trust div{position:relative;padding:clamp(14px,2.2vw,22px) 10px;border-radius:18px;border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)) padding-box,linear-gradient(140deg,rgba(201,169,106,.7),rgba(232,191,200,.5) 45%,rgba(141,64,91,.45)) border-box;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -34px rgba(141,64,91,.45);overflow:hidden}
.trust div::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);transform:translateX(-120%);pointer-events:none}
.trust.an div::after{animation:sweep 1.6s var(--ease-soft) forwards;animation-delay:calc(var(--k,0) * 160ms + .2s)}
.trust b{background:linear-gradient(120deg,var(--beere),#b5687f 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
@keyframes sweep{to{transform:translateX(120%)}}

/* ---------- Knöpfe: laufendes Licht und leiser Puls ---------- */
.btn-glow{background-image:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0;animation:knopflicht 5s var(--ease-soft) infinite,puls 3.2s ease-out infinite}
.btn-light.btn-glow{background-image:linear-gradient(110deg,rgba(201,169,106,0) 38%,rgba(201,169,106,.38) 50%,rgba(201,169,106,0) 62%)}
@keyframes knopflicht{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(201,169,106,.42)}70%,100%{box-shadow:0 0 0 14px rgba(201,169,106,0)}}
.btn-glow:hover{animation-play-state:paused}

/* ---------- Karten: Lichtkegel folgt der Maus, leichtes Kippen ---------- */
.spot{--sx:50%;--sy:50%;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--sx) var(--sy),rgba(201,169,106,.22),rgba(232,191,200,.12) 40%,rgba(255,255,255,0) 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::after{opacity:1}
.spot:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)}
.spot .card-icon{transition:transform .6s var(--ease-out),box-shadow .6s}
.spot:hover .card-icon{transform:translateZ(30px) scale(1.08);box-shadow:0 10px 24px -10px rgba(141,64,91,.5)}

/* ---------- Methode: Sternenfeld, Polarlicht, goldene Fortschrittslinie ---------- */
.sec-dark{overflow:hidden;isolation:isolate}
.sterne{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.sec-dark::after{content:"";position:absolute;inset:-20%;z-index:-2;background:radial-gradient(40% 30% at 20% 30%,rgba(141,64,91,.35),rgba(141,64,91,0) 70%),radial-gradient(35% 28% at 80% 70%,rgba(201,169,106,.18),rgba(201,169,106,0) 70%),radial-gradient(30% 25% at 60% 20%,rgba(232,191,200,.14),rgba(232,191,200,0) 70%);animation:polar 18s var(--ease-soft) infinite alternate;pointer-events:none}
@keyframes polar{0%{transform:translate3d(-4%,2%,0) rotate(0deg)}100%{transform:translate3d(4%,-3%,0) rotate(8deg)}}
.journey-steps{position:relative}
.journey-steps::before,.journey-steps::after{content:"";position:absolute;left:-28px;top:6vh;bottom:6vh;width:2px;border-radius:2px}
.journey-steps::before{background:rgba(255,255,255,.08)}
.journey-steps::after{background:linear-gradient(var(--gold),#e8bfc8);transform-origin:top;transform:scaleY(var(--jp,0));box-shadow:0 0 14px rgba(201,169,106,.7)}
.journey-steps li{position:relative}
.journey-steps li::before{content:"";position:absolute;left:-33px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#2a1d22;border:2px solid rgba(255,255,255,.18);transition:background .6s,border-color .6s,box-shadow .6s}
.journey-steps li.on::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(201,169,106,.16),0 0 18px rgba(201,169,106,.8)}
.phase-tag{padding:4px 10px;border-radius:999px;border:1px solid rgba(201,169,106,.4);background:rgba(201,169,106,.08);width:max-content}
@media (max-width:900px){
  .journey-steps{padding-left:26px}
  .journey-steps::before,.journey-steps::after{left:4px;top:28px;bottom:28px}
  .journey-steps li::before{left:-27px;top:42px;margin-top:0}
}

/* ---------- Belege: schwebende Plaketten ---------- */
.proof{overflow:visible}
.plakette{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:.85rem;font-weight:600;color:var(--dunkel);background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(201,169,106,.45);box-shadow:0 18px 40px -20px rgba(141,64,91,.55);animation:schweben 5s ease-in-out infinite;white-space:nowrap}
.plakette b{font-family:var(--serif);font-size:1.1rem;color:var(--beere)}
.plakette i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold),var(--beere));color:#fff;font-style:normal;font-size:.75rem}
.plakette.p1{top:-16px;right:-14px}
.plakette.p2{top:-16px;right:-14px;animation-delay:-2.5s}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:760px){
  .plakette{font-size:.78rem;padding:8px 11px}
  .plakette.p1,.plakette.p2{position:relative;top:auto;right:auto;display:flex;width:max-content;margin:-28px 0 12px auto}
}

/* ---------- Schluss: umlaufender Lichtrand ---------- */
.cta-box{border:2px solid transparent;background:radial-gradient(120% 90% at 20% 0%,#3a2830 0%,var(--dunkel) 55%,#1f1519 100%) padding-box,conic-gradient(from var(--ang),rgba(201,169,106,0) 0deg,rgba(201,169,106,0) 200deg,var(--gold) 300deg,#fff3da 330deg,rgba(232,191,200,.9) 345deg,rgba(201,169,106,0) 360deg) border-box;animation:umlauf 6s linear infinite}
@keyframes umlauf{to{--ang:360deg}}

@media (prefers-reduced-motion:reduce){
  .glanz,.w.g,.btn-glow,.plakette,.cta-box,.sec-dark::after{animation:none!important}
  .spot,.spot:hover{transform:none}
}

/* ---------- Handy (Oktober 2026): kompaktere Karten, Team nebeneinander, Schlussknopf einzeilig ---------- */
@media (max-width:760px){
  .sec{padding-block:52px}
  .grid-3{gap:12px}
  .grid-3 .card{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 18px 20px}
  .grid-3 .card .card-icon{width:40px;height:40px;margin:0;border-radius:11px}
  .grid-3 .card .card-icon svg{width:20px;height:20px}
  .grid-3 .card h3{margin:0;font-size:1.02rem;line-height:1.3}
  .grid-3 .card p{grid-column:1 / -1;margin-top:10px;font-size:.95rem}
  .sec-cta{margin-top:28px}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .person .img-wrap{margin-bottom:12px;border-radius:18px}
  .person .img-wrap img{aspect-ratio:4/5;border-radius:18px}
  .team .person:first-child .img-wrap img{object-position:50% 62%}
  .team .person:last-child .img-wrap img{object-position:50% 25%}
  .person h3{font-size:1.25rem;margin-bottom:6px}
  .person p{font-size:.875rem;line-height:1.5}
  .team-quote{margin-top:24px}
  .cta-box .btn{width:100%;white-space:nowrap;font-size:.95rem;padding:15px 18px}
}
@media (max-width:760px) and (max-height:760px){
  .hero-stack .overline{font-size:.62rem}
  .hero-stack h1{font-size:1.72rem;line-height:1.12}
  .hero-foot{gap:10px}
  .hero-foot .lead{font-size:.9rem;line-height:1.45}
}