/* Bestätigung «gesendet» mit Flug — EINE Stelle für Startseite (Anfrage) und Shop-Kasse (Bestellung).
   Herausgelöst aus public/index.html am 06.11.2026; Logik: public/gesendet.js (window.VxGesendet). */
/* ===== Bestätigung «Anfrage gesendet» (01.10.2026; Flug der Anfrage 09.10.2026) =====
   Wort Timo 09.10: die Anfrage fliegt als Briefumschlag vom Kunden (mit seinem Vornamen)
   zur Ortsmarke «Vulstrix Bau»; danach «Vielen Dank, Anna! Ihre Anfrage wurde gesendet.»
   Bleibt offen, bis der Kunde schliesst. Bei «Bewegung reduzieren» sofort der Endzustand. */
.gesendet{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,32,.55);backdrop-filter:blur(3px)}
.gesendet.open{display:flex}
.gesendet .karte{position:relative;overflow:hidden;width:min(420px,100%);background:#fff;border-radius:18px;
  padding:26px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:gs-auf .35s ease-out}
.gesendet h3{font-size:1.4rem;font-weight:800;margin:0 0 .35rem;color:#282f33;overflow-wrap:anywhere}
.gesendet p{color:#465158;margin:0 0 1.2rem;font-size:1.02rem}
.gesendet button{background:#0d767a;color:#fff;border:0;border-radius:9px;padding:.7rem 1.4rem;font:inherit;font-weight:700;cursor:pointer}
.gesendet button:hover{background:#075b5e}
/* Bühne (09.10.2026, Wort Timo: «extremer — Berg, Hindernisse, und bei der Ankunft etwas Tolles»):
   eine Welt 300×170 mit Berg, Wolke und Vögeln; der Umschlag taucht ins Tal, steigt über den Gipfel,
   dreht einen Looping und stürzt zur Ortsmarke. Dort wachsen der Marke Arme und Beine, sie lacht und
   tanzt, Konfetti aus Werkzeugen fliegt. Die Welt wird als Ganzes auf die Kartenbreite verkleinert
   (--k, aus dem Skript), damit die Flugbahn auf jedem Telefon genau über den Berg führt. */
.gs-buehne{position:relative;height:calc(170px * var(--k,1));margin:0 0 14px}
.gs-welt{position:absolute;left:50%;top:0;width:300px;height:170px;transform:translateX(-50%) scale(var(--k,1));transform-origin:50% 0}
.gs-land{position:absolute;inset:0;width:300px;height:170px;overflow:visible}
.gs-land .berg{fill:#dfe7e9}.gs-land .berg2{fill:#cbd8db}.gs-land .schnee{fill:#fff}
.gs-land .boden{stroke:#cbd8db;stroke-width:2}
.gs-land .wolke{fill:#eef3f4}
.gs-land .vogel{fill:none;stroke:#8a989d;stroke-width:1.6;stroke-linecap:round}
.gs-land .route{fill:none;stroke:#0d767a;stroke-width:1.6;stroke-dasharray:3 6;stroke-linecap:round;opacity:.35}
.gs-wer{position:absolute;top:46px;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px}
.gs-wer.kunde{left:0}
.gs-wer.firma{right:0}
.gs-wer small{width:100%;font-size:.8rem;font-weight:700;line-height:1.2;color:#282f33;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-kopf{width:46px;height:46px;border-radius:50%;background:#eef5f5;border:2px solid #0d767a;display:grid;place-items:center;box-sizing:border-box}
.gs-kopf svg{width:26px;height:26px}
.gs-marke{position:relative;width:46px;height:46px;display:grid;place-items:center;transform-origin:50% 100%}
.gs-marke svg{width:56px;height:52px;overflow:visible}
.gs-marke .koerper{fill:#0d767a}.gs-marke .loch{fill:#fff}
.gs-marke .glied{fill:none;stroke:#0d767a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gs-marke .mund{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.gs-marke .arm,.gs-marke .bein,.gs-marke .mund{transform-box:fill-box;opacity:0}
.gs-marke .arm.l{transform-origin:100% 100%}.gs-marke .arm.r{transform-origin:0 100%}.gs-marke .bein{transform-origin:50% 0}
/* Der Umschlag mit Blatt und «Anfrage» — EIN Objekt, fliegt der Bahn nach (offset-path). */
.gs-flug{position:absolute;left:0;top:0;width:58px;offset-path:path('M52,62 C62,36 66,128 80,132 C96,136 112,40 150,30 C180,22 194,0 176,3 C158,6 164,30 186,34 C198,36 204,58 212,61');
  offset-anchor:50% 35%;offset-distance:100%;offset-rotate:0deg;transform:scale(.62)}
.gs-brief{display:flex;flex-direction:column;align-items:center;gap:1px}
.gs-brief svg{width:46px;height:38px;overflow:visible}
.gs-brief b{font-size:.74rem;font-weight:800;letter-spacing:.02em;color:#0d767a;background:#fff;border-radius:6px;padding:0 4px;line-height:1.35}
.gs-konfetti{position:absolute;right:15px;top:62px;width:0;height:0}
.gs-konfetti i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;opacity:0}
.gs-konfetti svg{width:22px;height:22px;display:block}
.gs-konfetti .w{fill:none;stroke:#0d767a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gs-konfetti .g{fill:none;stroke:#282f33;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gs-konfetti .o{fill:none;stroke:#e0a326;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Ablauf: auftauchen und anheben (0–0,3 s) · Flug 0,3–2,3 s, bremst vor der Marke · Ankunft 2,3 s:
   Marke wächst Arme und Beine, lacht, tanzt 1,2 s, Konfetti · Text ab 2,6 s. Einmal. */
.gesendet.open .gs-flug{animation:gs-weg 2.4s linear both}
.gesendet.open .gs-marke{animation:gs-tanz 1.2s 2.4s ease-in-out both}
.gesendet.open .gs-marke .arm,.gesendet.open .gs-marke .bein,.gesendet.open .gs-marke .mund{animation:gs-wachse .25s 2.35s ease-out both}
.gesendet.open .gs-marke .arm.l{animation:gs-wachse .25s 2.35s ease-out both,gs-winkL .3s 2.6s ease-in-out 3 alternate}
.gesendet.open .gs-marke .arm.r{animation:gs-wachse .25s 2.35s ease-out both,gs-winkR .3s 2.6s ease-in-out 3 alternate}
.gesendet.open .gs-konfetti i{animation:gs-flieg 1.25s 2.4s cubic-bezier(.2,.7,.4,1) both}
.gesendet.open .gs-text{animation:gs-zeig .35s 2.6s ease-out both}
@keyframes gs-weg{
  0%{offset-distance:0%;offset-rotate:0deg;opacity:0;transform:translateY(10px) scale(.8)}
  11%{offset-distance:0%;offset-rotate:0deg;opacity:1;transform:translateY(-6px) scale(1)}
  12%{offset-distance:0%;offset-rotate:auto;transform:scale(1);animation-timing-function:cubic-bezier(.42,.08,.32,1)}
  93%{offset-distance:100%;offset-rotate:auto;transform:scale(1);animation-timing-function:ease-out}
  94%{offset-distance:100%;offset-rotate:0deg;transform:scale(.95)}
  100%{offset-distance:100%;offset-rotate:0deg;opacity:1;transform:scale(.62)}}
@keyframes gs-wachse{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes gs-tanz{0%{transform:none}15%{transform:translateY(-10px) rotate(-10deg)}30%{transform:translateY(0) rotate(8deg)}
  45%{transform:translateY(-8px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}75%{transform:translateY(-5px) rotate(-4deg)}100%{transform:none}}
@keyframes gs-winkL{to{transform:rotate(-35deg)}}
@keyframes gs-winkR{to{transform:rotate(35deg)}}
@keyframes gs-flieg{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}
  12%{opacity:1;transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45)) rotate(calc(var(--r) * .3)) scale(1)}
  60%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 46px)) rotate(calc(var(--r) * 1.6)) scale(.9)}}
@keyframes gs-zeig{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gs-auf{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* Ohne Bewegung = gleich das Endbild: Umschlag klein an der Marke, Marke mit Armen, Beinen und Lachen. */
@media(prefers-reduced-motion:reduce){
  .gesendet .karte,.gesendet.open .gs-flug,.gesendet.open .gs-marke,.gesendet.open .gs-marke .arm,.gesendet.open .gs-marke .bein,
  .gesendet.open .gs-marke .mund,.gesendet.open .gs-konfetti i,.gesendet.open .gs-text{animation:none}
  .gesendet .gs-marke .arm,.gesendet .gs-marke .bein,.gesendet .gs-marke .mund{opacity:1}}