/* ==========================================================================
   Grüner WhatsApp-Button „Kostenlose Ersteinschätzung – Unfallbilder direkt an Tilo Neumann“
   (wie auf der Startseite). Handy/Tablet: öffnet WhatsApp mit vorbereitetem Text.
   PC: führt zum Upload-Formular, beim Darüberfahren QR-Code für WhatsApp.
   Fliegt als Glas-Button ein, wackelt, färbt sich grün, blinkt; ein Finger tippt einmal darauf.
   Dazu gehört /assets/js/fotos-button.js
   ========================================================================== */
/* Grundverhalten der Buttons wie im Startseiten-Hero */
.hero__fotos{position:relative;isolation:isolate;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.hero__fotos::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.38) 48%,transparent 64%);transform:translateX(-130%);pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hero__fotos:hover{transform:translateY(-3px)}
  .hero__fotos:hover::after{transform:translateX(130%);transition:transform .75s cubic-bezier(.4,0,.2,1)}
}
/* Startseite: Button „Fotos schicken“. Handy/Tablet (Touch) öffnet WhatsApp mit vorbereitetem Text,
   PC führt zum Upload-Formular und zeigt beim Darüberfahren einen QR-Code für WhatsApp */
.hero__fotos-touch{position:relative;display:none}
.hero__fotos--wa .icon{fill:currentColor;stroke:none}
.hero__fotos-pc{position:relative;display:inline-flex}
.hero__qr{position:absolute;z-index:6;top:calc(100% + .7rem);left:0;display:flex;align-items:center;gap:.85rem;width:max-content;max-width:min(21rem,calc(100vw - 2rem));padding:.65rem .9rem .65rem .65rem;border:1px solid rgba(255,255,255,.32);border-radius:10px;background:rgba(8,26,46,.97);box-shadow:0 14px 34px rgba(0,0,0,.45);color:#BCD3EA;font-size:.92rem;line-height:1.35;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s;pointer-events:none}
.hero__qr::before{content:"";position:absolute;top:-.45rem;left:1.6rem;width:.8rem;height:.8rem;border-left:1px solid rgba(255,255,255,.32);border-top:1px solid rgba(255,255,255,.32);background:inherit;transform:rotate(45deg)}
.hero__qr b{display:block;margin-bottom:.1rem;color:#fff;font-weight:700}
.hero__qr-code{flex:none;box-sizing:content-box;width:123px;height:123px;padding:12px;border-radius:6px;background:#fff;fill:#000}
.hero__fotos-pc:hover .hero__qr,.hero__fotos-pc:focus-within .hero__qr{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
@media (hover:none),(pointer:coarse){
  .hero__fotos-touch{display:inline-flex}
  .hero__fotos-pc{display:none}
}
@media (prefers-reduced-motion:reduce){.hero__qr{transition:none}}
/* „Fotos schicken“: fliegt als Glas-Button ein, wackelt am Ziel und färbt sich 0,25 s nach der Landung
   in WhatsApp-Grün; danach blinkt er alle 2,4 s doppelt, das Symbol pulsiert, Glanzstreifen alle 4,8 s */
@property --fotos-a{syntax:"<color>";inherits:true;initial-value:rgba(37,211,102,.92)}
@property --fotos-b{syntax:"<color>";inherits:true;initial-value:rgba(29,168,81,.93)}
@property --fotos-c{syntax:"<color>";inherits:true;initial-value:rgba(18,140,126,.94)}
@property --fotos-r2{syntax:"<color>";inherits:true;initial-value:rgba(220,248,198,.7)}
@property --fotos-r3{syntax:"<color>";inherits:true;initial-value:rgba(255,255,255,.5)}
@property --fotos-glow{syntax:"<color>";inherits:true;initial-value:rgba(37,211,102,.32)}
@property --fotos-shade{syntax:"<color>";inherits:true;initial-value:rgba(7,94,84,.35)}
.page-hero,.hero.blueprint{overflow-x:clip}
.btn--ghost.hero__fotos{border:0;padding:calc(.75rem + 2px) calc(1.4rem + 2px);color:#fff;text-shadow:0 1px 2px rgba(3,40,30,.6),0 0 1px rgba(3,40,30,.4);
  --fotos-a:rgba(37,211,102,.92);--fotos-b:rgba(29,168,81,.93);--fotos-c:rgba(18,140,126,.94);--fotos-r2:rgba(220,248,198,.7);--fotos-r3:rgba(255,255,255,.5);--fotos-glow:rgba(37,211,102,.32);--fotos-shade:rgba(7,94,84,.35);
  background:linear-gradient(150deg,var(--fotos-a) 0%,var(--fotos-b) 45%,var(--fotos-c) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 22px var(--fotos-shade),0 10px 28px var(--fotos-glow)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .btn--ghost.hero__fotos{-webkit-backdrop-filter:blur(16px) saturate(190%);backdrop-filter:blur(16px) saturate(190%)}
}
/* heller Glasrand */
.btn--ghost.hero__fotos::before{content:"";position:absolute;inset:0;z-index:1;padding:1.5px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,var(--fotos-r2) 50%,var(--fotos-r3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.btn--ghost.hero__fotos .icon{width:2.05rem;height:2.05rem}
/* Text: „Kostenlose“ als rotes Schild (rote Schrift auf Grün wäre kaum lesbar) */
.btn--ghost.hero__fotos > span{font-size:.84rem;line-height:1.25}
.btn--ghost.hero__fotos .btn__num{margin-top:.15rem;font-size:1.22rem;line-height:1.1}
@media (max-width:1000px){
  .btn--ghost.hero__fotos{gap:.65rem;padding-inline:calc(1rem + 2px)}
  .btn--ghost.hero__fotos > span{font-size:.8rem}
  .btn--ghost.hero__fotos .btn__num{font-size:1.1rem}
}
@media (max-width:370px){
  .btn--ghost.hero__fotos{gap:.55rem;padding-inline:calc(.75rem + 2px)}
  .btn--ghost.hero__fotos > span{font-size:.74rem}
  .btn--ghost.hero__fotos .btn__num{font-size:1.02rem}
}
.hero__fotos-gratis{display:inline-block;margin-right:.15em;padding:.06em .42em .08em;border-radius:4px;background:#D7141A;color:#fff;font-weight:700;letter-spacing:.01em;text-shadow:none;box-shadow:0 1px 3px rgba(80,0,0,.35)}
.btn--ghost.hero__fotos:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -12px 22px rgba(7,94,84,.4),0 16px 36px rgba(37,211,102,.5)}
@media (prefers-reduced-motion:no-preference){
  /* Glanzstreifen, Doppel-Blinken und pulsierendes Symbol */
  .btn--ghost.hero__fotos.is-in::after{animation:fotos-glanz 4.8s 1.8s infinite}
  .btn--ghost.hero__fotos.is-in .icon{animation:fotos-icon 1.2s 1.8s infinite}
  .btn--ghost.hero__fotos.is-in{animation:fotos-einflug .95s cubic-bezier(.2,.8,.25,1) backwards,fotos-wackeln .8s .95s ease-in-out,fotos-farbe .45s 1.2s ease-out backwards,fotos-leuchten 2.4s 1.8s infinite}
  html.js .hero__fotos:not(.is-in){opacity:0;animation:fotos-notfall .4s 2.5s forwards}
  html.js .hero__fotos:not(.is-in):focus-visible{opacity:1}
}
@media (max-width:1000px) and (prefers-reduced-motion:no-preference){
  /* Handy/Tablet: Button fliegt 0,5 s zeitversetzt ein und wackelt am Ziel kurz nach */
  .btn--ghost.hero__fotos.is-in{animation:fotos-einflug .95s .5s cubic-bezier(.2,.8,.25,1) backwards,fotos-wackeln .8s 1.45s ease-in-out,fotos-farbe .45s 1.7s ease-out backwards,fotos-leuchten 2.4s 2.3s infinite}
  .btn--ghost.hero__fotos.is-in::after{animation:fotos-glanz 4.8s 2.3s infinite}
  .btn--ghost.hero__fotos.is-in .icon{animation:fotos-icon 1.2s 2.3s infinite}
}
@keyframes fotos-einflug{
  0%{opacity:0;transform:translate3d(38vw,-28px,0) rotate(9deg) scale(.82);filter:blur(7px)}
  55%{opacity:1;filter:blur(0)}
  68%{transform:translate3d(-10px,2px,0) rotate(-2.5deg) scale(1.04)}
  84%{transform:translate3d(4px,0,0) rotate(.8deg) scale(.99)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes fotos-wackeln{
  0%,100%{transform:none}
  14%{transform:rotate(-4deg) scale(1.03)}
  30%{transform:rotate(3.5deg) scale(1.02)}
  46%{transform:rotate(-2.5deg)}
  62%{transform:rotate(1.5deg)}
  78%{transform:rotate(-.7deg)}
}
/* Ausgangsfarben während des Einflugs: helles Glas mit blau-orangem Rand */
@keyframes fotos-farbe{
  from{--fotos-a:rgba(255,255,255,.32);--fotos-b:rgba(255,255,255,.12);--fotos-c:rgba(3,163,250,.20);--fotos-r2:rgba(3,163,250,.85);--fotos-r3:rgba(255,138,0,.95);--fotos-glow:rgba(3,163,250,.32);--fotos-shade:rgba(3,163,250,.20)}
}
@keyframes fotos-glanz{0%{transform:translateX(-130%)}16%,100%{transform:translateX(130%)}}
@keyframes fotos-leuchten{
  0%,30%,58%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 22px rgba(7,94,84,.35),0 10px 28px rgba(37,211,102,.32),0 0 0 0 rgba(37,211,102,0);filter:brightness(1)}
  12%{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -12px 22px rgba(7,94,84,.4),0 10px 46px rgba(37,211,102,.9),0 0 0 7px rgba(37,211,102,.3);filter:brightness(1.16)}
  42%{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -12px 22px rgba(7,94,84,.38),0 10px 36px rgba(37,211,102,.62),0 0 0 4px rgba(37,211,102,.2);filter:brightness(1.08)}
}
@keyframes fotos-icon{
  0%,40%,100%{transform:none;filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  10%{transform:scale(1.32) rotate(-9deg);filter:drop-shadow(0 0 7px rgba(255,255,255,.95))}
  20%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(255,255,255,.4))}
  30%{transform:scale(1.2) rotate(7deg);filter:drop-shadow(0 0 6px rgba(255,255,255,.85))}
}
@keyframes fotos-notfall{to{opacity:1}}
/* Finger fliegt ein, nachdem der Button fertig ist, und tippt links auf das Symbol (einmalig) */
.hero__finger{position:absolute;z-index:7;left:calc(var(--fx,0px) - 1.24rem);top:calc(var(--fy,0px) - .13rem);width:3.6rem;pointer-events:none;opacity:0;transform-origin:34% 3%}
.hero__finger svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(4,18,36,.45))}
.hero__finger::before{content:"";position:absolute;left:1.24rem;top:.13rem;width:2.2rem;height:2.2rem;margin:-1.1rem 0 0 -1.1rem;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 12px rgba(255,255,255,.7);opacity:0;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .hero__fotos.is-in + .hero__finger{animation:finger-tipp 2.3s 1.9s cubic-bezier(.3,.7,.3,1) both}
  .hero__fotos.is-in + .hero__finger::before{animation:finger-welle 2.3s 1.9s ease-out both}
  .btn--ghost.hero__fotos--form.is-in{animation:fotos-einflug .95s cubic-bezier(.2,.8,.25,1) backwards,fotos-wackeln .8s .95s ease-in-out,fotos-farbe .45s 1.2s ease-out backwards,fotos-leuchten 2.4s 1.8s infinite,fotos-druck .32s 2.87s ease-out}
}
@media (max-width:1000px) and (prefers-reduced-motion:no-preference){
  .hero__fotos.is-in + .hero__finger{animation-delay:2.4s}
  .hero__fotos.is-in + .hero__finger::before{animation-delay:2.4s}
  .btn--ghost.hero__fotos.is-in{animation:fotos-einflug .95s .5s cubic-bezier(.2,.8,.25,1) backwards,fotos-wackeln .8s 1.45s ease-in-out,fotos-farbe .45s 1.7s ease-out backwards,fotos-leuchten 2.4s 2.3s infinite,fotos-druck .32s 3.37s ease-out}
}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .btn--ghost.hero__fotos--wa.is-in{animation:fotos-einflug .95s cubic-bezier(.2,.8,.25,1) backwards,fotos-wackeln .8s .95s ease-in-out,fotos-farbe .45s 1.2s ease-out backwards,fotos-leuchten 2.4s 1.8s infinite,fotos-druck .32s 2.87s ease-out}
}
@keyframes finger-tipp{
  0%{opacity:0;transform:translate(95px,115px) rotate(26deg) scale(1.15)}
  30%{opacity:1;transform:translate(7px,-12px) rotate(-10deg) scale(1.04)}
  40%{transform:translate(0,0) rotate(-10deg) scale(1)}
  45%{transform:translate(0,2px) rotate(-10deg) scale(.9)}
  53%{transform:translate(3px,-7px) rotate(-10deg) scale(1.02)}
  76%{opacity:1;transform:translate(3px,-7px) rotate(-10deg) scale(1.02)}
  100%{opacity:0;transform:translate(80px,100px) rotate(20deg) scale(1.1)}
}
@keyframes finger-welle{
  0%,43%{opacity:0;transform:scale(.25)}
  46%{opacity:.95;transform:scale(.35)}
  72%,100%{opacity:0;transform:scale(2.3)}
}
@keyframes fotos-druck{0%,100%{transform:none}40%{transform:scale(.955)}}
@media (prefers-reduced-motion:reduce){.hero__finger{display:none}}

/* Unterseiten: PC-Schriftgröße wie auf der Startseite, Handy volle Breite
   (.hero__cta: Übersichtsseite Einsatzgebiet mit großem Kopfbereich) */
@media (min-width:1001px){.btn--ghost.hero__fotos .btn__num{font-size:1.16rem}}
@media (max-width:1000px){
  :is(.page-hero__cta,.hero__cta) > .hero__fotos-touch,:is(.page-hero__cta,.hero__cta) > .hero__fotos-pc{width:100%;max-width:24rem}
  .hero__fotos-touch .hero__fotos,.hero__fotos-pc .hero__fotos{width:100%}
}
/* Der Hörer im orangen Button klingelt erst, wenn der Finger fertig ist */
@media (prefers-reduced-motion:no-preference){
  :is(.page-hero__cta,.hero__cta) .btn--anruf .icon{animation-delay:4.4s}
}

/* QR-Hinweis öffnet nach oben: Der Seitenkopf zeigt wegen des Titelbilds nur, was innerhalb
   seiner Fläche liegt. Nach unten würde der Hinweis am Rand des Seitenkopfs abgeschnitten. */
.hero__qr{top:auto;bottom:calc(100% + .7rem);transform:translateY(6px)}
.hero__qr::before{top:auto;bottom:-.45rem;transform:rotate(225deg)}