/* Eröffnung der Startseite: vernetzte Läden, Datenbank, zufriedene Wirte */
html.hi-on, html.hi-on body { overflow: hidden; }
#home-intro { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 40%, #fbfaf8 0%, #efedea 55%, #dedad4 100%); }
html.hi-on #home-intro { display: grid; }
#home-intro.out { animation: hi-out .55s ease forwards; }
@keyframes hi-out { to { opacity: 0; visibility: hidden; } }

.hi-scene { width: min(1250px, 128vh, 165vw); perspective: 1100px; }
.hi-scene svg { width: 100%; height: auto; display: block; overflow: visible; transform-origin: 50% 55%;
  animation: hi-tilt 5s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes hi-tilt {
  0% { transform: rotateX(28deg) rotateZ(-4deg) scale(.9); opacity: 1; }
  60% { transform: rotateX(8deg) rotateZ(2deg) scale(1); filter: blur(0); opacity: 1; }
  72% { transform: rotateX(4deg) rotateZ(0deg) scale(1.02); filter: blur(0); opacity: 1; }
  86% { transform: rotateX(4deg) scale(1.06); filter: blur(4px); opacity: .3; }
  100% { transform: rotateX(4deg) scale(1.08); filter: blur(5px); opacity: .25; }
}
.hi-floor { opacity: 0; animation: hi-fade .6s .05s ease forwards; }
@keyframes hi-fade { to { opacity: 1; } }

.hi-shop { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: hi-pop .6s var(--d) cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes hi-pop { from { opacity: 0; transform: translateY(-60px) scale(.5); } to { opacity: 1; transform: none; } }

.hi-hub { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: hi-rise .8s .7s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes hi-rise { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: none; } }
.hi-logo { transform-box: fill-box; transform-origin: 50% 50%; animation: hi-bob 1.6s 1.4s ease-in-out infinite alternate; }
@keyframes hi-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.hi-pulse { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: hi-pulse 1.2s 2s ease-out 3; }
@keyframes hi-pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.hi-led { animation: hi-blink .5s 1.6s steps(2) infinite; }
.hi-led.l2 { animation-delay: 1.85s; }
@keyframes hi-blink { 50% { opacity: .25; } }

.hi-line { fill: none; stroke: #1d3461; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55;
  animation: hi-draw .7s var(--d) ease-out forwards; }
@keyframes hi-draw { to { stroke-dashoffset: 0; } }

.hi-bub { opacity: 0; transform-box: fill-box; transform-origin: 30% 100%; animation: hi-bub .5s var(--d) cubic-bezier(.3, 1.8, .5, 1) forwards; }
.hi-bub rect, .hi-bub path { filter: drop-shadow(0 4px 6px rgba(20, 30, 50, .18)); }
@keyframes hi-bub { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }

.hi-brand { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 8px; text-align: center; pointer-events: none;
  padding: 26px clamp(24px, 5vw, 48px); border-radius: 34px; background: rgba(250, 249, 247, .86); box-shadow: 0 20px 60px rgba(20, 30, 50, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: max-content; max-width: calc(100vw - 32px);
  opacity: 0; transform: translate(-50%, -50%); animation: hi-brand .7s 3.7s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.hi-brand img { width: 84px; height: 84px; filter: drop-shadow(0 8px 16px rgba(29, 52, 97, .3)); }
.hi-brand b { font: 900 clamp(44px, 9vw, 84px)/1 var(--round, sans-serif); letter-spacing: -.045em; color: #1d3461; }
.hi-brand b span { color: #f2a900; }
.hi-brand p { margin: 0; font: 800 clamp(16px, 2.6vw, 22px) var(--round, sans-serif); color: #4a5368; }
@keyframes hi-brand { from { opacity: 0; transform: translate(-50%, -42%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%); } }

.hi-skip { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 999px; padding: 10px 16px;
  background: rgba(255, 255, 255, .8); color: #1d3461; font: 800 14px var(--round, sans-serif); cursor: pointer; box-shadow: 0 4px 14px rgba(20, 30, 50, .12); }

@media (max-width: 640px) {
  .hi-scene { width: 128vw; }
}

/* ======================================================= Variante: Die Bestellung live */
.v-bestellung .hi-brand { animation-delay: 4.55s; }
.hb-stage { position: absolute; left: 50%; top: 50%; width: 1000px; height: 620px; transform: translate(-50%, -50%) scale(var(--k, 1));
  font-family: var(--round, sans-serif);
  --phx: 110px; --phy: 90px; --tbx: 600px; --tby: 130px; --bnx: 690px; --bny: 330px; --hsx: 845px; --hsy: 380px; --lane: 548px;
  --p0x: 210px; --p0y: 330px; --p1x: 470px; --p1y: 20px; --p2x: 735px; --p2y: 215px; }
.hb-stage.portrait { width: 620px; height: 1000px;
  --phx: 60px; --phy: 40px; --tbx: 290px; --tby: 420px; --bnx: 380px; --bny: 622px; --hsx: 60px; --hsy: 640px; --lane: 900px;
  --p0x: 160px; --p0y: 280px; --p1x: 420px; --p1y: 150px; --p2x: 425px; --p2y: 500px; }
.hb-stage > * { position: absolute; }
.hb-phone { left: var(--phx); top: var(--phy); width: 200px; height: 390px; border-radius: 34px; background: #1b2233; padding: 12px;
  box-shadow: 0 24px 50px rgba(20, 30, 50, .25); opacity: 0; animation: hb-in .5s .05s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.hb-screen { height: 100%; border-radius: 24px; background: #efedea; padding: 22px 12px 12px; display: grid; align-content: start; gap: 10px; font-size: 13px; }
.hb-shop { font-weight: 900; font-size: 16px; color: #1b2233; }
.hb-item { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 10px; font-weight: 700; }
.hb-btn { margin-top: 116px; background: #1d3461; color: #fff; text-align: center; border-radius: 999px; padding: 12px; font-weight: 900; animation: hb-press .3s 1.05s ease; }
@keyframes hb-press { 50% { transform: scale(.9); background: #2b4f91; } }
.hb-finger { left: calc(var(--phx) + 130px); top: calc(var(--phy) + 420px); font-size: 54px; opacity: 0; animation: hb-finger 1s .55s ease forwards; }
@keyframes hb-finger { 0% { opacity: 0; transform: translate(40px, 60px); } 40% { opacity: 1; transform: translate(0, -40px); } 55% { transform: translate(0, -28px) scale(.92); } 75% { opacity: 1; transform: translate(0, -40px); } 100% { opacity: 0; transform: translate(30px, 30px); } }
.hb-pizza { left: 0; top: 0; font-size: 64px; opacity: 0; animation: hb-fly 1s 1.2s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes hb-fly {
  0% { opacity: 0; transform: translate(var(--p0x), var(--p0y)) scale(.4) rotate(0); }
  10% { opacity: 1; }
  50% { transform: translate(var(--p1x), var(--p1y)) scale(1.3) rotate(200deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--p2x), var(--p2y)) scale(.5) rotate(360deg); }
}
.hb-tablet { left: var(--tbx); top: var(--tby); width: 300px; height: 205px; border-radius: 20px; background: #10181a; padding: 14px; color: #fff;
  box-shadow: 0 24px 50px rgba(20, 30, 50, .25); opacity: 0; animation: hb-in .5s .35s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.hb-tab-head { font-weight: 900; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.hb-bell { display: inline-block; animation: hb-ring .7s 2.15s ease 2; transform-origin: 50% 0; }
@keyframes hb-ring { 20% { transform: rotate(-24deg); } 40% { transform: rotate(20deg); } 60% { transform: rotate(-14deg); } 80% { transform: rotate(8deg); } }
.hb-ticket { margin-top: 12px; background: #fff; color: #1b2233; border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; font-weight: 700; font-size: 14px;
  border-left: 8px solid #f5c84b; opacity: 0; transform: scale(.6); animation: hb-pop .45s 2.15s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.hb-ticket b { font-size: 18px; }
@keyframes hb-pop { to { opacity: 1; transform: none; } }
.hb-bon { left: var(--bnx); top: var(--bny); width: 120px; padding: 10px 12px; background: #fff; display: grid; gap: 2px; font: 700 12px ui-monospace, Menlo, monospace; color: #1b2233;
  box-shadow: 0 10px 20px rgba(20, 30, 50, .15); clip-path: inset(0 0 100% 0); animation: hb-print .7s 2.6s steps(6) forwards; }
.hb-bon b { font-size: 15px; }
@keyframes hb-print { to { clip-path: inset(0 0 0 0); } }
.hb-scooter { left: 0; top: var(--lane); width: 110px; opacity: 0; animation: hb-drive 1.5s 3.05s cubic-bezier(.4, 0, .6, 1) forwards; }
.hb-scooter img { width: 100%; display: block; animation: hb-bump .18s 3.05s ease-in-out 8 alternate; }
@keyframes hb-drive { 0% { opacity: 1; transform: translateX(-140px); } 100% { opacity: 1; transform: translateX(var(--hsx)); } }
.hb-stage.portrait .hb-scooter { animation-name: hb-drive-p; }
@keyframes hb-drive-p { 0% { opacity: 1; transform: translateX(660px) scaleX(-1); } 100% { opacity: 1; transform: translateX(170px) scaleX(-1); } }
@keyframes hb-bump { to { transform: translateY(-3px); } }
.hb-house { left: var(--hsx); top: var(--hsy); width: 130px; height: 170px; background: #fff6e6; border-radius: 10px 10px 0 0; box-shadow: inset 0 -8px 0 #e8d6b6;
  opacity: 0; animation: hb-in .5s 3.1s ease forwards; perspective: 400px; }
.hb-house::before { content: ''; position: absolute; left: -12px; right: -12px; top: -26px; height: 30px; background: #c8102e; border-radius: 10px 10px 4px 4px; }
.hb-door { position: absolute; left: 22px; bottom: 0; width: 50px; height: 92px; background: #1d3461; border-radius: 6px 6px 0 0; transform-origin: 0 50%; animation: hb-open .6s 3.9s ease forwards; }
.hb-house::after { content: ''; position: absolute; left: 22px; bottom: 0; width: 50px; height: 92px; background: radial-gradient(70% 60% at 50% 70%, #ffdc7a, #f6a51a); border-radius: 6px 6px 0 0; z-index: -1; }
.hb-win { position: absolute; right: 14px; top: 26px; width: 36px; height: 36px; border-radius: 6px; background: #9fd0f5; }
@keyframes hb-open { to { transform: rotateY(-75deg); } }
.hb-yum { left: calc(var(--hsx) - 40px); top: calc(var(--hsy) - 92px); background: #fff; border-radius: 18px; padding: 10px 16px; font: 900 22px var(--round, sans-serif); color: #1d3461;
  box-shadow: 0 10px 24px rgba(20, 30, 50, .18); opacity: 0; transform: scale(0); transform-origin: 30% 100%; animation: hb-pop .45s 4.15s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes hb-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.v-bestellung .hb-stage { animation: hb-fadeback .6s 4.45s ease forwards; }
@keyframes hb-fadeback { to { filter: blur(4px); opacity: .3; } }

/* ======================================================= Variante: Der Stadtplan */
.v-stadtplan .hi-brand { animation-delay: 3.95s; }
.hm-cam { position: absolute; inset: 0; animation: hm-zoom 1.4s 2.9s cubic-bezier(.6, 0, .2, 1) forwards; }
.hm-cam svg { width: 100%; height: 100%; display: block; }
@keyframes hm-zoom { to { transform: scale(2.6); filter: blur(1.5px); } }
.hm-block { opacity: 0; animation: hi-fade .5s var(--d) ease forwards; }
.hm-street { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hi-draw .8s var(--d) ease-out forwards; }
.hm-dot { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: hi-bub .45s var(--d) cubic-bezier(.3, 1.8, .5, 1) forwards; }
.hm-me { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: hi-bub .5s 2.6s cubic-bezier(.3, 1.8, .5, 1) forwards; }

/* ======================================================= Variante: Der Bon */
.v-bon { background: radial-gradient(120% 90% at 50% 20%, #fbfaf8 0%, #efedea 60%, #dedad4 100%); }
.v-bon.play { animation: hr-bg .6s 4.3s ease forwards; }
@keyframes hr-bg { to { background: transparent; } }
.hr-printer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(400px, 92vw); height: 34px; border-radius: 0 0 18px 18px; background: #1b2233; z-index: 2;
  box-shadow: 0 8px 20px rgba(20, 30, 50, .25); animation: hr-printer-out .4s 4.2s ease forwards; }
.hr-printer span { position: absolute; left: 24px; right: 24px; bottom: 6px; height: 5px; border-radius: 3px; background: #0b0f17; }
@keyframes hr-printer-out { to { transform: translate(-50%, -60px); } }
.hr-paper { position: absolute; top: 26px; left: 50%; width: min(340px, 84vw); transform: translateX(-50%); transform-origin: 50% 0;
  animation: hr-tear 1s 4.1s cubic-bezier(.5, 0, .7, .4) forwards; }
.hr-inner { background: #fff; padding: 22px 22px 30px; font: 600 15px/1.45 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #1b2233;
  box-shadow: 0 18px 40px rgba(20, 30, 50, .2);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) bottom / 14px 10px repeat-x; }
.hr-line { max-height: 0; overflow: hidden; animation: hr-print .18s var(--d) steps(3) forwards; }
@keyframes hr-print { to { max-height: 60px; } }
.hr-row { display: flex; justify-content: space-between; gap: 14px; }
.hr-c { justify-content: center; }
.hr-cut { color: #9aa1ad; overflow: hidden; white-space: nowrap; }
.hr-gap { height: 10px; }
.hr-them { color: #d9443a; position: relative; }
.hr-them::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: #d9443a; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%;
  animation: hr-strike .35s 2.85s ease forwards; }
@keyframes hr-strike { to { transform: scaleX(1); } }
.hr-us { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fff3c4; color: #1d3461; font-size: 17px; animation: hr-glow .6s 3.4s ease 2 alternate; }
@keyframes hr-glow { to { box-shadow: 0 0 0 6px rgba(255, 200, 61, .45); } }
.hr-save { margin-top: 4px; color: #1e9a62; font-weight: 800; font-size: 17px; }
@keyframes hr-tear {
  0% { transform: translateX(-50%); }
  15% { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translate(-30%, 120vh) rotate(28deg); opacity: .9; }
}
@media (min-width: 700px) and (min-height: 640px) {
  .hr-paper { width: 440px; }
  .hr-inner { font-size: 18px; padding: 28px 28px 36px; }
  .hr-printer { width: 500px; }
}

/* ======================================================= Variante: Lieferando oder eigene Seite? */
.v-vergleich .hi-brand { animation-delay: 3.75s; }
.vs-stage { position: relative; display: grid; justify-items: center; gap: 26px; padding: 20px; font-family: var(--round, sans-serif); }
.vs-q { margin: 0; font: 900 clamp(24px, 4vw, 40px) var(--round, sans-serif); letter-spacing: -.03em; color: #1b2233; opacity: 0; animation: hi-fade .5s .05s ease forwards; }
.vs-row { display: flex; gap: clamp(18px, 4vw, 48px); }
.vs-card { position: relative; width: clamp(240px, 30vw, 340px); padding: 26px 24px 22px; border-radius: 30px; display: grid; gap: 4px; justify-items: start;
  box-shadow: 0 20px 44px rgba(20, 30, 50, .16); opacity: 0; animation: hb-in .55s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.vs-card.them { background: #f4f1ec; color: #3b3f48; animation-delay: .2s; }
.vs-card.us { background: #1d3461; color: #fff; animation-delay: .38s; }
.vs-ic { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.vs-card b { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: -.02em; }
.vs-card small { font-size: 15px; font-weight: 700; opacity: .7; }
.vs-fee { margin-top: 14px; padding: 8px 14px; border-radius: 999px; font: 900 clamp(18px, 2.2vw, 24px) var(--round, sans-serif); opacity: 0; transform: scale(.4);
  animation: hb-pop .45s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.vs-fee.bad { background: #fde3e1; color: #d9443a; animation-delay: .8s; }
.vs-fee.good { background: #ffc83d; color: #1d3461; animation-delay: 1.05s; }
/* Lieferando wackelt und explodiert */
.vs-card.them { animation: hb-in .55s .2s cubic-bezier(.3, 1.4, .5, 1) forwards, vs-shake .5s 2s ease, vs-gone .2s 2.5s ease forwards; }
@keyframes vs-shake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-6px) rotate(-1deg); } 80% { transform: translateX(5px) rotate(1deg); } }
@keyframes vs-gone { to { opacity: 0; transform: scale(1.15); } }
.vs-boom { position: absolute; inset: 0; pointer-events: none; }
.vs-shard { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); background: #f4f1ec;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06); opacity: 0; animation: vs-fly .9s 2.5s cubic-bezier(.2, .7, .3, 1) forwards; }
.vs-shard:nth-child(3n) { background: #fde3e1; }
@keyframes vs-fly { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); } }
.vs-bang { position: absolute; left: 50%; top: 50%; font-size: 120px; line-height: 1; transform: translate(-50%, -50%) scale(0); opacity: 0;
  animation: vs-bang .6s 2.45s ease-out forwards; }
@keyframes vs-bang { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
/* Finger: erst zu Lieferando, zögert, dann zur eigenen Seite und tippt */
.vs-finger { position: absolute; left: 0; top: 0; font-size: 58px; line-height: 1; opacity: 0; pointer-events: none;
}
/* Eigene Seite wird angetippt und hervorgehoben */
.vs-card.us { animation: hb-in .55s .38s cubic-bezier(.3, 1.4, .5, 1) forwards, vs-tap .35s 2.95s ease, vs-win .6s 3.3s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes vs-tap { 50% { transform: scale(.94); box-shadow: 0 0 0 10px rgba(255, 200, 61, .5); } }
@keyframes vs-win { to { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(255, 200, 61, .35), 0 30px 60px rgba(20, 30, 50, .25); } }
.vs-check { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #3bb273; color: #fff;
  font-weight: 900; font-size: 24px; opacity: 0; transform: scale(0); animation: hb-pop .4s 3.05s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.v-vergleich .vs-stage { animation: hb-fadeback .5s 3.7s ease forwards; }
@media (max-width: 640px) {
  .vs-row { flex-direction: column; }
  .vs-card { width: min(320px, 84vw); padding: 20px; }
}