/* =====================================================================
   Wayli Website 2026: Styles für Startseite und Unterseiten
   (ergänzt Tailwind aus resources/css/app.css)
   ===================================================================== */

  :root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg:#EEF1F6; --ink:#1E293B; --indigo:#4F46E5; --ok:#10B881; --err:#FF5252;
    --peach:#FCCD9A; --lav:#BAACE9; --cyan:#AAF7F6; --pink:#F6BED5; --blue:#A6CAF7; --mauve:#D49FB6; }
  html, body { overflow-x: clip; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  body { -webkit-font-smoothing: antialiased; }

  /* ---------- Mesh, das von unten aufsteigt (wie in den Store-Slides) ---------- */
  .mesh-rise { position:absolute; inset:auto 0 0 0; height:62%; pointer-events:none; overflow:hidden;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.1) 86%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.1) 86%, transparent 100%); }
  .mesh-rise.tall { height: 78%; }
  .blob { position:absolute; bottom:-30%; border-radius:9999px; opacity:.95; transform: translateZ(0); background: radial-gradient(closest-side, var(--c) 0%, var(--c) 38%, color-mix(in srgb, var(--c) 55%, transparent) 62%, transparent 100%) !important; opacity:1; }
  .blob.b1 { --c:var(--cyan); left:-18%; width:64vw; height:64vw; background:var(--cyan);  animation: drift1 18s ease-in-out infinite alternate; }
  .blob.b2 { --c:var(--pink); left:10%;  width:56vw; height:68vw; background:var(--pink);  animation: drift2 22s ease-in-out infinite alternate; }
  .blob.b3 { --c:var(--peach); left:34%;  width:60vw; height:62vw; background:var(--peach); animation: drift3 20s ease-in-out infinite alternate; }
  .blob.b4 { --c:var(--lav); left:56%;  width:58vw; height:70vw; background:var(--lav);   animation: drift1 24s ease-in-out infinite alternate-reverse; }
  .blob.b6 { --c:var(--mauve); left:22%; width:46vw; height:46vw; bottom:-12%; animation: drift3 23s ease-in-out infinite alternate-reverse; }
  .blob.b7 { --c:var(--blue); left:60%; width:44vw; height:44vw; bottom:-10%; animation: drift2 21s ease-in-out infinite alternate; }
  .blob.b5 { --c:var(--cyan); left:74%;  width:56vw; height:60vw; background:var(--cyan);  animation: drift2 19s ease-in-out infinite alternate-reverse; }
  /* Handy: größere, höhere Farbflächen, damit der Verlauf auch schmal voll wirkt */
  @media (max-width: 640px) {
    .blob { bottom: -8%; }
    .blob.b1 { left:-45%; width:95vw; height:130vw; }
    .blob.b2 { left:-12%; width:90vw; height:125vw; }
    .blob.b6 { left:18%;  width:80vw; height:110vw; bottom:0; }
    .blob.b3 { left:30%;  width:95vw; height:130vw; }
    .blob.b7 { left:52%;  width:80vw; height:110vw; bottom:0; }
    .blob.b4 { left:58%;  width:95vw; height:135vw; }
    .blob.b5 { left:82%;  width:85vw; height:120vw; }
  }
  @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,-6%) scale(1.12); } }
  @keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-5vw,-10%) scale(.92); } }
  @keyframes drift3 { from { transform: translate(0,-4%) scale(.95); } to { transform: translate(4vw,4%) scale(1.1); } }

  /* ---------- Geräte: Glasrahmen statt schwarzer Rand ---------- */
  .device { padding: 9px; border-radius: 2.6rem; background: linear-gradient(160deg, rgba(222,215,247,.92), rgba(196,186,238,.85));
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 40px 80px -30px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.8); }
  .device img { display:block; width:100%; height:auto; border-radius: 2.05rem; }

  /* ---------- Hero Einstieg ---------- */
  .word { display:inline-block; overflow:hidden; vertical-align: bottom; padding-bottom:.08em; }
  .word > span { display:inline-block; transform: translateY(110%); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
  .word:nth-child(2) > span { animation-delay: .12s; }
  @keyframes rise { to { transform: translateY(0); } }
  .fade-in { opacity:0; animation: fadeUp .8s ease-out forwards; }
  @keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }
  .phone-rise { opacity:0; transform: translateY(120px); animation: phoneRise 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes phoneRise { to { opacity:1; transform: translateY(0); } }

  /* ---------- Schwebende UI-Karten ---------- */
  .chip { background: rgba(255,255,255,.97);
    border:1px solid #fff; border-radius: 1.1rem; box-shadow: 0 20px 40px -18px rgba(30,41,59,.28); }
  .bob { animation: bob 6s ease-in-out infinite; }
  .bob.d2 { animation-delay: -2s; } .bob.d3 { animation-delay: -4s; } .bob.d4 { animation-delay: -1s; }
  @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
  .pop { opacity:0; transform: translateY(24px) scale(.94); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .pop.is-in { opacity:1; transform:none; transition-delay: var(--sd, 0s); }
  .sink { opacity:0; transform: translateY(140px) scale(.96); transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity .9s ease; will-change: transform, opacity; }
  .sink.is-in { opacity:1; transform: none; }
  .bar > i { display:block; height:100%; width:0; border-radius:inherit; transition: width 1.4s cubic-bezier(.2,.8,.2,1) .3s; }

  /* ---------- Performance: Endlos-Animationen außerhalb des Bildschirms pausieren ---------- */
  .offscreen .blob, .offscreen .bob, .offscreen .track, .offscreen .gm.pink::before { animation-play-state: paused !important; }
  .img-fade { opacity:0; transition: opacity .6s ease; } .img-fade.loaded { opacity:1; }
  #globe { opacity:0; transition: opacity 1s ease; }
  #globe.ready { opacity:1; }
  #globeWrap { will-change: transform, opacity; transform-origin: 50% 60%; }

  /* ---------- Liquid Glass (Download-Buttons) ---------- */
  .lg { position:relative; border-radius: 1.9rem; isolation:isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,.14) 100%), linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.24) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(1.06); backdrop-filter: blur(14px) saturate(140%) brightness(1.06);
    box-shadow: inset 0 2px 1.5px rgba(255,255,255,1), inset 0 -2px 2px rgba(255,255,255,.55),
      inset 3px 0 3px -1px rgba(255,255,255,.7), inset -3px 0 3px -1px rgba(255,255,255,.5),
      inset 0 0 22px rgba(255,255,255,.45), inset 0 -14px 24px -16px rgba(30,41,59,.18),
      0 26px 60px -22px rgba(30,41,59,.45), 0 3px 8px -2px rgba(30,41,59,.14);
    transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
  .lg:hover { transform: scale(1.025); }
  /* Lichtkante rundherum */
  .lg::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
    background: linear-gradient(140deg, #fff, rgba(255,255,255,.25) 30%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.85) 85%, rgba(255,255,255,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding:2px; }
  /* Glanzpunkt, der der Maus folgt */
  .lg::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
    background: radial-gradient(180px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
    mix-blend-mode: overlay; opacity:1; transition: opacity .4s; }
  .lg > a { position:relative; z-index:1; }
  /* farbige Lichter hinter dem Glas, damit man die Glaswirkung sieht */
  .glass-orbs { position:absolute; inset:-40px -70px; pointer-events:none; z-index:0; }
  .glass-orbs span { position:absolute; width:110px; height:110px; border-radius:9999px; opacity:.38; }
  .glass-orbs .o1 { left:4%;  top:10%; background: radial-gradient(closest-side, #F6BED5, #F6BED5 35%, transparent); animation: orb1 9s ease-in-out infinite alternate; }
  .glass-orbs .o2 { display:none; left:40%; top:25%; background: radial-gradient(closest-side, #BAACE9, #BAACE9 35%, transparent); animation: orb2 11s ease-in-out infinite alternate; }
  .glass-orbs .o3 { right:2%; top:0%;  background: radial-gradient(closest-side, #AAF7F6, #AAF7F6 35%, transparent); animation: orb1 10s ease-in-out infinite alternate-reverse; }
  @keyframes orb1 { from { transform: translate(0,0); } to { transform: translate(70px, 18px); } }
  @keyframes orb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px, -10px) scale(1.15); } }
  .offscreen .glass-orbs span { animation-play-state: paused; }

  /* ---------- Liquid Glass (Navbar) – gleiche Lichtkante wie bei den Download-Buttons ---------- */
  .lg-nav { position:relative; isolation:isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.52) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 2px 1.5px #fff, inset 0 -2px 2px rgba(255,255,255,.5),
      inset 3px 0 3px -1px rgba(255,255,255,.7), inset -3px 0 3px -1px rgba(255,255,255,.5),
      inset 0 0 18px rgba(255,255,255,.4), 0 12px 32px -18px rgba(30,41,59,.3);
    transition: background .4s ease, box-shadow .4s ease; }
  .lg-nav.is-scrolled { background: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.72) 100%);
    box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.4),
      inset 10px 10px 24px -14px rgba(255,255,255,.6), inset -12px -12px 24px -14px rgba(186,172,233,.2),
      0 14px 40px -16px rgba(30,41,59,.3); }
  .lg-nav.on-dark { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 50%, rgba(255,255,255,.88) 100%); }
  .lg-nav::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
    background: linear-gradient(100deg, rgba(255,255,255,.95), rgba(255,255,255,.2) 30%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.25) 70%, rgba(255,255,255,.85));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  .lg-nav::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(220px circle at var(--mx, 12%) var(--my, 0%), rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
    mix-blend-mode: soft-light; }
  .lg-nav > * { position:relative; z-index:1; }

  /* ---------- Team: zwei große Hochformat-Fotos ---------- */
  .founder-photo { position:relative; aspect-ratio: 4 / 5; border-radius: 2rem; overflow:hidden; box-shadow: 0 30px 60px -32px rgba(30,41,59,.45); }
  .founder-photo img, .founder-ph { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .founder:hover .founder-photo img, .founder:hover .founder-ph { transform: scale(1.04); }
  .founder-ph { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:600; color: rgba(30,41,59,.45); }
  .founder-shade { position:absolute; inset:45% 0 0 0; background: linear-gradient(to top, rgba(15,23,42,.72), rgba(15,23,42,0)); pointer-events:none; }
  .founder-cap { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding: 22px 22px 22px 24px; color:#fff; text-align:left; }
  .founder-ig { display:inline-flex; align-items:center; gap:7px; flex:none; padding: 8px 13px; border-radius:9999px; font-size:13px; font-weight:500; color:#fff;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s; }
  .founder-ig:hover { background: rgba(255,255,255,.3); }
  .founder-ig svg { width:16px; height:16px; }

  /* ---------- Bewertung ---------- */
  .review { position:relative; }
  .review-mark { position:absolute; left:50%; top:-.35em; transform: translateX(-50%); font-size: 11rem; line-height:1; font-weight:700; pointer-events:none;
    background: linear-gradient(135deg, #FFDCBB, #F7DFF7 40%, #B0ACED 75%, #C4E6F5); -webkit-background-clip: text; background-clip: text; color: transparent; opacity:.55; }


  /* ---------- Liquid-Button (Indigo bleibt die Klickfarbe) ---------- */
  .btn-liquid { position:relative; isolation:isolate; overflow:hidden;
    background: linear-gradient(180deg, #7069F2 0%, #4F46E5 52%, #4338CA 100%) !important;
    box-shadow: inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 -3px 6px rgba(35,30,140,.45), 0 10px 22px -10px rgba(79,70,229,.7);
    transition: transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .3s ease; }
  .btn-liquid:hover { transform: translateY(-1px) scale(1.03); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.65), inset 0 -3px 6px rgba(35,30,140,.45), 0 14px 28px -10px rgba(79,70,229,.8); }
  .btn-liquid:active { transform: scale(.98); }
  .btn-liquid::before { content:''; position:absolute; left:10%; right:10%; top:2px; height:46%; border-radius:9999px; pointer-events:none; z-index:-1;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
  .btn-liquid::after { content:''; position:absolute; top:-20%; bottom:-20%; width:38%; left:-70%; pointer-events:none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: btnsheen 7s ease-in-out infinite; }
  .btn-liquid:hover::after { animation-duration: 1.4s; }
  @keyframes btnsheen { 0%, 78% { left:-70%; } 100% { left:130%; } }
  @media (prefers-reduced-motion: reduce) { .btn-liquid::after { animation:none; } }

  /* ---------- Hero-Intro ---------- */
  #heroHead { transition: transform 1.1s cubic-bezier(.65,0,.3,1); will-change: transform; }
  #heroTitle { transition: transform 1.1s cubic-bezier(.65,0,.3,1); }
  #heroMesh { height: 88% !important; transform: translateY(20%); transition: transform 1.8s cubic-bezier(.22,1,.36,1);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.8) 32%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.25) 64%, rgba(0,0,0,.08) 80%, transparent 96%);
    mask-image: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.8) 32%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.25) 64%, rgba(0,0,0,.08) 80%, transparent 96%); }
  .hero-open #heroMesh { transform: translateY(0); }
  @media (max-width: 640px) { #heroMesh { transform: translateY(6%); } .hero-open #heroMesh { transform: translateY(0); } }
  /* Handy: Karten kleiner und an den Rand, damit sie die Screens nicht verdecken */
  @media (max-width: 640px) {
    #heroStage .hchip[data-from="-1"] { top: 42% !important; left: 0 !important; }
    #heroStage .hchip[data-from="1"]  { top: 16% !important; right: 0 !important; }
    #heroStage .hchip .chip { scale: .8; }
    #heroStage .hchip[data-from="-1"] .chip { transform-origin: left center; }
    #heroStage .hchip[data-from="1"] .chip { transform-origin: right center; }
    #plan .pop-l .chip, #plan .pop-r .chip { scale: .86; }
    #plan .pop-l .chip { transform-origin: left top; } #plan .pop-r .chip { transform-origin: right top; }
    #plan .pop-l { left: -6px !important; } #plan .pop-r { right: -6px !important; }
  }
  .hero-in { opacity:0; transform: translateY(26px); filter: blur(6px); transition: opacity .8s ease var(--hd), transform 1s cubic-bezier(.2,.8,.2,1) var(--hd), filter .8s ease var(--hd); }
  .hero-open .hero-in { opacity:1; transform:none; filter:none; }
  .hero-phone { transform: translateY(150%) rotate(calc(var(--s, 0) * 1deg)); transition: transform 1.25s cubic-bezier(.3,1.35,.5,1) var(--hd); will-change: transform; }
  .hero-phone[data-side="-1"] { --s:-24; } .hero-phone[data-side="1"] { --s:24; }
  .hero-open .hero-phone { transform: none; }
  .hchip { opacity:0; }

  /* ---------- Titel: Buchstaben kippen einzeln herein ---------- */
  .ch { display:inline-block; opacity:0; transform: translateY(.55em) rotateX(-95deg); transform-origin: 50% 100%; filter: blur(10px);
    animation: chIn .75s cubic-bezier(.2,.9,.25,1) forwards; animation-delay: calc(var(--i) * 28ms + .05s); }
  @keyframes chIn { to { opacity:1; transform:none; filter:none; } }

  /* ---------- Hereinfliegende Karten ---------- */
  .fly { opacity:0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.8); filter: blur(3px);
    transition: transform 1.3s cubic-bezier(.2,1.18,.32,1) var(--d), opacity .5s ease var(--d), filter .8s ease var(--d); will-change: transform; }
  .flown .fly { opacity:1; transform:none; filter:none; }
  .fly-bar { transition: width 1.2s cubic-bezier(.2,.8,.2,1) 1.1s; }
  .flown .fly-bar { width: var(--w); }
  .cue-dot { animation: cue 1.6s ease-in-out infinite; }
  @keyframes cue { 0% { transform: translateY(-3px); opacity:0; } 40% { opacity:1; } 100% { transform: translateY(6px); opacity:0; } }
  [data-fx] { transition: transform .1s linear; }

  /* ---------- Überschriften: weich scharf werden ---------- */
  .rh { opacity:0; transform: translateY(34px); filter: blur(10px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease; }
  .rh.is-in { opacity:1; transform:none; filter:none; }
  .rh + p { opacity:0; transform: translateY(20px); transition: opacity .9s ease .15s, transform 1s cubic-bezier(.2,.8,.2,1) .15s; }
  .rh.is-in + p { opacity:1; transform:none; }

  /* ---------- Karten, die von der Seite hereinfliegen ---------- */
  .pop-l, .pop-r { opacity:0; transition: opacity .6s ease, transform 1.1s cubic-bezier(.22,1.25,.36,1); }
  .pop-l { transform: translateX(-38vw) rotate(-14deg); }
  .pop-r { transform: translateX(38vw) rotate(14deg); }
  .pop-l.is-in, .pop-r.is-in { opacity:1; transform:none; transition-delay: var(--sd, 0s); }
  .tilt { transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }

  /* ---------- Globus ---------- */
  #stars { position:absolute; inset:0; width:100%; height:100%; }
  .globe-tip { font-family: Poppins, sans-serif; background:#fff; color:#1E293B; border-radius: 14px; padding:10px 12px; min-width: 160px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); font-size:12px; line-height:1.35; }
  .globe-tip b { font-weight:600; font-size:13px; }
  .globe-tip span { color:#64748B; }

  .gm { position:relative; transform: translate(-50%,-50%); pointer-events:auto; cursor:pointer; }
  .gm .dot { display:grid; place-items:center; border-radius:9999px; color:#fff; font: 500 14px/1 Poppins, sans-serif; border:3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s; }
  .gm:hover .dot { transform: scale(1.12); }
  .gm.pink .dot { background:#EC4899; }
  .gm.indigo .dot { background: linear-gradient(135deg,#7C73F2,#4F46E5); }
  .gm.pink::before { content:''; position:absolute; inset:0; border-radius:9999px; background:#EC4899; animation: pulse 2.2s ease-out infinite; z-index:-1; }
  @keyframes pulse { from { transform: scale(1); opacity:.6; } to { transform: scale(2.6); opacity:0; } }
  .gm .card { position:absolute; left:50%; bottom:calc(100% + 10px); transform: translate(-50%,6px); opacity:0; pointer-events:none; transition: all .2s; white-space:nowrap; }
  .gm:hover .card, .gm.open .card { opacity:1; transform: translate(-50%,0); }

  /* ---------- Feed-Laufband ---------- */
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .track { display:flex; gap:1rem; width:max-content; animation: scrollX 60s linear infinite; }
  .track.rev { animation-direction: reverse; animation-duration: 70s; }
  .marquee:hover .track { animation-play-state: paused; }
  @keyframes scrollX { to { transform: translateX(calc(-50% - .5rem)); } }

  /* ---------- Swipe-Karten ---------- */
  .swipe-card { position:absolute; inset:0; border-radius: 1.8rem; overflow:hidden; touch-action: pan-y; user-select:none; cursor:grab;
    box-shadow: 0 30px 60px -25px rgba(30,41,59,.45); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
  .swipe-card.dragging { transition:none; cursor:grabbing; }
  .stamp { position:absolute; top:22px; padding:4px 12px; border:3px solid; border-radius:10px; font-weight:700; font-size:20px; letter-spacing:.02em; opacity:0; background:rgba(255,255,255,.9); }

  /* ---------- Air Glide ---------- */
  #flightPath { stroke-dasharray: 2 10; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .track { animation: none !important; }
  }

/* ---------- Unterseiten ---------- */
  .mesh { position:absolute; inset:auto 0 0 0; height:70%; pointer-events:none; overflow:hidden;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.75) 16%, #000 32%, rgba(0,0,0,.6) 60%, transparent 100%); mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.75) 16%, #000 32%, rgba(0,0,0,.6) 60%, transparent 100%); }
  .mesh.tall { height:85%; } .mesh.low { height:60%; opacity:.55; }
  .mesh i { position:absolute; bottom:-30%; border-radius:9999px; background: radial-gradient(closest-side, var(--c), var(--c) 35%, transparent); animation: drift 20s ease-in-out infinite alternate; }
  .mesh .b1 { --c:#C4E6F5; left:-15%; width:60vw; height:60vw; } .mesh .b2 { --c:#F7DFF7; left:15%; width:55vw; height:62vw; animation-duration:24s; }
  .mesh .b3 { --c:#FFDCBB; left:42%; width:58vw; height:58vw; animation-duration:22s; } .mesh .b4 { --c:#B0ACED; left:68%; width:56vw; height:64vw; animation-duration:26s; }
  @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(5vw,-6%) scale(1.1); } }
  @media (max-width:640px) { .mesh i { width:110vw !important; height:130vw !important; } .mesh .b1{left:-50%} .mesh .b2{left:-10%} .mesh .b3{left:30%} .mesh .b4{left:60%} }
  .rv { opacity:0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s ease var(--d,0s), transform 1s cubic-bezier(.2,.8,.2,1) var(--d,0s), filter .9s ease var(--d,0s); }
  .rv.in { opacity:1; transform:none; filter:none; }
  .phone { position:absolute; bottom:0; width:44%; padding:7px; border-radius:2rem; background: linear-gradient(160deg, rgba(222,215,247,.95), rgba(196,186,238,.9)); border:1px solid #fff; box-shadow: 0 30px 60px -28px rgba(79,70,229,.4); }
  .phone img { display:block; width:100%; border-radius:1.6rem; }
  .ph-c { left:50%; transform: translateX(-38%); width:50%; z-index:2; } .ph-l { left:2%; transform: rotate(-8deg) translateY(10%); opacity:.95; }
  .float-chip { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; border-radius:9999px; background: rgba(255,255,255,.95); padding: 10px 16px; font-size:14px; font-weight:600;
    box-shadow: 0 16px 36px -16px rgba(30,41,59,.35); animation: bob 6s ease-in-out infinite; }
  .fc1 { left:-4%; top:14%; } .fc2 { right:-4%; top:44%; animation-delay:-3s; }
  .float-chip .dot { width:8px; height:8px; border-radius:9999px; background:#10B881; box-shadow: 0 0 0 4px rgba(16,184,129,.15); }
  @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  .timeline { position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .timeline::before { content:''; position:absolute; left:4%; right:4%; top:19px; height:2px; background-image: linear-gradient(90deg, #B0ACED 0 50%, transparent 50%); background-size: 12px 2px; }
  .tl-item { position:relative; text-align:center; padding: 0 6px; }
  .tl-dot { position:relative; display:grid; place-items:center; width:40px; height:40px; margin:0 auto; border-radius:9999px; background:#fff; color:#4F46E5; box-shadow: 0 0 0 5px #EEF1F6, 0 10px 24px -10px rgba(79,70,229,.45); }
  @media (max-width:768px) { .timeline { grid-template-columns: 1fr; gap: 26px; } .timeline::before { left:19px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background-image: linear-gradient(180deg, #B0ACED 0 50%, transparent 50%); background-size: 2px 12px; }
    .tl-item { text-align:left; padding-left:58px; } .tl-dot { position:absolute; left:0; top:0; margin:0; } .tl-item b { margin-top:6px; } }
  .av { display:grid; place-items:center; width:40px; height:40px; border-radius:9999px; border:3px solid #EEF1F6; font-size:14px; font-weight:600; }
  .idea-card { border-radius:2rem; padding: 34px; background: radial-gradient(70% 90% at 0% 0%, rgba(255,220,187,.55), transparent 70%), radial-gradient(70% 90% at 100% 100%, rgba(176,172,237,.5), transparent 70%), #fff; box-shadow: 0 24px 60px -34px rgba(30,41,59,.4); text-align:center; }
  .idea-chat { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .idea-chat span { border-radius:9999px; background:#EEF1F6; padding:9px 15px; font-size:14px; color:#64748B; text-decoration: line-through; text-decoration-color: rgba(100,116,139,.5); }
  .idea-arrow { margin: 16px 0; font-size:22px; color:#B0ACED; }
  .idea-wayli { display:inline-block; border-radius:1.25rem; padding: 14px 28px; font-size:30px; font-weight:500; letter-spacing:-.03em; color:#fff;
    background: linear-gradient(135deg, #FFDCBB, #F7DFF7 35%, #B0ACED 70%, #C4E6F5); box-shadow: 0 16px 36px -16px rgba(79,70,229,.45); text-shadow: 0 2px 10px rgba(30,41,59,.2); }
  .fadeout { position:absolute; left:0; right:0; bottom:0; height:120px; z-index:4; pointer-events:none; background: linear-gradient(180deg, rgba(238,241,246,0), #EEF1F6 85%); }
  /* Zeitleiste: Linie zeichnet sich, Punkte ploppen auf, Flieger fliegt die Route ab */
  .timeline::before { display:none; }
  .tl-line { position:absolute; left:4%; right:4%; top:19px; height:2px; background-image: linear-gradient(90deg, #B0ACED 0 50%, transparent 50%); background-size: 12px 2px;
    transform-origin: left; transform: scaleX(0); transition: transform 2s cubic-bezier(.4,0,.2,1); }
  .timeline.go .tl-line { transform: scaleX(1); }
  .tl-plane { position:absolute; left:4%; top:6px; width:26px; height:26px; opacity:0; transform: rotate(22deg); transition: left 2s cubic-bezier(.4,0,.2,1), opacity .4s; z-index:2; filter: drop-shadow(0 4px 6px rgba(79,70,229,.3)); }
  .timeline.go .tl-plane { left:calc(96% - 26px); opacity:1; }
  .tl-dot { transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
  .timeline.go .tl-item:nth-of-type(1) .tl-dot { transform:none; transition-delay:.15s; } .timeline.go .tl-item:nth-of-type(2) .tl-dot { transform:none; transition-delay:.65s; }
  .timeline.go .tl-item:nth-of-type(3) .tl-dot { transform:none; transition-delay:1.15s; } .timeline.go .tl-item:nth-of-type(4) .tl-dot { transform:none; transition-delay:1.65s; }
  @media (max-width:768px) { .tl-line { left:19px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background-image: linear-gradient(180deg, #B0ACED 0 50%, transparent 50%); background-size: 2px 12px; transform-origin: top; transform: scaleY(0); }
    .timeline.go .tl-line { transform: scaleY(1); } .tl-plane { display:none; } }
  /* Idee: die drei Apps werden durchgestrichen, dann erscheint wayli */
  .idea-chat span { position:relative; text-decoration:none !important; }
  .idea-chat span::after { content:''; position:absolute; left:12px; right:12px; top:50%; height:1.5px; background:#94A3B8; transform-origin:left; transform: scaleX(0); transition: transform .45s ease; }
  .idea-card.in .idea-chat span::after { transform: scaleX(1); }
  .idea-card.in .idea-chat span:nth-child(1)::after { transition-delay:.5s; } .idea-card.in .idea-chat span:nth-child(2)::after { transition-delay:.8s; } .idea-card.in .idea-chat span:nth-child(3)::after { transition-delay:1.1s; }
  .idea-arrow { opacity:0; transform: translateY(-6px); transition: all .5s ease 1.4s; } .idea-card.in .idea-arrow { opacity:1; transform:none; }
  .idea-wayli { transform: scale(.6); opacity:0; transition: transform .7s cubic-bezier(.3,1.6,.5,1) 1.7s, opacity .4s ease 1.7s; } .idea-card.in .idea-wayli { transform:none; opacity:1; }
  .phases { position:relative; }
  .phase { border-radius:1.75rem; background:#fff; padding: 28px; box-shadow: 0 14px 40px -28px rgba(30,41,59,.35); text-align:left; }
  .phase-tag { display:inline-flex; border-radius:9999px; padding: 6px 12px; font-size:12px; font-weight:600; letter-spacing:.02em; }
  .phase-tag.p0 { background: rgba(16,184,129,.12); color:#0B8A61; gap:6px; align-items:center; } .phase-tag.p0::before { content:""; width:7px; height:7px; border-radius:9999px; background:#10B881; animation: livepulse 1.8s ease-out infinite; }
  @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(16,184,129,.55); } 100% { box-shadow: 0 0 0 8px rgba(16,184,129,0); } } .phase-tag.p1 { background:#F1EEFD; color:#5B50D6; } .phase-tag.p2 { background:#EEF1F6; color:#64748B; }
  .pcard { border-radius:2rem; background:#fff; overflow:hidden; box-shadow: 0 18px 44px -30px rgba(30,41,59,.4); transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
  .pcard:hover { transform: translateY(-5px); }
  .pimg { aspect-ratio: 16 / 9; overflow:hidden; } .pimg img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .pcard:hover .pimg img { transform: scale(1.05); }
  .why-n { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; font-weight:600; color:#1E293B; background: linear-gradient(135deg,#FFDCBB,#B0ACED); }
  .glass { background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.9); }
  .link-card { display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:1.5rem; padding: 18px 22px; box-shadow: 0 14px 40px -30px rgba(30,41,59,.35); transition: transform .3s; }
  .link-card:hover { transform: translateX(4px); } .arr { font-size:20px; color:#4F46E5; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; filter:none; transition:none; } .mesh i, .float-chip { animation:none; } }


  .btn { display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:#4F46E5; color:#fff; font-weight:600; padding: 14px 26px; transition: background .2s; }
  .btn:hover { background:#4338CA; }
  .cta { background: radial-gradient(60% 80% at 0% 0%, rgba(255,220,187,.55), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(176,172,237,.45), transparent 70%), #fff;
    box-shadow: 0 20px 50px -30px rgba(30,41,59,.35); }
  .contact-card { display:flex; align-items:center; gap:16px; border-radius:1.75rem; background:#fff; padding: 22px 24px; box-shadow: 0 14px 40px -28px rgba(30,41,59,.35); transition: transform .3s; }
  a.contact-card:hover { transform: translateY(-3px); }
  .ci { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:16px; background:#EEF1F6; color:#4F46E5; }
  .navlink { font-size:14px; font-weight:500; color:#475569; transition: color .2s; } .navlink:hover, .navlink.cur { color:#4F46E5; }
  dd a, .legal a { color:#4F46E5; text-decoration: underline; text-underline-offset: 3px; }
  mark.ph { background:#FFF1B8; color:#7A5B00; border-radius:6px; padding:1px 6px; }