/* ==========================================================================
   everplain-Vorteile — Laufschrift und Scroll-Reveal

   Am 26.09.2026 aus css/konfigurator.css herausgelöst, weil der Abschnitt seit
   dem Produktseiten-Umbau an zwei Stellen hängt: unter dem Konfigurator
   (partials/konfi-unten) und auf /produkte. Die Klassennamen bleiben .kfu-*,
   damit Markup, Tests und Editor unverändert weiterlaufen.

   Markup: resources/views/partials/everplain-vorteile.blade.php
   Verhalten: public/js/everplain-vorteile.js
   ========================================================================== */
.kfu-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Laufschrift (Hashtags) */
.kfu-sec-vorteile { padding-top: 36px; }
.kfu-marq { width: 100vw; margin: 0 0 36px calc(50% - 50vw); overflow: hidden; white-space: nowrap; }
.kfu-marq-track { display: inline-flex; gap: 0; animation: kfuMarq 60s linear infinite; will-change: transform; }
.kfu-marq-track span { font-size: clamp(48px, 7vw, 108px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: #111; padding: 0 0.45em; }
@keyframes kfuMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kfu-marq-track { animation: none; } }

/* Vorteile: Bild links sticky, Texte rechts scrollen, Bilder wechseln per Reveal */
.kfu-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 80px; align-items: start; }
/* Das Foto bleibt beim Scrollen MITTIG stehen (Julian, 30.09.2026), nicht 40 px
   unter der Oberkante: die Spalte klebt über die volle Bildschirmhöhe, das
   Bild sitzt darin zentriert. Mit top:40px wanderte es beim Scrollen an den
   oberen Rand und lag dort schief zu den Texten daneben. */
.kfu-scroll-media { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
/* max-width statt max-height: das Bild ist quadratisch (aspect-ratio), also
   begrenzt die Breite auch die Höhe — sonst ragte es bei flachen Fenstern
   oben und unten aus der klebenden Spalte heraus. */
.kfu-scroll-frame { position: relative; width: 100%; max-width: min(100%, 78svh); margin-inline: auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #eee; }
.kfu-scroll-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(100% 0 0 0); transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.kfu-scroll-frame > img.is-active, .kfu-scroll-frame > img.is-past { clip-path: inset(0 0 0 0); }
.kfu-scroll-badge { position: absolute; right: 18px; bottom: 18px; z-index: 2; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 100px; padding: 9px 14px 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.kfu-scroll-badge img { display: block; height: 16px; width: auto; }
.kfu-scroll-list { display: flex; flex-direction: column; }
.kfu-item { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: 0.18; transition: opacity 0.45s; }
.kfu-item.is-active { opacity: 1; }
.kfu-item:first-child { min-height: calc(100vh - 136px); min-height: calc(100svh - 136px); }
.kfu-item-img { display: none; }
.kfu-card-h { font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0 0 26px; }
.kfu-card-p { font-size: 16px; line-height: 1.6; color: #111; margin: 0; max-width: 520px; }
.kfu-card-p strong { font-weight: 700; }
/* Beleg-Zeile (Haken-Badge + Zahl + Unterzeile) und Hashtag-Chip unter dem Text */
.kfu-fakt { display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; font-size: 15px; line-height: 1.3; }
.kfu-fakt svg { flex: none; margin-top: 1px; }
.kfu-fakt strong { display: block; font-weight: 600; }
.kfu-fakt-sub { display: block; font-size: 12.5px; color: rgba(17, 17, 17, 0.62); margin-top: 2px; }   /* Kontrast-Runde 07.09.2026: .55 war zu blass */
.kfu-farben { display: flex; gap: 6px; margin-top: 10px; }
.kfu-farben i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); display: block; }
.kfu-chip { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(17, 17, 17, 0.06); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(17, 17, 17, 0.6); }
@media (max-width: 820px) {
  .kfu-scroll { display: block; }
  .kfu-scroll-media { display: none; }
  .kfu-item { min-height: 0; opacity: 1; padding: 28px 0; }
  .kfu-item:first-child { min-height: 0; }
  .kfu-item-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; margin-bottom: 22px; }
  .kfu-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .kfu-card-h { margin-bottom: 16px; }
}