/* REM_FX_V2 — Premium-Interaktionsebene (Scroll-Reveals, Bild-Wipes, Magnetics,
   3D-Tilt, Parallax, Zaehl-Animationen) fuer Start- UND alle Unterseiten.
   Wird NACH dem Seiten-CSS geladen, rein additiv. Sicherheitsprinzip: Inhalte
   werden NUR versteckt, wenn das JS lief (html.fx-ready). Faellt es aus, bleibt
   die Seite vollstaendig sichtbar. Nur transform/opacity/clip -> keine Ruckler. */

:root{ --fx:#B0D528; --fx-dark:#8EB01E; }

/* ---------- 1) Scroll-Fortschrittsbalken ---------- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--fx),var(--fx-dark));
  z-index:300;pointer-events:none;will-change:transform}

/* ---------- 2) Scroll-Reveal ---------- */
html.fx-ready [data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),
             transform .8s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--fx-delay,0s)}
html.fx-ready [data-reveal="left"]{transform:translateX(-36px)}
html.fx-ready [data-reveal="right"]{transform:translateX(36px)}
html.fx-ready [data-reveal="scale"]{transform:scale(.92)}
html.fx-ready [data-reveal].fx-in{opacity:1;transform:none}

/* Ueberschriften: Wipe — der Text steigt hinter einer Kante herauf */
html.fx-ready [data-reveal="wipe"]{opacity:0;transform:translateY(26px);
  clip-path:inset(-4% -6% 108% -6%);
  transition:clip-path 1.05s cubic-bezier(.16,.84,.44,1),
             transform 1.05s cubic-bezier(.16,.84,.44,1),opacity .5s ease;
  transition-delay:var(--fx-delay,0s)}
html.fx-ready [data-reveal="wipe"].fx-in{opacity:1;transform:none;clip-path:inset(-4% -6% -12% -6%)}

/* Bild-Wipe: von unten aufdecken + leichter Zoom-out */
html.fx-ready [data-img]{clip-path:inset(0 0 100% 0);transform:scale(1.07);
  transition:clip-path 1.05s cubic-bezier(.16,.84,.44,1),
             transform 1.25s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--fx-delay,0s)}
html.fx-ready [data-img].fx-in{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ---------- 3) Hero-Auftritt (reines CSS, laeuft auch ohne JS) ---------- */
.titel .oberzeile,.titel h1 span,.titel p.unter,.titel .knopfreihe{
  opacity:0;animation:fx-rise 1s cubic-bezier(.16,.84,.44,1) forwards}
.titel .oberzeile{animation-delay:.10s}
.titel h1 span:nth-child(1){animation-delay:.24s}
.titel h1 span:nth-child(2){animation-delay:.36s}
.titel h1 span:nth-child(3){animation-delay:.48s}
.titel p.unter{animation-delay:.64s}
.titel .knopfreihe{animation-delay:.78s}
@keyframes fx-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* Subseiten-Kopf: sanfter Auftritt */
.page-header .eyebrow,.page-header h1,.page-header .lead{
  opacity:0;animation:fx-rise .95s cubic-bezier(.16,.84,.44,1) forwards}
.page-header .eyebrow{animation-delay:.06s}
.page-header h1{animation-delay:.18s}
.page-header .lead{animation-delay:.32s}

/* Hero-Hintergrund: sanfter, endloser Ken-Burns-Zoom */
.titel .bild img{animation:fx-kenburns 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes fx-kenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.titel h1 .akz{position:relative}

/* Scroll-Indikator unten im Hero (per JS eingesetzt) */
.fx-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;
  animation:fx-rise 1s ease 1.1s forwards;pointer-events:none}
.fx-cue span{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--fx)}
.fx-cue i{width:22px;height:34px;border:1.5px solid rgba(176,213,40,.55);border-radius:12px;
  position:relative;display:block}
.fx-cue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;
  background:var(--fx);transform:translateX(-50%);animation:fx-wheel 1.7s ease-in-out infinite}
@keyframes fx-wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}
  70%{opacity:1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- 4) Kopfzeile: beim Runterscrollen ausblenden ---------- */
header#kopf,nav.rem{transition:transform .45s cubic-bezier(.16,.84,.44,1),
  border-color .3s,padding .3s,background .3s}
header#kopf.fx-hidden,nav.rem.fx-hidden{transform:translateY(-102%)}

/* ---------- 5) Animierte Menue-Unterstriche ---------- */
nav.haupt a,.nav-menu a{position:relative}
nav.haupt a::after,.nav-menu a::after{content:"";position:absolute;left:0;bottom:-5px;
  width:100%;height:1px;background:var(--fx);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s cubic-bezier(.16,.84,.44,1)}
nav.haupt a:hover::after,.nav-menu a:hover::after,.nav-menu a.hier::after,
.nav-menu a.active::after{transform:scaleX(1)}

/* ---------- 6) Knoepfe: Magnetik (JS) + Glanz-Sweep ---------- */
.knopf,.nav-cta,.btn-primary,.btn-secondary,.btn-outline,.btn-accent{position:relative;
  overflow:hidden;transition:background .2s,color .2s,border-color .2s,
  transform .25s cubic-bezier(.16,.84,.44,1),box-shadow .3s}
.knopf::before,.nav-cta::before,.btn-primary::before,.btn-accent::before{content:"";
  position:absolute;top:0;left:-130%;width:65%;height:100%;transform:skewX(-20deg);
  pointer-events:none;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .65s ease}
.knopf:hover::before,.nav-cta:hover::before,.btn-primary:hover::before,
.btn-accent:hover::before{left:150%}
.knopf:not(.leer):hover,.nav-cta:hover,.btn-accent:hover{
  box-shadow:0 10px 30px -8px rgba(176,213,40,.5)}

/* ---------- 7) Karten: 3D-Tilt (JS) + Cursor-Glow ---------- */
.karte,.person,.card,.pillar,.partner-card,.pj,.team-card,.bali-project,
.bali-eck .k,.token-stats,.obj,.ref,.rem-feature,.rem-vcard{position:relative;
  transition:transform .3s cubic-bezier(.16,.84,.44,1),border-color .25s,box-shadow .35s}
.karte::after,.person::after,.card::after,.pillar::after,.partner-card::after,
.pj::after,.team-card::after,.bali-project::after,.bali-eck .k::after,
.token-stats::after,.obj::after,.ref::after,.rem-feature::after,.rem-vcard::after{content:"";
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  border-radius:inherit;z-index:2;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(176,213,40,.15),transparent 60%)}
.karte:hover::after,.person:hover::after,.card:hover::after,.pillar:hover::after,
.partner-card:hover::after,.pj:hover::after,.team-card:hover::after,
.bali-project:hover::after,.bali-eck .k:hover::after,.token-stats:hover::after,
.obj:hover::after,.ref:hover::after,.rem-feature:hover::after,.rem-vcard:hover::after{opacity:1}
.karte:hover,.person:hover,.card:hover,.pillar:hover,.partner-card:hover,
.pj:hover,.team-card:hover,.bali-project:hover,.bali-eck .k:hover,.rem-feature:hover,
.rem-vcard:hover{box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.rem-feature>*{position:relative;z-index:2}
/* Karteninhalt ueber dem Glow halten */
.pj>*,.obj>*,.ref>*,.pillar>*,.partner-card>*,.karte>*,.person>*{position:relative;z-index:2}

/* ---------- 9) Feinschliff ---------- */
html{scroll-padding-top:96px}
::selection{background:rgba(176,213,40,.28);color:#fff}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#0A0B0C}
*::-webkit-scrollbar-thumb{background:#26282B;border-radius:8px;border:3px solid #0A0B0C}
*::-webkit-scrollbar-thumb:hover{background:var(--fx-dark)}

@media(prefers-reduced-motion:reduce){
  html.fx-ready [data-reveal],html.fx-ready [data-img]{
    opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
  .titel .oberzeile,.titel h1 span,.titel p.unter,.titel .knopfreihe,.fx-cue,
  .page-header .eyebrow,.page-header h1,.page-header .lead{
    opacity:1!important;animation:none!important}
  .titel .bild img{animation:none!important}
  .fx-progress,.fx-cue{display:none}
  *{scroll-behavior:auto!important}
}