/* WingDrop, wirf's rüber. Blau, clean, verkaufsfördernd. */

:root {
  --blue-deep: #1257B8;
  --blue-bright: #1E88E5;
  --blue-light: #5EB8FF;
  --grad: linear-gradient(135deg, var(--blue-deep), var(--blue-bright));
  /* Erfolgsgrün: frisch, aber im Blau-Kosmos zuhause (Haken, Empfangen) */
  --ok: #2FA45E;
  --ok-grad: linear-gradient(135deg, #26944F, #35BA6C);
  --ink: #122240;
  --muted: #5A6982;
  --ground: #F6F9FE;
  --card: #FFFFFF;
  --hairline: #E3EAF4;
  --elev: 0 8px 28px rgba(18, 34, 64, 0.08);
  --elev-hover: 0 14px 36px rgba(18, 34, 64, 0.12);
  --radius: 18px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bracket: rgba(30, 136, 229, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

h1, h2 { font-weight: 800; }

h3 { font-weight: 600; }

h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }

main, .site-header, .site-footer {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Mono-Mikro-Labels in Versalien */

.mono-label {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  font-weight: 500;
  color: var(--blue-deep);
  margin-bottom: 0.9rem;
}

.section-head { max-width: 640px; margin-bottom: 2.4rem; }

.section-intro {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0.8rem;
  max-width: 52ch;
}

/* ===== Header ===== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-block: 1.2rem;
}

.site-nav { display: flex; gap: 1.4rem; }

.site-header nav a { white-space: nowrap; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-bird { width: 42px; height: auto; }

.brand-name {
  /* Futura-Wortmarke: Versalien, enge Laufweite; "WING" kursiv in Blau.
     Windows hat kein Futura, dort greifen Century Gothic bzw. Jost. */
  font-family: "Futura", "Century Gothic", "Jost", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-name em {
  /* Futura hat keinen Bold-Italic-Schnitt: fetter Schnitt, künstlich
     angeschrägt, wirkt auf allen Systemen identisch fett-kursiv. */
  font-style: normal;
  font-weight: 800;
  display: inline-block;
  transform: skewX(-10deg);
  /* Kraeftigeres, dunkleres Blau fuer WING (Freddys Wunsch). */
  color: var(--blue-deep);
}

.quiet-link {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.quiet-link:hover { color: var(--blue-deep); }

/* ===== Hero ===== */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

.claim {
  font-size: clamp(2.7rem, 7.5vw, 4.6rem);
  /* Enger an Chip und Subline, damit die Knoepfe hoeher rutschen. */
  margin: 0.75rem 0 0.7rem;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Wechsel-Headline mit Feenstaub: Zeile 2 wechselt synchron zum Hero-Loop
   zwischen "Dein Rechner fängt." und "Dein iPhone fängt.". Beide Varianten
   liegen im selben Grid-Feld übereinander, die längere bestimmt Breite und
   Höhe, dadurch gibt es keinen Layout-Sprung. Der Wechsel selbst ist ein
   Crossfade auf Zeilenebene (wd-act-a/b im Drehbuch am Datei-Ende), das
   Zerstäuben in den glitzernden Partikelschwarm übernimmt das
   Canvas-Script in der index.html. Die Buchstaben-Spans (claim-w = Wort,
   claim-l = Buchstabe) bleiben als Mess-Anker für dessen Sampling. Ohne
   Animation (reduced motion, alte Browser) steht Variante A statisch,
   das Canvas startet dann gar nicht erst. */

.claim-swap {
  display: inline-grid;
  position: relative;
  /* Die Wechselzeile benennt jetzt die Richtung ("Vom iPhone zu Windows
     oder Mac") und ist damit rund doppelt so lang wie vorher. Kleiner
     gesetzt bleibt sie lesbar, ohne die Buehne zu sprengen. */
  font-size: 0.7em;
  line-height: 1.14;
  margin-top: 0.03em;
}

.claim-line {
  grid-area: 1 / 1;
  /* Sicherheitsnetz: sollte eine Variante in einem ungetesteten Band doch
     einzeilig bleiben, sitzt sie mittig in der reservierten Höhe statt
     mit Loch darunter. */
  align-self: center;
  /* aria-hidden schützt nicht vor Auswahl und Zwischenablage: ohne
     user-select landete die Zeile beim Kopieren dreifach im Clipboard
     (beide Buchstaben-Ebenen plus sr-only). Kopierbar bleibt allein
     die sr-only-Vollversion. */
  -webkit-user-select: none;
  user-select: none;
}

.claim-line-b { opacity: 0; }

.claim-w { display: inline-block; white-space: nowrap; }

.claim-l {
  /* Jeder Buchstabe trägt den Verlauf selbst (135deg auf Glyph-Höhe
     wirkt wie der Zeilen-Verlauf). Die Spans sind außerdem die
     Mess-Anker, an denen das Feenstaub-Canvas Schrift und
     Partikelpositionen pixelgenau abtastet. */
  display: inline-block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Beide Headline-Varianten müssen identisch umbrechen, sonst reserviert
   die zweizeilige Variante während der einzeiligen eine leere Geisterzeile
   (das inline-grid nimmt die Höhe der höheren Zeile). In den Bändern, in
   denen "Dein Rechner fängt." umbricht, "Dein iPhone fängt." aber einzeilig
   passt (gemessen: ca. 391-421 px und ca. 830-900 px), erzwingt
   display:block auf dem letzten Wort ("fängt.") für beide Zeilen denselben
   zweizeiligen Umbruch mit gleicher Wortgeometrie. Die Grenzen tragen
   Puffer, weil die system-ui-Fontmetriken je OS um einige Pixel streuen;
   bei 360 px entspricht das ohnehin dem natürlichen Umbruch. */
/* Beide Varianten sollen gleich viele Zeilen belegen, damit keine leere
   Geisterzeile entsteht: gemeinsame Mindesthoehe ueber das Grid. */

/* Screenreader-Vollversion der Wechselzeile (die Span-Ebenen sind
   aria-hidden, gestückelte Buchstaben wären unlesbar). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.subline {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  font-weight: 400;
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* Buttons */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 1.8rem;
}

.cta-block { display: flex; flex-direction: column; gap: 0.45rem; }

.btn {
  display: inline-block;
  padding: 0.9rem 1.7rem;
  /* Mind. 1.17rem (18,7 px) bei 700: Large-Text-Schwelle, damit Weiß auf
     dem hellen Verlaufsende (#1E88E5, ~3,7:1) WCAG AA erfüllt. */
  font-size: 1.17rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 87, 184, 0.28), 0 0 24px rgba(30, 136, 229, 0.18);
}

.btn-primary:hover { box-shadow: 0 12px 26px rgba(18, 87, 184, 0.34), 0 0 28px rgba(30, 136, 229, 0.18); }

.btn-ghost {
  background: var(--card);
  color: var(--blue-deep);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--elev);
}

.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-light), var(--elev-hover); }

.cta-note {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}

/* App-Store-Badge (Navy, ehrlich: kommt bald) */

.store-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 0.55rem 1.2rem;
  user-select: none;
}

.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }

.store-badge-text small { font-size: 0.7rem; font-weight: 500; }

.store-badge-text strong { font-size: 1.1rem; font-weight: 700; }

.store-note {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--blue-deep);
  max-width: 22ch;
}

/* Pain-Opener über der Hero-Headline: eckige Pille im Blau-Verlauf mit
   weißer Schrift. Bewusst kompakt und mit kleinem Radius, damit sie
   nicht mit den CTA-Buttons verwechselt wird. */
.hero-pain {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue-deep);
  background: rgba(94, 184, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(18, 87, 184, 0.18);
  padding: 0.5em 0.7em;
  border-radius: 10px;
  margin-bottom: 1.1rem;
}

/* ===== Demo-Rahmen: Geräte-Mockups ===================================== */
/* Statische Platzhalter, der Visualizer animiert sie später. */

.demo-radar {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(92%, 460px);
  height: auto;
  /* Bewusst sehr zurückhaltend: Die Bühne hat mit Bögen, Pfeilen und
     Tauben-Radar genug Linien, der Hintergrund darf nur ahnen lassen. */
  color: rgba(18, 87, 184, 0.06);
  pointer-events: none;
}

/* Windows-Fenster (Windows-11-Stil: leicht gerundete Ecken,
   Titel mittig, rechts Minimieren, Maximieren, Schließen) */

.mock-window {
  position: relative;
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--elev), inset 0 0 0 1px var(--hairline);
}

.mw-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  background: #FBFDFF;
  border-radius: 8px 8px 0 0;
}

.mw-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  color: var(--muted);
}

.mw-controls svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.8;
}

.mw-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.66rem;
  letter-spacing: -0.04em;
  white-space: nowrap;
  /* Nie in die Fenster-Controls laufen (links Icon, rechts drei Buttons) */
  max-width: calc(100% - 110px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-body { padding: 12px; border-radius: 0 0 8px 8px; }

.mw-body-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
}

/* iPhone-Silhouette */

.mock-phone {
  position: relative;
  width: 168px;
  aspect-ratio: 9 / 18.5;
  background: var(--ink);
  border-radius: 28px;
  padding: 7px;
  box-shadow: 0 18px 40px rgba(18, 34, 64, 0.22);
}

.mp-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 15px;
  background: var(--ink);
  border-radius: 9px;
  z-index: 3;
}

.mp-screen {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  /* Safari verliert das runde Clipping bei transform-animierten Kindern
     (Sheet-Ecken ragten unten raus): clip-path schneidet zuverlaessig,
     auch composited Layer. */
  isolation: isolate;
  clip-path: inset(0 round 22px);
  display: flex;
  flex-direction: column;
}

/* WingDrop-Hauptscreen als Miniatur (Hero-iPhone) */

.mp-screen-app {
  background: var(--ground);
  align-items: center;
  padding: 32px 8px 18px;
  gap: 8px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-brand-bird { width: 17px; height: auto; }

.app-brand .brand-name { font-size: 0.62rem; }

.app-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 2px 6px rgba(18, 34, 64, 0.06);
  max-width: calc(100% - 8px);
}

/* Text im Chip darf schrumpfen und wird bei Platzmangel mit
   Ellipsis gekürzt, statt über die Screen-Kanten zu laufen. */
.app-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
}

.app-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 10px;
}

.app-claim {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* Sende-Knopf-Bühne: der blaue Knopf, darum der Fortschrittsring, darüber
   der grüne Erfolgs-Kreis und der Konfetti-Burst. Alles hängt an einem
   Wrap, damit die 420px-Variante nur eine Größe ändern muss. Ring, Grün
   und Konfetti sind ohne Animation unsichtbar, das Standbild zeigt den
   blauen Knopf. */

.app-send-wrap {
  position: relative;
  width: 58px;
  height: 58px;
}

.app-send {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(18, 87, 184, 0.35), 0 0 20px rgba(30, 136, 229, 0.22);
}

.send-ring {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  opacity: 0;
  pointer-events: none;
}

.send-ring-track {
  fill: none;
  stroke: rgba(30, 136, 229, 0.18);
  stroke-width: 3.5;
}

.send-ring-arc {
  fill: none;
  stroke: var(--blue-bright);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* Umfang bei r=32: 2 * PI * 32 */
  stroke-dasharray: 201.1;
  stroke-dashoffset: 201.1;
}

.app-send-ok {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok-grad);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(47, 164, 94, 0.35), 0 0 20px rgba(47, 164, 94, 0.22);
  opacity: 0;
}

/* Konfetti: kleine Partikel-Rechtecke wie die KonfettiView der echten App.
   Jedes Teilchen bekommt Zielversatz, Drehung und Farbe als Inline-Vars,
   die Keyframes animieren nur transform und opacity. */

.confetti {
  position: absolute;
  pointer-events: none;
}

.confetti-send { inset: 0; }

.confetti i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  margin: -4.5px 0 0 -3px;
  border-radius: 1.5px;
  background: var(--c, var(--blue-bright));
  opacity: 0;
}

.app-hint {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.42rem;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--muted);
}

.app-log {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-log-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 9px;
  padding: 4px 6px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.app-log-thumb {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

.app-log-meta { display: flex; flex-direction: column; min-width: 0; }

.app-log-name {
  font-size: 0.46rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-log-sub {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.38rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Foto-Kacheln: echte Fotos aus assets/fotos, die Verlaufs-Hintergründe
   bleiben als Lade-Fallback stehen. */

.ph {
  border-radius: 10px;
  background: linear-gradient(150deg, #5EB8FF, #1257B8);
  position: relative;
}

.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
}

/* Querformat-Fotos in quadratischen Thumbs: Ausschnitt nach rechts
   verschieben, damit Automobil-Front bzw. Küstendorf im Bild bleiben. */
.ph-img-right { object-position: 62% 50%; }

.ph-sky    { background: linear-gradient(150deg, #8ECDFF 0%, #4A90D9 100%); }
.ph-sunset { background: linear-gradient(150deg, #FFC98F 0%, #F2789F 60%, #7D5BA6 100%); }
.ph-meadow { background: linear-gradient(150deg, #C7E8A8 0%, #5FA55A 100%); }
.ph-sea    { background: linear-gradient(150deg, #5EB8FF 0%, #1257B8 100%); }
.ph-dune   { background: linear-gradient(150deg, #F5DCB8 0%, #D49A6A 100%); }
.ph-night  { background: linear-gradient(150deg, #45507A 0%, #122240 100%); }

/* Galerie im PC-Fenster */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gallery-grid .ph { aspect-ratio: 4 / 3; }


.tile-new { box-shadow: 0 0 0 2px var(--blue-bright), 0 8px 18px rgba(30, 136, 229, 0.25); z-index: 1; }


.badge-neu {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  background: var(--grad);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 99px;
  box-shadow: 0 4px 10px rgba(18, 87, 184, 0.35);
}

.wave-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(18, 34, 64, 0.45));
}

/* ===== Hero-Demo-Bühne ===== */

/* Luft für die großen Akt-Labels ober- und unterhalb der Bühne */
.hero-demo { position: relative; padding: 3em 0; }

.demo-stage {
  /* Feste Bühne: iPhone links, Laptop rechts, beide mittig auf gleicher
     Höhe. Das Seitenverhältnis entspricht dem viewBox der Bogen-Bühne
     (560 x 482), dadurch sitzen Bögen und Geräte auf jeder Breite
     deckungsgleich übereinander. */
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 482;
  max-width: 560px;
  margin-inline: auto;
}

/* Akt-Beschriftung an der Bühne: beide Zeilen übereinander im selben
   Grid-Feld, der Loop blendet synchron um. Standbild zeigt Akt 1. */



.act-akzent {
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Windows-Laptop um das WingDrop-Fenster: dunkle Display-Einfassung,
   darunter angedeutete Tastatur-Basis mit Trackpad. Bewusst kein
   MacBook-Look, keine Notch, nur ein kleiner Kamera-Punkt. */

.hero-laptop {
  /* Fester Platz rechts, vertikal zentriert. Der Rechtsabstand lässt der
     überbreiten Tastatur-Basis (114 %, Überhang je 7 %) Luft, damit bei
     360px nichts aus dem Viewport ragt. */
  position: absolute;
  top: 50%;
  right: 5%;
  width: 56%;
  transform: translateY(-50%);
}

.hero-laptop::after {
  /* Dezenter Standfuß-Schatten am Boden */
  content: "";
  position: absolute;
  left: 2%;
  right: -5%;
  bottom: -14px;
  height: 20px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 34, 64, 0.2), rgba(18, 34, 64, 0) 72%);
  z-index: -1;
  pointer-events: none;
}

.laptop-lid {
  position: relative;
  background: linear-gradient(180deg, #24354F 0%, #13203A 100%);
  border-radius: 14px 14px 5px 5px;
  padding: 3.6% 3.6% 4.2%;
  box-shadow: 0 18px 40px rgba(18, 34, 64, 0.2);
}

.laptop-cam {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4A5D80;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}

.laptop-screen {
  background: linear-gradient(160deg, #E4EEFB 0%, #C3D7F2 100%);
  border-radius: 5px;
  padding: 5% 5.5% 5.5%;
}

.laptop-base {
  /* Tastatur-Basis: liegt breiter als das Display, kippt per statischem
     rotateX perspektivisch nach hinten und trägt Tastenfeld + Trackpad. */
  position: relative;
  width: 114%;
  margin-left: -7%;
  aspect-ratio: 9 / 1;
  background: linear-gradient(180deg, #EAF1FB 0%, #CBD8EC 68%, #AFC1DC 100%);
  border-radius: 4px 4px 16px 16px;
  transform: perspective(700px) rotateX(32deg);
  transform-origin: 50% 0;
  box-shadow: 0 10px 20px rgba(18, 34, 64, 0.16);
}

.laptop-base::before {
  /* Scharnier-Schatten unter dem Display */
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 26%;
  background: linear-gradient(180deg, rgba(18, 34, 64, 0.24), rgba(18, 34, 64, 0));
}

.laptop-keys {
  /* Tastenreihen: dunkles Tastenfeld, helle Linien schneiden es in Tasten */
  position: absolute;
  top: 10%;
  left: 5.5%;
  right: 5.5%;
  height: 52%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 5.4%, #E4EDF9 5.4% 6.7%),
    repeating-linear-gradient(0deg, transparent 0 27%, #E4EDF9 27% 33.3%),
    linear-gradient(180deg, #C6D4E9, #B7C8E0);
}

.laptop-trackpad {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 17%;
  height: 27%;
  border-radius: 4px;
  background: rgba(18, 34, 64, 0.1);
  box-shadow: inset 0 1px 2px rgba(18, 34, 64, 0.16);
}

.hero-window {
  position: relative;
  width: 100%;
}

.window-bird {
  position: absolute;
  /* Buehnen-Geschwister VOR dem iPhone im DOM: liegt dadurch wirklich
     HINTER dem ganzen Geraet (z-index unter .hero-phone mit 2) und lugt
     am linken oberen Rand hervor. Proportional zur Buehne. */
  top: -2%;
  left: -2.5%;
  width: 24%;
  height: auto;
  z-index: 1;
}

/* Radar-Ringe um die Taube: WingDrop sucht Geräte im WLAN */

.bird-radar {
  position: absolute;
  top: -12%;
  left: -10%;
  width: 37%;
  height: auto;
  aspect-ratio: 1;
  z-index: 0;
  color: var(--blue-bright);
  pointer-events: none;
}

.bird-radar circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.bird-radar circle:nth-of-type(1) { opacity: 0.3; }
.bird-radar circle:nth-of-type(2) { opacity: 0.16; }
.bird-radar circle:nth-of-type(3) { opacity: 0; }

.hero-phone {
  /* Fester Platz links, vertikal zentriert, strikt proportional zur
     Bühne, damit die Bogen-Enden auf jeder Breite am Gerät bleiben. */
  position: absolute;
  top: 50%;
  left: 1.5%;
  width: 27%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Bogen-Bühne: ein SVG über der ganzen Stage mit beiden Bahnen, den
   großen Chevron-Pfeilen und den fliegenden Foto-Kacheln. Liegt über den
   Geräten, die Bahn-Enden sitzen knapp außerhalb der Silhouetten. */

.arc-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--blue-bright);
  pointer-events: none;
  z-index: 3;
}

.arc-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 13;
  opacity: 0.45;
}

/* Ohne Animation zeigt das Standbild Akt 1: oberer Bogen samt Pfeilen
   sichtbar, unterer Bogen aus. */
.arc-bottom { opacity: 0; }

/* Große Chevron-Pfeile: die Hauptdarsteller. Blau-Verlauf, weiße Kontur,
   wandern per Motion-Path an der aktiven Bahn entlang. Ohne
   offset-path-Support bleiben sie schlicht weg. */

.big-arrow {
  display: none;
  fill: url(#wd-arrow-grad);
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}

.arc-arrows { filter: drop-shadow(0 4px 8px rgba(18, 87, 184, 0.35)); }

/* Fliegende Foto-Kacheln: nehmen dieselben Bahnen wie die Pfeile.
   Ohne Animation steht die Hinweg-Kachel mittig auf dem oberen Bogen. */
.fly-tile-svg {
  display: none;
  filter: drop-shadow(0 10px 14px rgba(18, 87, 184, 0.35));
}

@supports (offset-path: path("M0 0 L1 1")) {
  .arc-top .big-arrow {
    display: block;
    offset-path: path("M 84 74 C 112 14, 348 2, 380 100");
    offset-rotate: auto;
  }
  .arc-bottom .big-arrow {
    display: block;
    offset-path: path("M 430 376 C 408 466, 128 470, 84 408");
    offset-rotate: auto;
  }
  /* Statische Ruhepositionen: gelten im reduced-motion-Standbild, die
     Kachel steht dort bei 46 %, deshalb Luft um die Bahnmitte. */
  .arc-arrows .big-arrow:nth-of-type(1) { offset-distance: 12%; }
  .arc-arrows .big-arrow:nth-of-type(2) { offset-distance: 32%; }
  .arc-arrows .big-arrow:nth-of-type(3) { offset-distance: 63%; }
  .arc-arrows .big-arrow:nth-of-type(4) { offset-distance: 86%; }

  .fly-tile-svg { display: block; offset-rotate: 0deg; }
  .fly-tile-fwd {
    offset-path: path("M 84 74 C 112 14, 348 2, 380 100");
    offset-distance: 46%;
  }
  .fly-tile-back {
    offset-path: path("M 430 376 C 408 466, 128 470, 84 408");
    offset-distance: 0%;
    opacity: 0;
  }
}

/* Empfangs-Vorschau auf dem iPhone (Akt 2): großes Foto plus Haken-Chip.
   Ohne Animation unsichtbar, das Standbild zeigt Akt 1. */

.phone-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  opacity: 0;
}

.phone-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.phone-preview-chip {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 99px;
  padding: 3px 9px 3px 4px;
  box-shadow: 0 6px 16px rgba(18, 34, 64, 0.3);
  opacity: 0;
}

.ppc-check {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ok-grad);
  flex-shrink: 0;
}

/* Mini-Konfetti am Empfangen-Chip: Ursprung knapp über dem Chip,
   die Partikel spritzen überwiegend nach oben in den Screen. */
.confetti-chip {
  left: 50%;
  bottom: 22px;
  width: 0;
  height: 0;
}

.confetti-chip i {
  width: 4px;
  height: 7px;
  margin: -3.5px 0 0 -2px;
}

.phone-preview-chip::after {
  /* Ping-Ring um den Haken-Chip */
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  opacity: 0;
}

/* ===== So funktioniert's ===== */

.steps { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* ===== Prinzip: Sender und Empfaenger ================================= */
/* Erklaert vor allen Details, dass WingDrop aus zwei Teilen besteht.
   Gleiche Rollen-Sprache wie die Download-Sektion weiter unten. */

.prinzip { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.fluss {
  display: grid;
  grid-template-columns: 1fr auto 1.6fr;
  align-items: center;
  gap: clamp(0.8rem, 2.4vw, 1.8rem);
}

.fluss-seite { display: flex; flex-direction: column; gap: 0.55rem; }

.fluss-rolle {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-align: center;
}

.fluss-rolle-sender { color: var(--blue-deep); }
.fluss-rolle-empf { color: var(--ink); }

.fluss-paar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }

.fluss-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 1.2rem 0.9rem;
  height: 100%;
}

.fluss-karte .icon-chip { margin-bottom: 0.2rem; }

.fluss-name { font-size: 1.05rem; font-weight: 700; }

.fluss-sub { font-size: 0.86rem; color: var(--muted); }

.fluss-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--blue-bright);
  min-width: 92px;
}

.fluss-pfeile { width: clamp(84px, 11vw, 130px); height: 40px; }

.fluss-wlan {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}

.fluss-note {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 62ch;
}

@media (max-width: 820px) {
  .fluss { grid-template-columns: 1fr; }
  .fluss-pfeile { transform: rotate(90deg); height: 62px; }
  .fluss-mitte { padding-block: 0.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Die Pfeile wandern abwechselnd hin und zurueck, damit das
     Wechselspiel sofort lesbar ist. */
  .fp { stroke-dasharray: 6 5; }
  .fp-1 { animation: wd-fluss-hin 3.4s linear infinite; }
  .fp-2 { animation: wd-fluss-rueck 3.4s linear infinite; }

  @keyframes wd-fluss-hin {
    0%, 46%   { opacity: 1; stroke-dashoffset: 0; }
    50%, 96%  { opacity: 0.22; stroke-dashoffset: -22; }
    100%      { opacity: 1; stroke-dashoffset: -44; }
  }

  @keyframes wd-fluss-rueck {
    0%, 46%   { opacity: 0.22; stroke-dashoffset: 0; }
    50%, 96%  { opacity: 1; stroke-dashoffset: 22; }
    100%      { opacity: 0.22; stroke-dashoffset: 44; }
  }
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.card.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Etwas schmaleres Seiten-Padding (schlägt das späte .card-Padding),
     damit die lange Box-1-Headline bei der Größe zweizeilig bleibt. */
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Zahl links oben, Icon rechts oben (Freddys Wunsch-Anordnung) */
.step-card .icon-chip { align-self: flex-end; }

.step-card:hover { transform: translateY(-3px); box-shadow: var(--elev-hover); }

.step-num {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
}

.icon-chip {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: rgba(94, 184, 255, 0.14);
  border-radius: 16px;
  margin-bottom: 1.1rem;
  color: var(--blue-deep);
}

.step-title {
  font-family: var(--mono);
  text-transform: uppercase;
  /* So groß, dass "EINMALIG EMPFÄNGER STARTEN," gerade noch einzeilig in
     die Karte passt — die lange Box-1-Headline soll genau 2 Zeilen haben. */
  font-size: 1rem;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 0.55rem;
}

.step-card p { color: var(--muted); }

/* ===== Benefit-Blöcke ===== */

.benefits { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5.5rem); padding-block: clamp(2.5rem, 6vw, 5rem); }

.benefit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.8rem, 5vw, 4rem);
}

/* Abwechselnd Text links / Demo links */

.benefits .benefit:nth-of-type(even) .benefit-copy { order: 2; }
.benefits .benefit:nth-of-type(even) .benefit-demo { order: 1; }

.benefit-copy h2 { margin-bottom: 1rem; }

.benefit-copy p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 50ch;
  margin-bottom: 0.9rem;
}

/* Demo-Panels: weiche Bühne für die Mockups */

.demo-panel {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(94, 184, 255, 0.16), rgba(94, 184, 255, 0.04) 60%),
    var(--card);
  box-shadow: var(--elev), inset 0 0 0 1px var(--hairline);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
}

/* Demo A: Fotos-App, Teilen-Sheet, WingDrop-Gerätewahl.
   Das Standbild (Basiszustand, gilt auch bei prefers-reduced-motion)
   zeigt den AirDrop-Moment: Sheet oben, Karte "Freddys PC" sichtbar. */

.share-phone { width: 220px; margin-inline: auto; }

/* Freie Buehne: kein Kasten, das iPhone schwebt mit kraeftigem Schatten
   ueber duennen Radarlinien (wie im Hero). */
.demo-panel-frei {
  background: none;
  box-shadow: none;
  /* Der Kasten clippt sonst den weichen Schwebe-Schatten des iPhones ab
     (harte Kante an der Panel-Unterkante). */
  overflow: visible;
}

.demo-panel-frei .demo-radar { color: rgba(18, 87, 184, 0.11); }

.demo-panel-frei .mock-phone {
  box-shadow: 0 30px 70px rgba(18, 34, 64, 0.24), 0 14px 34px rgba(18, 34, 64, 0.10);
}

.share-phone .mp-screen { background: #fff; }

/* Ebene 1: Fotos-App. Helle iOS-Optik, Systemblau statt Markenblau. */

.pa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.pa-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 6px 15px 0;
  font-size: 10px;
  font-weight: 700;
  color: #000;
}

.pa-status svg { width: 42px; height: 11px; display: block; }

.pa-nav {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-count {
  position: relative;
  display: block;
  width: 104px;
  height: 13px;
  font-size: 9px;
  font-weight: 600;
  color: #000;
  line-height: 13px;
}

.pa-count > span {
  position: absolute;
  inset: 0;
  text-align: center;
  white-space: nowrap;
}

.pa-count-none { opacity: 0; }

.pa-cancel {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8.5px;
  color: #0A84FF;
}

/* Kantenloses Raster: quadratische Kacheln, 1px-Lücken, läuft unter
   der halbtransparenten Tab-Leiste durch (wie in der echten Fotos-App). */

.pa-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  align-content: start;
  overflow: hidden;
  background: #fff;
}

.pa-ph {
  position: relative;
  aspect-ratio: 1;
  background: #E9EEF5;
  overflow: hidden;
}

.pa-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pa-pos-r { object-position: 62% 50%; }
.pa-pos-l { object-position: 30% 50%; }
.pa-pos-o { object-position: 50% 20%; }

.pa-sel-dim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
}

/* Auswahl-Haken: blauer gefüllter Kreis, weißer Haken, unten rechts */

.pa-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  background: #0A84FF;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff;
}

.pa-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(249, 249, 251, 0.85);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border-top: 0.5px solid rgba(60, 60, 67, 0.28);
}

.pa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px 1px;
}

.pa-toolbar svg { width: 14px; height: 17px; display: block; }

.pa-tabbar { display: flex; padding: 1px 4px 12px; }

.pa-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 6.4px;
  font-weight: 500;
  color: #8E8E93;
}

.pa-tab svg { width: 16px; height: 16px; }

.pa-tab-on { color: #0A84FF; }

.pa-home {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 62px;
  height: 4px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.85);
}

/* Ebene 2: iOS-Share-Sheet. Der Scrim dunkelt die Fotos-App ab, solange
   das Sheet offen ist (Standbild: sichtbar, da das Sheet dort offen ist). */

.ss-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.2);
}

.ss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 60%;
  background: #F2F2F7;
  /* Unten mitgerundet, damit auch ohne Eltern-Clipping nichts uebersteht. */
  border-radius: 13px 13px 18px 18px;
  box-shadow: 0 -8px 24px rgba(18, 34, 64, 0.18);
  padding: 5px 10px;
  overflow: hidden;
}

.ss-grabber {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 99px;
  background: #C9C9CE;
  margin: 0 auto 6px;
}

.ss-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 2px 7px;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.2);
  line-height: 1.25;
}

.ss-thumb {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  object-fit: cover;
}

.ss-title { font-size: 9.5px; font-weight: 600; color: #000; }

.ss-sub { font-size: 7.8px; color: #8E8E93; }

.ss-close {
  margin-left: auto;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  background: #E3E3E8;
  border-radius: 50%;
  color: #7C7C82;
}

.ss-apps { display: flex; padding: 9px 2px 8px; }

.ss-app {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 6.6px;
  color: #000;
  white-space: nowrap;
}

.ss-app-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
}

.ss-app-msg { background: linear-gradient(180deg, #6BE178, #22C742); }

.ss-app-mail { background: linear-gradient(180deg, #5FC7FF, #1D77EF); }

.ss-app-wd { background: var(--grad); }

.ss-app-more { background: #E3E3E8; color: #7C7C82; }

.ss-actions {
  background: #fff;
  border-radius: 10px;
  margin-top: 2px;
}

.ss-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 8.4px;
  color: #000;
}

.ss-action + .ss-action { border-top: 0.5px solid rgba(60, 60, 67, 0.16); }

.ss-action svg { width: 11px; height: 11px; color: rgba(60, 60, 67, 0.65); }

/* Ebene 3: WingDrop-Gerätewahl. Aufbau, Texte und Karten wie
   SharePickerView.swift der iOS-App, in der Markenwelt (Papier-Grund,
   Verlaufs-Badge, Karte mit Haarlinie, Erfolgsgrün). */

.wd-dim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.35);
}

.wd-sheet {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 6;
  background: var(--ground);
  border-radius: 17px;
  padding: 11px;
  box-shadow: 0 12px 26px rgba(18, 34, 64, 0.3), inset 0 0 0 1px var(--hairline);
}

.wd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  line-height: 1.2;
}

.wd-badge {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--grad);
  border-radius: 50%;
  box-shadow: 0 3px 7px rgba(18, 87, 184, 0.3);
  flex-shrink: 0;
}

.wd-name {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wd-payload { font-size: 8px; font-weight: 600; color: var(--muted); }

/* Die vier Phasen (Suche, Karte, Senden, Erfolg) liegen übereinander
   und blenden per Opacity um; Standbild = Karte. */

.wd-body {
  position: relative;
  height: 44px;
  margin-bottom: 8px;
}

.wd-phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.wd-suche { gap: 7px; opacity: 0; }

.wd-radar { width: 17px; height: 17px; }

.wd-radar-keil {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.wd-suche-text { font-size: 9.5px; font-weight: 600; color: var(--muted); }

.wd-karte {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 11px;
  padding: 7px 9px;
  line-height: 1.25;
  box-shadow: 0 4px 10px rgba(18, 34, 64, 0.1), inset 0 0 0 1px var(--hairline);
}

.wd-chip {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(94, 184, 255, 0.14);
  border-radius: 8px;
  color: var(--blue-deep);
  flex-shrink: 0;
}

.wd-pc-name { font-size: 10px; font-weight: 700; color: var(--ink); }

.wd-pc-sub { font-size: 8px; font-weight: 600; color: var(--muted); }

.wd-go { margin-left: auto; color: var(--ink); }

.wd-senden {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  opacity: 0;
}

.wd-senden-titel { font-size: 9.5px; font-weight: 700; color: var(--ink); }

.wd-senden-zeile { display: flex; align-items: center; gap: 7px; }

.wd-track {
  position: relative;
  flex: 1;
  height: 9px;
  border-radius: 99px;
  background: #E8F1FC;
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}

.wd-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--grad);
  transform: translateX(-100%);
}

.wd-prozent {
  position: relative;
  width: 26px;
  height: 12px;
  font-size: 9px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 12px;
}

.wd-prozent span {
  position: absolute;
  inset: 0;
  text-align: right;
  opacity: 0;
}

.wd-erfolg { gap: 8px; opacity: 0; }

.wd-ok {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(47, 164, 94, 0.35);
  flex-shrink: 0;
}

.wd-ok path { stroke-dasharray: 22; }

.wd-erfolg-text {
  font-size: 9.3px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.wd-cancel {
  position: relative;
  height: 24px;
  background: #fff;
  border-radius: 99px;
  box-shadow: 0 3px 8px rgba(18, 34, 64, 0.08), inset 0 0 0 1px var(--hairline);
}

.wd-cancel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9.3px;
  font-weight: 700;
  color: var(--ink);
}

.wd-cancel-send { opacity: 0; }

/* Fake-Finger (Tipp-Punkt): Ruheposition über der Labrador-Kachel,
   alle weiteren Ziele werden per Transform angefahren. */

.fake-finger {
  position: absolute;
  left: 22px;
  top: 145px;
  z-index: 9;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(30, 136, 229, 0.3);
  box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.13);
  opacity: 0;
}

/* Demo B: Galerie mit Pling */



/* Demo C: Koppeln. Choreografie: Das iPhone hebt ab (Scale plus
   Zusatzschatten), gleitet ueber den echten QR-Code im Fenster und
   scannt ihn (Kamerabild mit demselben Code, Brackets rasten zu,
   Scanlinie, Blitz). Danach springen beide Geraete auf gruene
   Verbunden-Chips mit Konfetti, das iPhone gleitet zurueck, kurze
   Ruhe, Reset. --kop-dx und --kop-dy sind der Flugweg vom Ruheplatz
   bis zur QR-Mitte und werden je Layoutbreite unten neu gesetzt.
   Das Standbild (Basiszustand, gilt auch bei prefers-reduced-motion)
   zeigt das iPhone angehoben ueber dem QR mit beiden gruenen Chips.
   Timing-Drehbuch unten im Animations-Block. */

.pair-scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  /* Flugweg: halbe Fensterbreite 125 + Abstand 24 + halbes iPhone 74,
     senkrecht liegt die QR-Mitte 2px ueber der Geraetemitte */
  --kop-dx: -223px;
  --kop-dy: -2px;
}

.pair-window { flex: 0 0 250px; }

.qr-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--elev), inset 0 0 0 1px var(--hairline);
  padding: 12px;
}

/* Echter QR-Code (zeigt auf wingdrop.app), pixelated haelt die Module
   beim Herunterskalieren scharf (120 = 480 / 4) */
.qr-img {
  display: block;
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
}

/* Status-Zeile unterm QR: Warte-Chip und gruener Verbunden-Chip liegen
   im selben Grid-Feld und crossfaden, das Konfetti ankert mittig */
.pair-state {
  position: relative;
  display: grid;
  place-items: center;
}

.wait-chip,
.pair-state .state-chip { grid-area: 1 / 1; }

.wait-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
  background: rgba(18, 34, 64, 0.06);
  border-radius: 99px;
  padding: 0.28rem 0.7rem;
  /* Standbild: schon gekoppelt, der Wartehinweis ist durch */
  opacity: 0;
}

.wait-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
  flex-shrink: 0;
}

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--ok-grad);
  border-radius: 99px;
  padding: 0.28rem 0.7rem;
  box-shadow: 0 5px 12px rgba(47, 164, 94, 0.32);
}

.state-chip svg { flex-shrink: 0; }

/* Haken zeichnet sich im Loop per stroke-dashoffset */
.state-chip svg path { stroke-dasharray: 22; }

.confetti-pair { inset: 0; }

.pair-phone {
  width: 148px;
  flex: 0 0 auto;
  z-index: 2;
  /* Standbild: schwebt angehoben ueber dem Fenster-QR */
  transform: translate(var(--kop-dx), var(--kop-dy)) scale(1.06);
}

/* Zusatzschatten fuer den Schwebeflug, wird per Opacity zugeschaltet */
.pair-phone::before {
  content: "";
  position: absolute;
  inset: 10px 2px -6px;
  border-radius: 30px;
  box-shadow: 0 30px 46px rgba(18, 34, 64, 0.34);
  opacity: 1;
  z-index: -1;
}

.mp-screen-camera {
  background: #0B1830;
  display: grid;
  place-items: center;
}

.viewfinder {
  position: relative;
  width: 96px;
  height: 96px;
}

/* Kamerabild: weisse Karte mit demselben QR-Code, sichtbar sobald das
   iPhone ueber dem Fenster-QR schwebt */
.vf-cam {
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
}

.qr-cam {
  width: 64px;
  height: 64px;
  /* Kamerasicht darf weich bleiben */
  image-rendering: auto;
}

/* Die vier Brackets haengen an einem Rahmen, der beim Einrasten als
   Ganzes zuschnappt (Standbild: eingerastet) */
.vf-frame {
  position: absolute;
  inset: 0;
  transform: scale(0.88);
}

.vf-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--blue-light);
  border-radius: 2px;
}

.vf-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.vf-scan {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 8px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(94, 184, 255, 0), var(--blue-light) 28%, #fff 50%, var(--blue-light) 72%, rgba(94, 184, 255, 0));
  box-shadow: 0 0 10px rgba(94, 184, 255, 0.8);
  opacity: 0;
}

.vf-flash {
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
}

/* Hinweis und Verbunden-Chip teilen sich den Platz am Screen-Fuss und
   werden ohne Transform zentriert, damit die Keyframes freie Bahn fuer
   Scale und TranslateY haben */
.cam-hint,
.state-chip-cam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  margin-inline: auto;
  width: max-content;
}

.cam-hint {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.5rem;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: rgba(232, 242, 255, 0.75);
  /* Standbild: schon gekoppelt */
  opacity: 0;
}

/* Kompakter Zweispalter (901 bis 1160): schmaleres Fenster und iPhone,
   der Flugweg schrumpft mit (halbe 190 + 14 + halbe 128) */
@media (min-width: 901px) and (max-width: 1160px) {
  .pair-scene { gap: 14px; --kop-dx: -173px; }
  .pair-window { flex-basis: 190px; }
  .pair-phone { width: 128px; }
}

/* Schmale Screens: Fenster oben, iPhone darunter, der Flug geht
   senkrecht nach oben auf den QR (QR-Mitte 118px unter der
   Fensteroberkante, iPhone-Mitte ruht 297px darunter). Extra Kopfraum
   im Panel, damit das angehobene iPhone beim Schweben nicht an der
   Panelkante ansteht. */
@media (max-width: 520px) {
  #demo-koppeln { padding-top: 3.2rem; }
  .pair-scene {
    flex-wrap: wrap;
    --kop-dx: 0px;
    --kop-dy: -297px;
  }
}

/* Demo D: Dateityp-Karussell. Vier Karteikarten im Loop; die Peek-Ebene
   (tk-peek, z-index 1) zeigt die jeweils nächste Karte leicht versetzt
   und verkleinert hinter der aktiven Karte der Front-Ebene (tk-front,
   z-index 2). Beide Ebenen tragen dieselben vier Karten mit demselben
   Zeitversatz und derselben Pose im Übergabe-Moment, dadurch wandert
   jede Karte scheinbar von hinten nach vorn, animiert wird nur
   transform und opacity. Standbild (Basiszustand, gilt auch bei
   prefers-reduced-motion): Urlaub.mov vorn mit ~70-%-Balken, die
   Rechnung lugt dahinter hervor. */

.tk {
  position: relative;
  width: min(100%, 380px);
}

.tk-front {
  position: relative;
  z-index: 2;
  display: grid;
}

.tk-peek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  display: grid;
}

/* Alle Karten einer Ebene liegen im selben Grid-Feld übereinander */
.tk-front > .file-card,
.tk-peek > .file-card { grid-area: 1 / 1; }

.file-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--elev), inset 0 0 0 1px var(--hairline);
  padding: 0.9rem 1.1rem;
}

/* Standbild-Zustände, die Keyframes unten überschreiben sie im Loop */

.tk-front > .file-card { opacity: 0; }

.tk-front > .file-card:nth-child(1) { opacity: 1; }

.tk-peek > .file-card {
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

.tk-peek > .file-card:nth-child(2) { opacity: 1; }

.file-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
}

/* Betriebssystem-Logo im Button: optisch auf Textmitte ausgerichtet */
.btn-os { flex-shrink: 0; transform: translateY(-0.5px); }

.file-play { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(18, 34, 64, 0.5)); }

.file-meta { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-width: 0; }

.file-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-bar {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: rgba(94, 184, 255, 0.2);
  overflow: hidden;
}

.file-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: var(--grad);
  transform: scaleX(0.04);
  transform-origin: left center;
}

/* Standbild: der Balken der Video-Karte steht bei ~70 % */
.tk-front > .file-card:nth-child(1) .file-bar-fill { transform: scaleX(0.7); }

/* Icon-Thumbs (PDF, Zip): Strich-Icons auf hellblauem Chip-Grund */
.file-icon {
  background: rgba(94, 184, 255, 0.14);
  color: var(--blue-deep);
}

/* Typ-Chip: Mono-Mikro-Label in Versalien, hellblauer Ton, tiefblaue Schrift */
.typ-chip {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--blue-deep);
  background: rgba(94, 184, 255, 0.16);
  border-radius: 99px;
  padding: 0.22rem 0.55rem;
  flex-shrink: 0;
}

/* Grüner Haken: poppt nach vollem Balken kurz an der Karten-Ecke */
.tk-ok {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--ok-grad);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(47, 164, 94, 0.4);
  opacity: 0;
}

/* ===== Cards ===== */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  padding: 1.8rem;
}

/* ===== Download ===== */

.download { padding-block: clamp(2.5rem, 6vw, 5rem); }

.dl-grid {
  display: grid;
  /* Sender (eine Karte) links, Empfaenger (zwei Karten) rechts */
  grid-template-columns: 1fr 2fr;
  gap: 1.6rem;
  align-items: stretch;
}

/* Rollen-Gruppen: eigene Toenung plus geschwungene Klammer mit Label */
.dl-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.1rem 0.9rem;
  border-radius: calc(var(--radius) + 6px);
}

.dl-group-sender {
  background: linear-gradient(160deg, rgba(94, 184, 255, 0.16), rgba(94, 184, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(18, 87, 184, 0.14);
}

.dl-group-empfaenger {
  background: rgba(18, 34, 64, 0.035);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Zaehler ueber den Gruppen: macht sichtbar, dass es genau zwei
   Downloads sind, und dass Windows plus Mac zusammen einer davon ist. */
.dl-zaehler {
  align-self: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(18, 87, 184, 0.16);
  border-radius: 99px;
  padding: 0.22rem 0.72rem;
  margin-bottom: 0.15rem;
}

.dl-group-empfaenger .dl-zaehler {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.dl-cards {
  display: grid;
  gap: 1.1rem;
  flex: 1;
  align-items: stretch;
}

.dl-cards-zwei { grid-template-columns: repeat(2, 1fr); }

.dl-brace {
  display: block;
  width: 100%;
  height: 15px;
  margin-top: 0.35rem;
}

.dl-group-sender .dl-brace { color: rgba(18, 87, 184, 0.5); }
.dl-group-empfaenger .dl-brace { color: rgba(18, 34, 64, 0.3); }

.dl-group-label {
  text-align: center;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--blue-deep);
}

.dl-group-empfaenger .dl-group-label { color: var(--ink); }

.dl-group-sub {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

.dl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dl-card:hover { transform: translateY(-3px); box-shadow: var(--elev-hover); }

.dl-card h3 { font-size: 1.2rem; font-weight: 700; }

.dl-os {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dl-btn { margin-top: auto; width: 100%; padding-inline: 1rem; }

.dl-card .cta-note { width: 100%; }

.dl-card .icon-chip { margin-bottom: 0.4rem; }

.store-badge-card { margin-top: auto; }

.dl-copy { color: var(--muted); font-size: 0.95rem; }

/* ===== FAQ ===== */

.faq { padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 780px; }

.faq h2 { margin-bottom: 2rem; }

.faq details { margin-bottom: 1rem; padding: 0; overflow: hidden; }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.8rem;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--blue-bright);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details p {
  padding: 0 1.8rem 1.3rem;
  color: var(--muted);
  max-width: 60ch;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  margin-inline: 0;
}

/* ===== Footer ===== */

.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 3rem;
  padding-block: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.footer-bird { width: 52px; height: auto; }

.footer-brand { display: flex; align-items: center; gap: 0.6rem; }

.footer-line {
  color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 0.7rem;
}

.footer-claim {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 44ch;
}

.footer-marken {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.85;
  max-width: 62ch;
  margin: 0.2rem auto 0.9rem;
  text-align: center;
}

.footer-links { display: flex; gap: 1.5rem; }

/* ===== Scroll-Erscheinen ===== */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ===== Responsive ===== */

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 560px; }
  .hero-demo { margin-inline: auto; width: 100%; max-width: 560px; }
}

@media (max-width: 900px) {
  .step-grid, .dl-grid { grid-template-columns: 1fr; max-width: 560px; }
  .dl-cards-zwei { grid-template-columns: 1fr; }
  .benefit { grid-template-columns: 1fr; }
  .benefits .benefit:nth-of-type(even) .benefit-copy { order: 1; }
  .benefits .benefit:nth-of-type(even) .benefit-demo { order: 2; }
}

@media (max-width: 720px) {
  .hero { text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; margin-inline: auto; }
  .subline { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .store-block { justify-content: center; }
  .store-note { text-align: left; }
}

@media (max-width: 560px) {
  .cta-row { flex-direction: column; width: 100%; }
  .cta-block { width: 100%; }
  .btn { width: 100%; }
  .demo-panel { min-height: 260px; padding: 1.1rem; }
  .site-nav { gap: 1rem; }
}

@media (max-width: 420px) {
  /* Sehr schmale Screens: Zierelemente weichen, die App-Miniatur wird
     kompakter. Gerätegrößen sind überall Prozent der Bühne und bleiben
     dadurch samt Bögen und Pfeilen komplett im Viewport. */
  .window-bird, .bird-radar { display: none; }

  /* Kleines Hero-iPhone: schmalere Notch statt Vollbreite */
  #demo-hero .mp-notch { width: 36px; height: 12px; top: 10px; }

  /* Schmales Laptop-Fenster: Wortmarke kleiner statt abgeschnitten */
  .hero-window .mw-title { font-size: 0.56rem; max-width: calc(100% - 64px); }


  /* App-Miniatur kompakter, damit sie ins kleine iPhone passt. Der
     Status-Chip wäre hier breiter als der Screen und weicht. */
  .mp-screen-app { padding: 18px 4px 8px; gap: 5px; }
  .app-brand { white-space: nowrap; }
  .app-brand-bird { width: 13px; }
  .app-brand .brand-name { font-size: 0.5rem; }
  .app-status { display: none; }
  .app-claim { font-size: 0.68rem; white-space: nowrap; }
  .app-send-wrap { width: 42px; height: 42px; }
  .app-send svg { width: 16px; height: 16px; }
  .app-send-ok svg { width: 14px; height: 14px; }
  .send-ring { inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); }
  .confetti-send i { width: 4px; height: 7px; margin: -3.5px 0 0 -2px; }
  .app-hint { font-size: 0.36rem; }
  .app-log { display: none; }

  /* Karussell-Karten kompakter, damit Name und Typ-Chip bei 360px
     nebeneinander Platz haben (der Name kürzt notfalls mit Ellipsis). */
  .file-card { gap: 0.7rem; padding: 0.8rem 0.9rem; }
  .file-thumb { width: 38px; height: 38px; }
  .file-name { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .step-card, .dl-card, .faq summary::after { transition: none; }
  .btn:hover, .step-card:hover, .dl-card:hover { transform: none; }
}

/* ===== Rechtsseiten ===== */

.legal { padding-block: clamp(1.5rem, 4vw, 3rem); max-width: 720px; }

.legal h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 1.5rem; }

.legal h2 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }

.legal p { margin-bottom: 0.8rem; max-width: 60ch; }

.legal a { color: var(--blue-deep); font-weight: 600; }

/* ===== Demo-Animationen ================================================ */
/* Endlos-Loops als leichte CSS-Keyframes, fast nur transform und opacity.
   Pro Demo laufen alle Elemente auf derselben Dauer, die Prozentwerte
   bilden das Drehbuch. Ohne Animation (prefers-reduced-motion, alte
   Browser) bleibt exakt das gestaltete Standbild stehen. */

@media (prefers-reduced-motion: no-preference) {

  /* --- 1. Hero: Zwei-Akt-Loop mit festen Plätzen (9,6 s, 1 % = 0,096 s).
     Beide Geräte stehen still, spielen aber den echten App-Ablauf, die
     Momente folgen Schlag auf Schlag.
     Akt 1 (0-3,6 s), alles auf dem iPhone-Screen wie in der App:
       0,0-0,35 s  Sende-Knopf pulst an
       0,3-1,15 s  Fortschrittsring schließt sich (stroke-dashoffset)
       1,15-1,4 s  Knopf poppt zu Grün mit weißem Haken
       1,35-2,15 s Konfetti spritzt um den Haken (KonfettiView-Zitat)
       1,2-2,1 s   währenddessen fliegt das Foto den oberen Bogen
       2,1-2,6 s   NEU-Kachel ploppt im Laptop, Pling-Welle bis 3,3 s
       3,6 s       Grün blendet zurück zu Blau (Reset wie in der App)
     Bahnwechsel (3,6-4,1 s): oberer Bogen aus, unterer ein, Headline und
     Akt-Label crossfaden synchron.
     Akt 2 (4,4-8,75 s), dasselbe Erlebnis-Muster zurück:
       4,4-4,75 s  Lotus-Kachel löst sich aus der Galerie
       4,6-5,5 s   Kachel fliegt den unteren Bogen zum iPhone
       5,5-5,7 s   große Vorschau erscheint auf dem iPhone
       5,8-6,2 s   Empfangen-Chip poppt mit grünem Haken
       6,0-6,9 s   Mini-Konfetti und Ping am Chip
       8,4-8,75 s  Vorschau blendet aus, iPhone zurück im Sende-Zustand
     Bahnwechsel zurück (8,9-9,4 s): unterer Bogen aus, oberer wieder ein.
     Alle Loops laufen mit 9,6 s und starten gemeinsam, nur der
     Pfeil-Strom läuft als eigener 2,4-s-Takt (4 Umläufe je Loop, geht
     glatt in 9,6 s auf). Nur transform, opacity und stroke-dashoffset
     bzw. offset-distance. */

  /* Bahn-Wechsel: die Bögen bekommen eigene Keyframes mit disjunkten
     Fenstern, damit nie beide Bögen (und ihre gegenläufigen Pfeile)
     gleichzeitig sichtbar sind. Zwischen Aus und Ein liegt eine kurze
     Lücke statt eines Crossfades. */
  #demo-hero .arc-top {
    animation: wd-arc-a 9.6s linear infinite;
  }

  #demo-hero .arc-bottom {
    animation: wd-arc-b 9.6s linear infinite;
  }

  @keyframes wd-arc-a {
    0%, 37.5%    { opacity: 1; }
    38.5%, 95.5% { opacity: 0; }
    96.5%, 100%  { opacity: 1; }
  }

  @keyframes wd-arc-b {
    0%, 39.5%    { opacity: 0; }
    40.5%, 93.5% { opacity: 1; }
    94.5%, 100%  { opacity: 0; }
  }

  /* Der Crossfade der Headline-Zeile 2 haengt an den Bahn-Wechseln
     (wd-act-a/b); das Zerstaeuben macht das Canvas in index.html. */

  /* Die auslaufende Zeile blendet früh aus (rund 290 ms ab Fensterstart):
     das Feenstaub-Canvas hält die Schrift währenddessen mit seinen noch
     stehenden Partikeln nach und zerstäubt sie fleckig, die einlaufende
     Zeile blendet etwas gedehnter ein, während ihr Schwarm sich
     zusammenzieht. Ein- und Ausblendung überlappen sich in beiden
     Wechseln, damit Zeile 2 der Headline und das Akt-Label nie
     gleichzeitig komplett transparent sind (im Canvas-Fall trägt ohnehin
     der Schwarm den Moment). */
  @keyframes wd-act-a {
    0%, 37%      { opacity: 1; }
    40%, 95%     { opacity: 0; }
    99.5%, 100%  { opacity: 1; }
  }

  @keyframes wd-act-b {
    0%, 39%      { opacity: 0; }
    44%, 93.5%   { opacity: 1; }
    96.5%, 100%  { opacity: 0; }
  }

  /* --- Feenstaub-Headline: der Zeilenwechsel selbst ist wieder ein
     schlichter Crossfade auf Zeilenebene (wd-act-a/b, verankert an den
     Fensterstarts von Boegen und Akt-Label: 37 % hin, 93,5 % zurueck,
     die Blenden selbst sind fuers Zerstaeuben leicht gedehnt). Das
     Zerstaeuben in den glitzernden Partikelschwarm malt das Canvas-Script
     in der index.html: es liest per getAnimations() die Uhr genau dieser
     Animation auf Zeile A und feuert bei 37 % (3,55 s) und 93,5 %
     (8,98 s). Faellt das Canvas aus (kein Kontext, kein getAnimations),
     traegt dieser Crossfade den Wechsel allein weiter. */

  .claim-line-a { animation: wd-act-a 9.6s linear infinite; }

  .claim-line-b { animation: wd-act-b 9.6s linear infinite; }

  /* Akt 1, Schritt 1: Sende-Knopf pulst kurz an (0,1-0,5 s) */
  #demo-hero .app-send {
    animation: wd-hero-send 9.6s linear infinite;
  }

  @keyframes wd-hero-send {
    0%, 1%   { transform: scale(1); }
    2.4%     { transform: scale(0.9); }
    3.6%     { transform: scale(1.07); }
    5%, 100% { transform: scale(1); }
  }

  /* Akt 1, Schritt 2: Fortschrittsring wird sichtbar und schließt sich
     zügig einmal im Kreis (0,3-1,15 s), dann macht er dem Haken Platz. */
  #demo-hero .send-ring {
    animation: wd-hero-ring-vis 9.6s linear infinite;
  }

  @keyframes wd-hero-ring-vis {
    0%, 2.6%    { opacity: 0; }
    3.4%, 13%   { opacity: 1; }
    14.8%, 100% { opacity: 0; }
  }

  #demo-hero .send-ring-arc {
    animation: wd-hero-ring 9.6s linear infinite;
  }

  @keyframes wd-hero-ring {
    0%, 3.1%  { stroke-dashoffset: 201.1; animation-timing-function: cubic-bezier(0.3, 0, 0.25, 1); }
    12%, 100% { stroke-dashoffset: 0; }
  }

  /* Akt 1, Schritt 3: der Knopf wechselt mit knackigem Pop zu Grün mit
     Haken (1,15 s) und hält den Erfolg rund 2,4 s wie die echte App,
     dann Reset zurück zu Blau. */
  #demo-hero .app-send-ok {
    animation: wd-hero-ok 9.6s linear infinite;
  }

  @keyframes wd-hero-ok {
    0%, 11.8%   { opacity: 0; transform: scale(0.3); }
    13.2%       { opacity: 1; transform: scale(1.14); }
    14.8%       { transform: scale(0.95); }
    16.2%       { transform: scale(1); }
    35.5%       { opacity: 1; transform: scale(1); }
    37.5%, 100% { opacity: 0; transform: scale(0.8); }
  }

  /* Akt 1, Schritt 4: Konfetti spritzt kurz um den Haken (1,35-2,15 s).
     Zielversatz, Drehung und Farbe stecken je Teilchen in Inline-Vars. */
  #demo-hero .confetti-send i {
    animation: wd-confetti-send 9.6s linear infinite;
  }

  @keyframes wd-confetti-send {
    0%, 13.8%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    14.8%       { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) rotate(calc(var(--rot) * 0.3)) scale(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); }
    20.4%       { opacity: 1; transform: translate(calc(var(--dx) * 0.85), calc(var(--dy) * 0.85)) rotate(calc(var(--rot) * 0.85)) scale(1); }
    22.5%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
  }

  /* Akt 1, Schritt 5: währenddessen fliegt das Foto schnell den oberen
     Bogen entlang, iPhone zu Laptop (1,2-2,1 s). */
  #demo-hero .fly-tile-fwd {
    animation: wd-hero-fly 9.6s linear infinite;
  }

  @keyframes wd-hero-fly {
    0%, 12.5% { opacity: 0; offset-distance: 0%; transform: rotate(4deg) scale(0.4); }
    13.5%     { opacity: 1; offset-distance: 8%; transform: rotate(2deg) scale(1); }
    17%       { offset-distance: 55%; transform: rotate(-3deg) scale(1); }
    20.9%     { opacity: 1; offset-distance: 94%; transform: rotate(-6deg) scale(0.85); }
    22%, 100% { opacity: 0; offset-distance: 100%; transform: rotate(-7deg) scale(0.45); }
  }

  /* Akt 2: Lotus-Kachel fliegt den unteren Bogen, Laptop zu iPhone
     (4,6-5,5 s). */
  #demo-hero .fly-tile-back {
    animation: wd-hero-fly-back 9.6s linear infinite;
  }

  @keyframes wd-hero-fly-back {
    0%, 47.9%   { opacity: 0; offset-distance: 0%; transform: rotate(-4deg) scale(0.4); }
    49%         { opacity: 1; offset-distance: 8%; transform: rotate(-2deg) scale(1); }
    52.5%       { offset-distance: 55%; transform: rotate(3deg) scale(1); }
    56.3%       { opacity: 1; offset-distance: 94%; transform: rotate(6deg) scale(0.8); }
    57.4%, 100% { opacity: 0; offset-distance: 100%; transform: rotate(7deg) scale(0.45); }
  }

  /* Pfeil-Strom: die großen Chevrons wandern gleichmäßig in
     Flugrichtung über die Bahn, an den Enden weich ein- und
     ausgeblendet. Die Bogen-Blende oben gattet sie je Akt. */
  #demo-hero .big-arrow {
    animation: wd-arrow-run 2.4s linear infinite;
  }

  #demo-hero .arc-arrows .big-arrow:nth-of-type(2) { animation-delay: -0.6s; }
  #demo-hero .arc-arrows .big-arrow:nth-of-type(3) { animation-delay: -1.2s; }
  #demo-hero .arc-arrows .big-arrow:nth-of-type(4) { animation-delay: -1.8s; }

  @keyframes wd-arrow-run {
    0%   { offset-distance: 0%; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }

  /* Radar um die Taube: Ringe pulsieren dezent nach außen */
  .bird-radar circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: wd-bird-radar 3.4s ease-in-out infinite;
  }

  .bird-radar circle:nth-of-type(2) { animation-delay: 0.4s; }
  .bird-radar circle:nth-of-type(3) { animation: none; }

  @keyframes wd-bird-radar {
    0%, 100% { opacity: 0.1; transform: scale(0.97); }
    50%      { opacity: 0.32; transform: scale(1.04); }
  }

  /* Akt 1, Ankunft: NEU-Kachel ploppt in die Laptop-Galerie (2,1-2,6 s) */
  #demo-hero .tile-new {
    animation: wd-hero-tile 9.6s linear infinite;
  }

  @keyframes wd-hero-tile {
    0%, 21%   { opacity: 0; transform: scale(0.5); }
    23%       { opacity: 1; transform: scale(1.09); }
    25%       { transform: scale(0.98); }
    27%       { transform: scale(1); }
    94%       { opacity: 1; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(0.9); }
  }

  /* Pling-Puls: Ring weitet sich um die frisch gelandete Kachel */
  #demo-hero .tile-new::after,

  #demo-hero .tile-new::after {
    animation: wd-hero-ping 9.6s linear infinite;
  }

  @keyframes wd-hero-ping {
    0%, 23%   { opacity: 0; transform: scale(0.85); }
    26%       { opacity: 0.75; transform: scale(1.05); }
    35%, 100% { opacity: 0; transform: scale(1.5); }
  }

  #demo-hero .wave-icon {
    animation: wd-hero-wave 9.6s ease-in-out infinite;
  }

  @keyframes wd-hero-wave {
    0%, 22.5%   { transform: translate(-50%, -50%) scale(1); }
    25.5%       { transform: translate(-50%, -50%) scale(1.3); }
    28.5%       { transform: translate(-50%, -50%) scale(1); }
    31.5%       { transform: translate(-50%, -50%) scale(1.18); }
    34.5%, 100% { transform: translate(-50%, -50%) scale(1); }
  }

  /* Akt 2: Lotus-Kachel löst sich aus der Galerie (4,4-4,75 s) */
  #demo-hero .tile-away {
    animation: wd-hero-tile-away 9.6s linear infinite;
  }

  @keyframes wd-hero-tile-away {
    0%, 45.8%   { opacity: 1; transform: scale(1); }
    47.4%       { opacity: 1; transform: scale(1.1); }
    49.5%, 93%  { opacity: 0; transform: scale(0.62); }
    96.5%, 100% { opacity: 1; transform: scale(1); }
  }

  /* Akt 2: Empfang auf dem iPhone, große Vorschau nur per opacity
     (5,5-8,75 s), danach steht wieder der Sende-Zustand. */
  #demo-hero .phone-preview {
    animation: wd-hero-preview 9.6s linear infinite;
  }

  @keyframes wd-hero-preview {
    0%, 57%       { opacity: 0; }
    59.3%, 87.5%  { opacity: 1; }
    91%, 100%     { opacity: 0; }
  }

  /* Empfangen-Chip poppt mit grünem Haken (5,8-6,2 s) */
  #demo-hero .phone-preview-chip {
    animation: wd-hero-chip 9.6s linear infinite;
  }

  @keyframes wd-hero-chip {
    0%, 60.4%     { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
    62.5%         { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
    64.5%, 86.5%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    89.5%, 100%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.9); }
  }

  #demo-hero .phone-preview-chip::after {
    animation: wd-hero-chip-ping 9.6s linear infinite;
  }

  @keyframes wd-hero-chip-ping {
    0%, 62.5% { opacity: 0; transform: scale(0.7); }
    65%       { opacity: 0.8; transform: scale(1.1); }
    71%, 100% { opacity: 0; transform: scale(1.8); }
  }

  /* Mini-Konfetti am Chip (6,0-6,9 s), gleiche Mechanik wie beim Senden */
  #demo-hero .confetti-chip i {
    animation: wd-confetti-chip 9.6s linear infinite;
  }

  @keyframes wd-confetti-chip {
    0%, 62.7%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    63.9%       { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) rotate(calc(var(--rot) * 0.3)) scale(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); }
    69.4%       { opacity: 1; transform: translate(calc(var(--dx) * 0.85), calc(var(--dy) * 0.85)) rotate(calc(var(--rot) * 0.85)) scale(1); }
    71.5%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
  }

  /* --- 3. Demo A: Fotos-App, Teilen-Sheet, WingDrop-Gerätewahl -------
     Ein Loop von 10 s, 1 % = 0,1 s. Drehbuch:
     0,0-1,0  Fotos-App im Auswahlmodus
     1,2      Tipp aufs Labrador-Foto, Haken poppt, Zähler wechselt
     2,1      Tipp aufs Teilen-Icon unten links
     2,2-2,7  Share-Sheet fährt hoch
     3,4      Tipp auf die WingDrop-Kachel
     3,6-4,1  Abdunklung, WingDrop-Sheet fährt hoch
     4,2-4,7  "Suche Rechner…" mit Radar
     4,8-5,2  Karte "Freddys PC" ploppt ein
     5,9      Tipp auf die Karte (Druck-Feedback)
     6,5-7,6  "Sende an Freddys PC…", Balken und Prozente
     7,9-8,8  grüner Haken, "1 Datei an Freddys PC übertragen"
     8,5-9,1  Sheets fahren runter, Abdunklung weg
     9,0-10   Haken und Zähler zurück, kurze Ruhe, Loop */

  #demo-share .fake-finger {
    animation: wd-share-finger 10s linear infinite;
  }

  @keyframes wd-share-finger {
    0%, 7%    { opacity: 0; transform: translate(0, 0) scale(0.5); }
    10%       { opacity: 0.95; transform: translate(0, 0) scale(1); }
    12%       { transform: translate(0, 0) scale(0.7); }
    14%, 15%  { opacity: 0.95; transform: translate(0, 0) scale(1); }
    19%       { transform: translate(-12px, 232px) scale(1); }
    21%       { transform: translate(-12px, 232px) scale(0.7); }
    23%       { opacity: 0.95; transform: translate(-12px, 232px) scale(1); }
    25%       { opacity: 0; transform: translate(-12px, 232px) scale(1); }
    29%       { opacity: 0; transform: translate(92px, 108px) scale(0.6); }
    32%       { opacity: 0.95; transform: translate(92px, 108px) scale(1); }
    34%       { transform: translate(92px, 108px) scale(0.7); }
    36%       { opacity: 0.95; transform: translate(92px, 108px) scale(1); }
    38%       { opacity: 0; transform: translate(92px, 108px) scale(1); }
    54%       { opacity: 0; transform: translate(69px, 210px) scale(0.6); }
    57%       { opacity: 0.95; transform: translate(69px, 210px) scale(1); }
    59%       { transform: translate(69px, 210px) scale(0.7); }
    61%       { opacity: 0.95; transform: translate(69px, 210px) scale(1); }
    63%, 100% { opacity: 0; transform: translate(69px, 210px) scale(1.2); }
  }

  /* Auswahl in der Fotos-App: Haken, leichte Aufhellung, Zähler */

  #demo-share .pa-check {
    animation: wd-share-foto-haken 10s linear infinite;
  }

  @keyframes wd-share-foto-haken {
    0%, 12%   { opacity: 0; transform: scale(0.3); }
    14%       { opacity: 1; transform: scale(1.18); }
    16%       { transform: scale(1); }
    90%       { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(1); }
  }

  #demo-share .pa-sel-dim {
    animation: wd-share-foto-dim 10s linear infinite;
  }

  @keyframes wd-share-foto-dim {
    0%, 12%   { opacity: 0; }
    14%, 90%  { opacity: 1; }
    94%, 100% { opacity: 0; }
  }

  #demo-share .pa-count-one {
    animation: wd-share-zaehler-ein 10s linear infinite;
  }

  @keyframes wd-share-zaehler-ein {
    0%, 13%   { opacity: 0; }
    15%, 90%  { opacity: 1; }
    93%, 100% { opacity: 0; }
  }

  #demo-share .pa-count-none {
    animation: wd-share-zaehler-aus 10s linear infinite;
  }

  @keyframes wd-share-zaehler-aus {
    0%, 13%   { opacity: 1; }
    15%, 90%  { opacity: 0; }
    93%, 100% { opacity: 1; }
  }

  /* Share-Sheet fährt hoch und am Ende wieder runter,
     der Scrim dahinter blendet synchron ein und aus */

  #demo-share .ss-scrim {
    animation: wd-share-scrim 10s linear infinite;
  }

  @keyframes wd-share-scrim {
    0%, 22%   { opacity: 0; }
    27%, 86%  { opacity: 1; }
    91%, 100% { opacity: 0; }
  }

  #demo-share .ss {
    animation: wd-share-sheet 10s linear infinite;
  }

  @keyframes wd-share-sheet {
    0%, 22%   { transform: translateY(105%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
    27%, 86%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.45); }
    91%, 100% { transform: translateY(105%); }
  }

  #demo-share .ss-app-wd {
    animation: wd-share-appicon 10s linear infinite;
  }

  @keyframes wd-share-appicon {
    0%, 33%   { transform: scale(1); }
    34.5%     { transform: scale(0.86); }
    36%, 100% { transform: scale(1); }
  }

  /* WingDrop-Gerätewahl: Abdunklung, Sheet, Phasenwechsel */

  #demo-share .wd-dim {
    animation: wd-share-dim 10s linear infinite;
  }

  @keyframes wd-share-dim {
    0%, 35%   { opacity: 0; }
    39%, 86%  { opacity: 1; }
    90%, 100% { opacity: 0; }
  }

  #demo-share .wd-sheet {
    animation: wd-share-wdsheet 10s linear infinite;
  }

  @keyframes wd-share-wdsheet {
    0%, 36%   { transform: translateY(115%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
    41%, 85%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.45); }
    90%, 100% { transform: translateY(115%); }
  }

  #demo-share .wd-suche {
    animation: wd-share-suche 10s linear infinite;
  }

  @keyframes wd-share-suche {
    0%, 39.5%   { opacity: 0; }
    42%, 47%    { opacity: 1; }
    49.5%, 100% { opacity: 0; }
  }

  /* Radar-Keil dreht durchgehend, wie SPRadar (2,6 s pro Umdrehung) */

  #demo-share .wd-radar-keil {
    animation: wd-share-radar 2.6s linear infinite;
  }

  @keyframes wd-share-radar {
    to { transform: rotate(360deg); }
  }

  #demo-share .wd-karte {
    animation: wd-share-karte 10s linear infinite;
  }

  @keyframes wd-share-karte {
    0%, 48%     { opacity: 0; transform: translateY(9px); }
    51.5%       { opacity: 1; transform: translateY(0); }
    59%         { transform: scale(0.97); }
    61%, 62.5%  { opacity: 1; transform: scale(1); }
    64.5%, 100% { opacity: 0; transform: scale(1); }
  }

  #demo-share .wd-senden {
    animation: wd-share-senden 10s linear infinite;
  }

  @keyframes wd-share-senden {
    0%, 63%   { opacity: 0; }
    65%, 76%  { opacity: 1; }
    78%, 100% { opacity: 0; }
  }

  #demo-share .wd-fill {
    animation: wd-share-balken 10s linear infinite;
  }

  @keyframes wd-share-balken {
    0%, 64.5%   { transform: translateX(-100%); }
    70%         { transform: translateX(-38%); }
    75.5%, 100% { transform: translateX(0); }
  }

  #demo-share .wd-p1 { animation: wd-share-p1 10s linear infinite; }

  @keyframes wd-share-p1 {
    0%, 63.5%   { opacity: 0; }
    65%, 67.5%  { opacity: 1; }
    68.5%, 100% { opacity: 0; }
  }

  #demo-share .wd-p2 { animation: wd-share-p2 10s linear infinite; }

  @keyframes wd-share-p2 {
    0%, 67.5%   { opacity: 0; }
    68.5%, 71.5% { opacity: 1; }
    72.5%, 100% { opacity: 0; }
  }

  #demo-share .wd-p3 { animation: wd-share-p3 10s linear infinite; }

  @keyframes wd-share-p3 {
    0%, 71.5%  { opacity: 0; }
    72.5%, 76% { opacity: 1; }
    78%, 100%  { opacity: 0; }
  }

  #demo-share .wd-erfolg {
    animation: wd-share-erfolg 10s linear infinite;
  }

  /* Im Erfolg rutscht die Haken-Zeile leicht nach unten und sitzt so
     mittig im Sheet, wo die ausgeblendete Abbrechen-Pille Platz lässt.
     Nur im Keyframe, das Standbild (Karte) bleibt unberührt. */

  @keyframes wd-share-erfolg {
    0%, 77%   { opacity: 0; transform: translateY(13px); }
    79%, 88%  { opacity: 1; transform: translateY(13px); }
    90%, 100% { opacity: 0; transform: translateY(13px); }
  }

  #demo-share .wd-ok {
    animation: wd-share-ok 10s linear infinite;
  }

  @keyframes wd-share-ok {
    0%, 77%   { transform: scale(0.4); }
    80%       { transform: scale(1.12); }
    82%, 100% { transform: scale(1); }
  }

  #demo-share .wd-ok path {
    animation: wd-share-ok-haken 10s linear infinite;
  }

  @keyframes wd-share-ok-haken {
    0%, 78.5% { stroke-dashoffset: 22; }
    84%, 100% { stroke-dashoffset: 0; }
  }

  /* Abbrechen-Pille: "Lieber nicht" in der Auswahl, "Abbrechen" beim
     Senden, im Erfolg ausgeblendet (wie die Phasen der echten App) */

  #demo-share .wd-cancel {
    animation: wd-share-cancel 10s linear infinite;
  }

  @keyframes wd-share-cancel {
    0%, 76%   { opacity: 1; }
    78%, 100% { opacity: 0; }
  }

  #demo-share .wd-cancel-wahl {
    animation: wd-share-cancel-wahl 10s linear infinite;
  }

  @keyframes wd-share-cancel-wahl {
    0%, 62.5% { opacity: 1; }
    64%, 100% { opacity: 0; }
  }

  #demo-share .wd-cancel-send {
    animation: wd-share-cancel-send 10s linear infinite;
  }

  @keyframes wd-share-cancel-send {
    0%, 62.5% { opacity: 0; }
    64%, 76%  { opacity: 1; }
    77%, 100% { opacity: 0; }
  }

  /* --- 4. Demo B: Kachel fliegt in die Galerie, Pling (5 s) ----------- */

  /* --- 5. Demo C: Koppel-Flug, Scan, gruener Doppel-Erfolg (12 s,
     1 % = 0,12 s) ------------------------------------------------------
       0,0-1,2 s    Ausgangsbild: QR wartet, Sucher leer
       1,2-2,6 s    iPhone hebt ab (Scale plus Zusatzschatten) und
                    gleitet ueber den Fenster-QR
       2,4-3,0 s    im Sucher erscheint derselbe QR als Kamerabild
       3,0-3,5 s    Ecken-Brackets rasten zu
       3,4-4,3 s    Scanlinie faehrt einmal durchs Sucherfeld
       4,2-4,7 s    heller Blitz
       4,7-5,9 s    iPhone-Chip springt auf Gruen, Konfetti am iPhone
       5,6-7,0 s    iPhone gleitet zurueck auf seinen Platz
       6,2-7,4 s    PC-Chip springt auf Gruen, Konfetti am Fenster
       7,0-10,6 s   Ruhe: beide Geraete gruen verbunden
       10,6-12,0 s  Reset-Crossfade zurueck zum Ausgangsbild */

  #demo-koppeln .pair-phone { animation: wd-kop-flug 12s linear infinite; }

  @keyframes wd-kop-flug {
    0%, 10%     { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.16, 1); }
    21.5%, 47%  { transform: translate(var(--kop-dx), var(--kop-dy)) scale(1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.16, 1); }
    58.5%, 100% { transform: translate(0, 0) scale(1); }
  }

  #demo-koppeln .pair-phone::before { animation: wd-kop-schatten 12s linear infinite; }

  @keyframes wd-kop-schatten {
    0%, 10%     { opacity: 0; }
    17%, 47%    { opacity: 1; }
    50%, 100%   { opacity: 0; }
  }

  /* Kamerabild blendet beim Ankommen ein und zittert kurz wie eine
     echte Handkamera */
  #demo-koppeln .vf-cam { animation: wd-kop-cam 12s linear infinite; }

  @keyframes wd-kop-cam {
    0%, 20%   { opacity: 0; transform: translate(0, 0); }
    25%       { opacity: 1; transform: translate(0, 0); }
    28%       { transform: translate(1.5px, -1px); }
    31%       { transform: translate(-1.5px, 1px); }
    34%       { transform: translate(1px, 0.5px); }
    37%, 47%  { opacity: 1; transform: translate(0, 0); }
    50%, 100% { opacity: 0; transform: translate(0, 0); }
  }

  #demo-koppeln .vf-frame { animation: wd-kop-rast 12s linear infinite; }

  @keyframes wd-kop-rast {
    0%, 25%     { transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1); }
    27.5%       { transform: scale(0.85); }
    29%, 50%    { transform: scale(0.88); }
    58.5%, 100% { transform: scale(1); }
  }

  #demo-koppeln .vf-scan { animation: wd-kop-scan 12s linear infinite; }

  @keyframes wd-kop-scan {
    0%, 28.5% { opacity: 0; transform: translateY(0); }
    29.6%     { opacity: 1; transform: translateY(11px); }
    34.9%     { opacity: 1; transform: translateY(67px); }
    36%, 100% { opacity: 0; transform: translateY(77px); }
  }

  #demo-koppeln .vf-flash { animation: wd-kop-blitz 12s linear infinite; }

  @keyframes wd-kop-blitz {
    0%, 35%   { opacity: 0; }
    36.5%     { opacity: 0.9; }
    39%, 100% { opacity: 0; }
  }

  #demo-koppeln .cam-hint { animation: wd-kop-hint 12s linear infinite; }

  @keyframes wd-kop-hint {
    0%, 38%   { opacity: 1; }
    40%, 93%  { opacity: 0; }
    98%, 100% { opacity: 1; }
  }

  #demo-koppeln .state-chip-cam { animation: wd-kop-chip-cam 12s linear infinite; }

  @keyframes wd-kop-chip-cam {
    0%, 39%    { opacity: 0; transform: scale(0.6) translateY(4px); }
    41.5%      { opacity: 1; transform: scale(1.08) translateY(0); }
    43.5%, 86% { opacity: 1; transform: scale(1) translateY(0); }
    90%, 100%  { opacity: 0; transform: scale(0.9) translateY(0); }
  }

  #demo-koppeln .state-chip-cam path { animation: wd-kop-haken-cam 12s linear infinite; }

  @keyframes wd-kop-haken-cam {
    0%, 40%   { stroke-dashoffset: 22; }
    45%, 100% { stroke-dashoffset: 0; }
  }

  #demo-koppeln .wait-chip { animation: wd-kop-warte 12s linear infinite; }

  @keyframes wd-kop-warte {
    0%, 51%   { opacity: 1; }
    53%, 93%  { opacity: 0; }
    98%, 100% { opacity: 1; }
  }

  #demo-koppeln .wait-dot { animation: wd-kop-puls 1.5s ease-in-out infinite alternate; }

  @keyframes wd-kop-puls {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }

  /* Der PC feiert eine halbe Sekunde nach dem iPhone, sobald es beim
     Rueckflug den Blick auf den Chip freigibt */
  #demo-koppeln .state-chip-pc { animation: wd-kop-chip-pc 12s linear infinite; }

  @keyframes wd-kop-chip-pc {
    0%, 52%    { opacity: 0; transform: scale(0.6) translateY(4px); }
    54.5%      { opacity: 1; transform: scale(1.08) translateY(0); }
    56.5%, 86% { opacity: 1; transform: scale(1) translateY(0); }
    90%, 100%  { opacity: 0; transform: scale(0.9) translateY(0); }
  }

  #demo-koppeln .state-chip-pc path { animation: wd-kop-haken-pc 12s linear infinite; }

  @keyframes wd-kop-haken-pc {
    0%, 53%   { stroke-dashoffset: 22; }
    58%, 100% { stroke-dashoffset: 0; }
  }

  #demo-koppeln .confetti-pair-phone i { animation: wd-kop-konfetti-phone 12s linear infinite; }

  @keyframes wd-kop-konfetti-phone {
    0%, 39%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    40.5%     { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) rotate(calc(var(--rot) * 0.3)) scale(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); }
    46.5%     { opacity: 1; transform: translate(calc(var(--dx) * 0.85), calc(var(--dy) * 0.85)) rotate(calc(var(--rot) * 0.85)) scale(1); }
    49%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
  }

  #demo-koppeln .confetti-pair-pc i { animation: wd-kop-konfetti-pc 12s linear infinite; }

  @keyframes wd-kop-konfetti-pc {
    0%, 52%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
    53.5%     { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) rotate(calc(var(--rot) * 0.3)) scale(1); animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1); }
    59.5%     { opacity: 1; transform: translate(calc(var(--dx) * 0.85), calc(var(--dy) * 0.85)) rotate(calc(var(--rot) * 0.85)) scale(1); }
    62%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
  }

  /* --- 6. Demo D: Dateityp-Karussell (9,2 s, 4 Karten à 2,3 s) --------
     Drehbuch je Karte, 1 % = 0,092 s, alle vier Karten spielen dieselben
     Keyframes und sind nur um je 2,3 s versetzt (--tkd):
       0,00-0,41 s  Karte rückt aus der Warteschlange nach vorn
       0,46-1,24 s  Ladebalken füllt sich zügig (transform: scaleX)
       1,24-1,52 s  grüner Haken poppt an der Karten-Ecke
       1,89-2,21 s  Karte gleitet nach oben weg und blendet aus
       parallel     die nächste Karte schiebt sich von unten in die
                    Warteschlange (Peek-Ebene, 74,5-80 %)
     Front- und Peek-Knoten einer Karte teilen sich den Delay und die
     Pose im Übergabe-Moment (translateY(18px) scale(0.94)), dadurch
     wirkt der Ebenen-Wechsel wie eine durchgehende Bewegung. */

  #demo-limit .file-card:nth-child(2) { --tkd: -6.9s; }
  #demo-limit .file-card:nth-child(3) { --tkd: -4.6s; }
  #demo-limit .file-card:nth-child(4) { --tkd: -2.3s; }

  #demo-limit .tk-front > .file-card {
    animation: wd-tk-front 9.2s linear infinite;
    animation-delay: var(--tkd, 0s);
  }

  @keyframes wd-tk-front {
    0%          { opacity: 1; transform: translateY(18px) scale(0.94); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
    4.5%, 20.5% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
    23.5%, 100% { opacity: 0; transform: translateY(-52px) scale(0.95); }
  }

  #demo-limit .tk-peek > .file-card {
    animation: wd-tk-peek 9.2s linear infinite;
    animation-delay: var(--tkd, 0s);
  }

  @keyframes wd-tk-peek {
    0%, 74.5% { opacity: 0; transform: translateY(34px) scale(0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
    80%, 100% { opacity: 1; transform: translateY(18px) scale(0.94); }
  }

  #demo-limit .tk-front .file-bar-fill {
    animation: wd-tk-bar 9.2s linear infinite;
    animation-delay: var(--tkd, 0s);
  }

  @keyframes wd-tk-bar {
    0%, 5%      { transform: scaleX(0.04); animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 1); }
    13.5%, 100% { transform: scaleX(1); }
  }

  #demo-limit .tk-front .tk-ok {
    animation: wd-tk-ok 9.2s linear infinite;
    animation-delay: var(--tkd, 0s);
  }

  @keyframes wd-tk-ok {
    0%, 13.5%    { opacity: 0; transform: scale(0.3); }
    15%          { opacity: 1; transform: scale(1.16); }
    16.5%, 20.5% { opacity: 1; transform: scale(1); }
    23%, 100%    { opacity: 0; transform: scale(0.8); }
  }
}

/* ===== Tester-Seite (vip.html) ========================================= */
/* Bewusst winzig: eine Bildschirmseite, kein Scrollen, kein Formular.
   Nur die zwei Rollen erklaeren und die zwei Links anbieten. */

.vip-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.vip-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 2rem);
  text-align: center;
}

.vip-inner { max-width: 640px; width: 100%; }

.vip-claim {
  font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0.5rem 0 0.7rem;
}

.vip-text {
  color: var(--muted);
  font-size: clamp(1rem, 2.1vw, 1.1rem);
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

.vip-rollen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.7rem;
}

.vip-rolle {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  padding: 0.9rem 0.6rem;
}

.vip-rolle-titel {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--blue-deep);
  display: block;
  margin-bottom: 0.15rem;
}

.vip-rolle-text { font-size: 0.9rem; color: var(--muted); }

.vip-pfeil { color: var(--blue-bright); font-size: 1.3rem; line-height: 1; }

.vip-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.vip-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}

@media (max-width: 560px) {
  .vip-rollen { grid-template-columns: 1fr; }
  .vip-pfeil { transform: rotate(90deg); }
}