/* ==========================================================================
   vertrauensvideo.ch – Design-Upgrade (Animationen & Feinschliff)
   Texte und Layout bleiben unverändert; nur Bewegung, Tiefe, Zustände.
   ========================================================================== */

html { scroll-behavior: smooth; }
/* Reveal-Versätze dürfen nie horizontales Scrollen erzeugen */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Seitenstart: sanftes Einblenden ---- */
@keyframes vv-page-in { from { opacity: 0; } to { opacity: 1; } }
body.vv-ready { animation: vv-page-in .5s ease-out both; }

/* ---- Scroll-Reveal ---- */
.vv-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--vv-delay, 0ms); will-change: opacity, transform; }
.vv-reveal.vv-in { opacity: 1; transform: none; will-change: auto; }
.vv-reveal--left { transform: translate3d(-36px, 0, 0); }
.vv-reveal--right { transform: translate3d(36px, 0, 0); }
@media (max-width: 767px) { .vv-reveal--left { transform: translate3d(-16px, 0, 0); } .vv-reveal--right { transform: translate3d(16px, 0, 0); } }
.vv-reveal--zoom { transform: scale(.94); }
.vv-reveal.vv-in.vv-reveal--left, .vv-reveal.vv-in.vv-reveal--right, .vv-reveal.vv-in.vv-reveal--zoom { transform: none; }

/* ---- Lange Überschriften auf Mobil sauber trennen (statt hartem Umbruch mitten im Wort) ---- */
@media (max-width: 767px) { .con-kit-atom-header .con-kit-quark-paragraph, .con-kit-component-header .con-kit-quark-paragraph { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }

/* ---- Hero ---- */
@keyframes vv-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.cover .con-kit-organism-background .con-kit-fade-box img,
.con-kit-section[data-p="3"] .con-kit-organism-background .con-kit-fade-box img { animation: vv-kenburns 22s ease-out both; transform-origin: 50% 40%; }
.cover .con-kit-organism-background, .cover .con-kit-organism-background .con-kit-fade-box { overflow: hidden; }

/* Highlight-Marker (z.B. "Vertrauensvideo.ch") zeichnet sich ein */
@keyframes vv-marker { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.highlight-container { transform-origin: left center; }
.vv-in .highlight-container, .vv-marker-in .highlight-container { animation: vv-marker .7s .45s cubic-bezier(.2,.7,.2,1) both; }

/* ---- Header: beim Scrollen kompakter, mit Blur und Schatten ---- */
.con-kit-section--fixed .con-kit-organism-background { transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
body.vv-scrolled .con-kit-section--fixed .con-kit-organism-background { background-color: rgba(0,0,0,.82) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 10px 40px -12px rgba(0,0,0,.6); }
.con-kit-section--fixed .con-kit-organism-background1 { transition: padding .35s ease; }
.con-kit-section--fixed .con-kit-component-logo__image { transition: transform .35s ease; }
body.vv-scrolled .con-kit-section--fixed .con-kit-component-logo__image { transform: scale(.9); }

/* Menüpunkte: Unterstrich wächst */
.con-kit-atom-menu-v2-item-inside__title { position: relative; }
.con-kit-atom-menu-v2--in-header .con-kit-atom-menu-v2-item-inside__title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #FFA500; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); border-radius: 2px; }
.con-kit-atom-menu-v2--in-header .con-kit-atom-menu-v2-item-inside:hover .con-kit-atom-menu-v2-item-inside__title::after { transform: scaleX(1); }

/* ---- Buttons ---- */
.con-kit-component-button--type-solid { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, filter .25s ease !important; }
.con-kit-component-button--type-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(255,165,0,.75); filter: saturate(1.08); }
.con-kit-component-button--type-solid:active { transform: translateY(0) scale(.98); }
.con-kit-component-button--type-solid::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 30%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%); transform: skewX(-20deg) translateX(-160%); pointer-events: none; }
.con-kit-component-button--type-solid:hover::after { animation: vv-shine .9s ease forwards; }
@keyframes vv-shine { to { transform: skewX(-20deg) translateX(620%); } }
.con-kit-component-button--type-transparent, .con-kit-component-button--type-line { transition: transform .25s ease, opacity .25s ease; }
.con-kit-component-button--type-transparent:hover { transform: translateY(-1px); }

/* Social-Icons */
.con-kit-atom-social .con-kit-component-button, [data-atom="social"] .con-kit-component-button { transition: transform .25s cubic-bezier(.2,.7,.2,1), color .25s ease !important; }
.con-kit-atom-social .con-kit-component-button:hover, [data-atom="social"] .con-kit-component-button:hover { transform: translateY(-3px) scale(1.12); }

/* ---- Karten / Kacheln ---- */
.con-kit-molecule-grid-item[data-kit-frame="solid"], .con-kit-molecule-grid-item[data-kit-frame="line"], .con-kit-molecule-textBlock[data-kit-frame="solid"] { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.con-kit-molecule-grid-item[data-kit-frame="solid"]:hover, .con-kit-molecule-grid-item[data-kit-frame="line"]:hover, .con-kit-molecule-textBlock[data-kit-frame="solid"]:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(9,31,67,.45); }
.con-kit-component-slider-item--inactive .con-kit-molecule-grid-item:hover { transform: none; box-shadow: none; }

/* Bilder in Kacheln: sanfter Zoom */
.con-kit-molecule-grid-item .con-kit-component-image .con-kit-fade-box img, .con-kit-molecule-grid-item .con-kit-component-video-preview img, [data-atom="person"] .con-kit-fade-box img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.con-kit-molecule-grid-item:hover .con-kit-component-image .con-kit-fade-box img, .con-kit-molecule-grid-item:hover .con-kit-component-video-preview img, [data-atom="person"]:hover .con-kit-fade-box img { transform: scale(1.05); }
.con-kit-component-image, .con-kit-component-video-preview, [data-atom="person"] .con-kit-fade-box { overflow: hidden; }

/* Video-Playbutton: Puls-Ring */
.con-kit-component-video-preview .con-kit-component-button { position: relative; }
.con-kit-component-video-preview .con-kit-component-button::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(255,165,0,.7); animation: vv-pulse-ring 2s cubic-bezier(.2,.7,.2,1) infinite; pointer-events: none; }
@keyframes vv-pulse-ring { 0% { transform: scale(.9); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
.con-kit-component-video-preview:hover .con-kit-component-button { transform: scale(1.12); }

/* ---- Slider ---- */
.con-kit-component-slider__items { transition: transform .75s cubic-bezier(.2,.7,.2,1) !important; }
.con-kit-component-slider-item { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.con-kit-component-slider-item--inactive { transform: scale(.96); }
.con-kit-component-slider-arrow .con-kit-component-icon { transition: transform .25s ease, box-shadow .25s ease; }
.con-kit-component-slider-arrow:hover .con-kit-component-icon { transform: scale(1.12); }
.con-kit-component-slider-pagination__item::before { transition: opacity .3s ease, transform .3s ease !important; }
.con-kit-component-slider-pagination__item--active::before { transform: scale(1.35); }

/* ---- Marquee: Pause bei Hover ---- */
.con-kit-component-marquee:hover .vv-marquee-running { animation-play-state: paused; }
.con-kit-component-marquee-gallery-item img { transition: transform .3s ease, filter .3s ease; }
.con-kit-component-marquee-gallery-item:hover img { transform: scale(1.08); }

/* ---- Nummern-Badges & Icons ---- */
.con-kit-media-item { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.vv-reveal.vv-in .con-kit-media-item { animation: vv-pop .6s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--vv-delay, 0ms) + 120ms); }
@keyframes vv-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.con-kit-component-list-item:hover .con-kit-media-item, .con-kit-molecule-grid-item:hover > .con-kit-component-atom-list .con-kit-media-item { transform: scale(1.08) rotate(-3deg); }

/* ---- Timeline: Fortschrittslinie ---- */
.con-kit-component-grid-timeline__progress-bar { transition: height .2s linear; }

/* ---- FAQ ---- */
.con-kit-component-list-item-accordion { transition: background-color .25s ease; border-radius: 8px; }
.con-kit-component-list-item-accordion:hover { background-color: rgba(9,31,67,.03); }
.con-kit-component-list-item-accordion__body { transition: height .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1) !important; }

/* ---- Team ---- */
[data-atom="person"] .con-kit-fade-box { border-radius: inherit; }
[data-atom="person"] .con-kit-fade-box img { filter: saturate(.92); }
[data-atom="person"]:hover .con-kit-fade-box img { filter: saturate(1.05); }

/* ---- Footer-Links ---- */
.con-kit-atom-menu-v2:not(.con-kit-atom-menu-v2--in-header) .con-kit-atom-menu-v2-item-inside { transition: transform .25s ease, opacity .25s ease; }
.con-kit-atom-menu-v2:not(.con-kit-atom-menu-v2--in-header) .con-kit-atom-menu-v2-item-inside:hover { transform: translateX(4px); }

/* ---- Scroll-Fortschritt oben ---- */
.vv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 99999; pointer-events: none; }
.vv-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFA500, #ffc247); transform-origin: left; transition: width .12s linear; box-shadow: 0 0 12px rgba(255,165,0,.6); }

/* ---- Cookie-Hinweis kompakter (mobil) ---- */
@media (max-width: 640px) { .vv-cookie__inner { padding: 14px 16px; font-size: 13px; gap: 12px; } .vv-cookie { padding: 10px; } }

/* ---- Kontaktformular: Fokus-Glow ---- */
.vv-form input:focus, .vv-form textarea:focus { box-shadow: 0 0 0 4px rgba(255,165,0,.18); border-color: #FFA500; }

/* ---- Reduced Motion: alles ruhig ---- */
@media (prefers-reduced-motion: reduce) {
  .vv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cover .con-kit-organism-background .con-kit-fade-box img, .con-kit-section[data-p="3"] .con-kit-organism-background .con-kit-fade-box img { animation: none !important; }
  .con-kit-component-video-preview .con-kit-component-button::before { animation: none !important; }
  .highlight-container { animation: none !important; }
  .vv-reveal.vv-in .con-kit-media-item { animation: none !important; }
  body.vv-ready { animation: none !important; }
}