/* ===== Cinematic & Handschrift – Vorschau-Layer (überschreibt styles.css) ===== */

/* Sanfte Seiten-Übergänge (Cross-Document), wo unterstützt */
@view-transition { navigation: auto; }

/* Feiner Film-/Papier-Grain über die ganze Seite */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;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='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

/* Hero: Headline zeilenweise maskiert nach oben */
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln > i{display:block;font-style:normal;transform:translateY(116%);animation:lineUp 1s cubic-bezier(.22,1,.36,1) both;}
.hero h1 .ln:nth-child(2) > i{animation-delay:.12s;}
@keyframes lineUp{to{transform:translateY(0);}}
.hero .sub{animation:fadeUp .85s ease .4s both;}
.hero .actions{animation:fadeUp .85s ease .55s both;}
.hero .kicker{animation:fadeUp .7s ease .15s both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* Hero-Bild: langsamer Ken-Burns-Zoom */
.hero-media{overflow:hidden;}
.hero-media img.kb{animation:kb 24s ease-in-out infinite alternate;transform-origin:62% 48%;will-change:transform;}
@keyframes kb{from{transform:scale(1.02);}to{transform:scale(1.09);}}

/* Bild-Wipe (Vorhang von unten) beim Reveal */
.reveal-img img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1);}
.reveal-img.in img{clip-path:inset(0 0 0 0);}

/* Testimonials gestaffelt statt gleichzeitig */
.reveal.grid3{opacity:1;transform:none;}
.reveal.grid3 .tcard{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.grid3.in .tcard{opacity:1;transform:none;}
.reveal.grid3.in .tcard:nth-child(2){transition-delay:.12s;}
.reveal.grid3.in .tcard:nth-child(3){transition-delay:.24s;}

/* Loop-Herz-Motiv als Section-Trenner */
.heart-div{display:flex;justify-content:center;align-items:center;gap:18px;padding:clamp(26px,5vw,54px) var(--pad);}
.heart-div::before,.heart-div::after{content:"";height:1px;width:min(120px,18vw);background:var(--line);}
.heart-div span{width:26px;height:26px;flex:0 0 auto;background:var(--accent);opacity:.55;
  -webkit-mask:url(favicon.png) center/contain no-repeat;mask:url(favicon.png) center/contain no-repeat;}

/* Grosses, dezentes Loop-Herz-Wasserzeichen in der Statement-Sektion */
.statement{position:relative;overflow:hidden;}
.wm-heart{position:absolute;right:-6%;top:-14%;width:min(48%,480px);aspect-ratio:1/1;pointer-events:none;z-index:0;
  background:#fff;opacity:.055;will-change:transform;
  -webkit-mask:url(favicon.png) center/contain no-repeat;mask:url(favicon.png) center/contain no-repeat;}
.statement .inner{position:relative;z-index:1;}

/* Buttons: dezenter Lift + weicher Schatten */
.btn{transition:background .2s,border-color .2s,color .2s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(33,28,23,.16);}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;}
  .hero h1 .ln > i{transform:none !important;}
  .reveal-img img{clip-path:none !important;}
  .hero .sub,.hero .actions,.hero .kicker{opacity:1 !important;transform:none !important;}
  .btn:hover{transform:none !important;}
}