/* Scroll-Szene „Klarheit“: Bild wird beim Scrollen klar (ohne künstliche Schmutzeffekte) */
.clarity { position: relative; height: 320vh; background: #000; --p: 0; }
.clarity__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.clarity__media { position: absolute; inset: 0; transform: scale(calc(1.12 - var(--p) * .12)); will-change: transform; }
.clarity__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(calc((1 - var(--p)) * 14px)) saturate(calc(.35 + var(--p) * .75)) brightness(calc(.78 + var(--p) * .22)) contrast(calc(.8 + var(--p) * .2));
  will-change: filter;
}
.clarity__haze { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(205,210,215,.55), rgba(120,128,140,.55));
  opacity: calc(1 - var(--p) * 1.15); }
.clarity__sheen { position: absolute; top: -20%; bottom: -20%; width: 38%; left: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(calc(-120% + var(--p) * 420%)) skewX(-14deg); opacity: calc(var(--p) * 1.6); }
.clarity__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 48%, rgba(0,0,0,calc(.12 + var(--p) * .3)), rgba(0,0,0,0) 75%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1) 40%, rgba(0,0,0,.4)); }
.clarity__text { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 22px; width: 100%; max-width: 980px; }
.clarity__eyebrow { display: block; font-size: 17px; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 14px; letter-spacing: -.01em; }
.clarity__words { color: #fff; margin: 0; position: relative; height: 1.1em; font-size: clamp(48px, 10vw, 128px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.clarity__words span { position: absolute; inset: 0; opacity: 0; transform: translateY(.18em); transition: opacity .6s cubic-bezier(.28,.11,.32,1), transform .6s cubic-bezier(.28,.11,.32,1); text-shadow: 0 4px 40px rgba(0,0,0,.25); }
.clarity__words span.on { opacity: 1; transform: none; }
.clarity__words span.dim { color: rgba(255,255,255,.92); }
.clarity__sub { text-shadow: 0 2px 20px rgba(0,0,0,.4); margin: 26px auto 0; max-width: 620px; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: rgba(255,255,255,.88); opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.28,.11,.32,1), transform .7s cubic-bezier(.28,.11,.32,1); }
.clarity__cta { margin-top: 28px; opacity: 0; transform: translateY(14px); transition: opacity .7s .1s cubic-bezier(.28,.11,.32,1), transform .7s .1s cubic-bezier(.28,.11,.32,1); }
.clarity.is-clear .clarity__sub, .clarity.is-clear .clarity__cta { opacity: 1; transform: none; }
.clarity__cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 980px; background: #fff; color: #0f265a; font-weight: 600; font-size: 17px; text-decoration: none; transition: transform .2s; }
.clarity__cta a:hover { transform: scale(1.03); }
.clarity__progress { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.clarity__progress i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s, width .3s; }
.clarity__progress i.on { background: #fff; width: 22px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .clarity { height: auto; --p: 1; }
  .clarity__sticky { position: relative; height: 80vh; }
  .clarity__words span { transition: none; }
  .clarity__progress { display: none; }
}