/* =====================================================================
   Smith & Victory — Detail-Layer (additiv, überschreibt nichts Bestehendes)
   Feine Textur, edlere Tiefe, Micro-Interaktionen, Deko-Details.
   ===================================================================== */

/* 1 · Film-Grain-Textur über der ganzen Seite (tactile, premium) */
body::after{
  content:"";position:fixed;inset:0;z-index:180;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (prefers-reduced-motion: no-preference){
  /* leichtes Flimmern gibt der Textur Leben */
  body::after{animation:svGrain 4.2s steps(3) infinite}
  @keyframes svGrain{
    0%{transform:translate(0,0)} 33%{transform:translate(-3px,2px)} 66%{transform:translate(2px,-2px)} 100%{transform:translate(0,0)}
  }
}

/* 2 · Eyebrow-Detail: feiner animierter Coral-Trailer hinter dem Label */
.eyebrow,.manifest__eyebrow{position:relative}
.eyebrow::after{
  content:"";display:inline-block;vertical-align:middle;margin-left:.7em;
  width:26px;height:1px;background:linear-gradient(90deg,var(--coral),transparent);
  opacity:.6;
}
.eyebrow:hover::after{width:40px;transition:width .5s var(--ease)}

/* 3 · Interaktive Karten: sanfter Lift + warmer Schatten + Coral-Kante */
.svc,.stat,.kstat,.hstat,.lab__phase,.case,.casecard,.branche,.branchen__item{
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.svc:hover,.lab__phase:hover,.case:hover,.casecard:hover,.branche:hover,.branchen__item:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -26px rgba(20,17,13,.32);
}
.stat:hover,.kstat:hover,.hstat:hover{transform:translateY(-4px)}
/* Pfeil in Karten schiebt beim Hover mit */
.svc:hover .svc__foot svg{transform:translateX(5px)}
.svc__foot svg{transition:transform .45s var(--ease)}

/* 4 · Buttons: dezenter Glanz-Sweep beim Hover */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn:hover::after{animation:svSheen .75s var(--ease-out) forwards}
@keyframes svSheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}

/* 5 · Stat-Zahlen bekommen eine feine Grundlinie als Detail */
.stat .n,.hstat .n,.kstat .n{position:relative}
.stat,.kstat{position:relative}
.stat::before,.kstat::before{
  content:"";position:absolute;left:0;top:0;width:22px;height:3px;border-radius:3px;
  background:var(--coral);opacity:.9;
}

/* 6 · Sektionen: hauchzarte obere Trennlinie mit Coral-Tick als Rhythmus-Detail */
.section{position:relative}
.section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1320px,92vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
  opacity:.7;
}
.section::after{
  content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--coral);opacity:.55;
}

/* 7 · Footer-Big-Node: Pfeil nudged, Detail beim Hover */
.foot-bignode a svg{transition:transform .5s var(--ease)}
.foot-bignode a:hover svg{transform:translate(4px,-4px)}

/* 8 · Bilder/Logo-Karten: minimaler Zoom-Atem beim Hover */
.kunden__logo{transition:transform .5s var(--ease),filter .5s var(--ease)}
.kunden__logo:hover{transform:scale(1.06)}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  .svc,.stat,.kstat,.hstat,.lab__phase,.case,.casecard,.kunden__logo{transition:none}
  .btn:hover::after{animation:none}
}