/* ============================================================
   BRIEFR ENHANCE LAYER — Animations & Micro-Interactions
   Progressive Enhancement: greift NUR unter html.enh
   (Klasse wird von /briefr-enhance.js gesetzt, wenn GSAP geladen
   ist und keine Reduced-Motion-Präferenz vorliegt).
   Farben ausschließlich aus den Seiten-Variablen:
   --svc (Leistungsseiten) → --accent (Startseite) →
   --c (Detailseiten) → --cyan (helle Welt). Kein Hex.
   ============================================================ */

html.enh{--enh-c:var(--svc,var(--accent,var(--c,var(--cyan))));}

/* Kein overflow-Guard auf html — das bricht position:sticky (FAQ-Spalte,
   Header). Horizontales Clipping übernimmt das vorhandene body{overflow-x:hidden}. */

/* ---- Header: versteckt sich beim Runterscrollen ---- */
html.enh .bui-nav{transition:transform .32s cubic-bezier(.4,0,.2,1);}
html.enh .bui-nav.enh-hide{transform:translateY(-110%);}

/* ---- Hero-Headline: Wort-Masken (Wrapper via JS, kein No-JS-Effekt) ---- */
html.enh .enh-wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .1em .14em;margin:-.05em -.1em -.14em;}
html.enh .enh-w{display:inline-block;}

/* ---- Buttons: Sheen-Sweep + Press ---- */
html.enh .btn{position:relative;overflow:hidden;}
html.enh .btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-220%) skewX(-18deg);pointer-events:none;}
html.enh .btn:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .7s ease;}
html.enh .btn:active{transform:scale(.97);}

/* ---- Schlüsselwort-Unterstreichung (sparsam! Klasse via JS) ---- */
html.enh .enh-u{--u:0%;background:linear-gradient(var(--enh-c),var(--enh-c)) no-repeat 0 94%/var(--u) .07em;}

/* ---- Cards: Lift mit weicher Feder + Akzent-Border ---- */
html.enh .bcell,html.enh .pcard{transition:transform .5s cubic-bezier(.2,1.2,.4,1),box-shadow .5s ease,border-color .5s ease;}
html.enh .bcell:hover,html.enh .pcard:hover{border-color:color-mix(in srgb,var(--enh-c) 45%,transparent);}
html.enh .pcard__media img,html.enh .feat__media img{transition:transform .65s cubic-bezier(.2,1,.3,1);}
html.enh .pcard:hover .pcard__media img,html.enh .feat:hover .feat__media img{transform:scale(1.05);}

/* ---- Prozess (Leistungsseiten): Linie zeichnet sich, Dots leuchten nacheinander ---- */
html.enh .flow::before{transform:scaleX(var(--draw,1));transform-origin:left;}
html.enh .fstep__dot{transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;}
html.enh .fstep__dot.is-lit{background:var(--enh-c);border-color:var(--enh-c);color:#fff;box-shadow:0 8px 26px color-mix(in srgb,var(--enh-c) 45%,transparent);}

/* ---- Track-Record (Startseite): Nodes leuchten nacheinander auf ---- */
html.enh .tritem__node{transition:border-color .4s ease,box-shadow .4s ease;}
html.enh .tritem:not(.tritem--live) .tritem__node.is-lit{border-color:var(--enh-c);box-shadow:0 0 0 4px color-mix(in srgb,var(--enh-c) 18%,transparent);}

/* ---- Reduced Motion: Dauer-Animationen aus ---- */
@media (prefers-reduced-motion: reduce){
  html.enh .btn::after{display:none;}
  html.enh .bui-nav,html.enh .bcell,html.enh .pcard,html.enh .pcard__media img,html.enh .feat__media img,html.enh .fstep__dot,html.enh .tritem__node{transition:none;}
}