diff --git a/package-lock.json b/package-lock.json
index 947c6c2..c0e80e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.15",
         "@vue/cli-plugin-eslint": "~4.5.15",
+        "@vue/cli-plugin-router": "~4.5.15",
         "@vue/cli-service": "~4.5.15",
         "babel-eslint": "^10.1.0",
         "eslint": "^6.7.2",
@@ -2542,98 +2543,6 @@
         "strip-ansi": "^6.0.0"
       }
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
-      "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
-      "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.2.39",
-        "@vue/shared": "3.2.39"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
-      "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.39",
-        "@vue/compiler-dom": "3.2.39",
-        "@vue/compiler-ssr": "3.2.39",
-        "@vue/reactivity-transform": "3.2.39",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
-      "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.2.39",
-        "@vue/shared": "3.2.39"
-      }
-    },
     "node_modules/@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -2688,29 +2597,6 @@
         "webpack": ">=4.0.0"
       }
     },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
-      "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.39",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
-      "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -6534,14 +6420,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -9348,17 +9226,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -12892,14 +12759,6 @@
       "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
       "dev": true
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -17659,8 +17518,7 @@
       "version": "4.5.19",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz",
       "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vue/cli-service": {
       "version": "4.5.19",
@@ -17746,87 +17604,6 @@
         "strip-ansi": "^6.0.0"
       }
     },
-    "@vue/compiler-core": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
-      "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "@vue/compiler-dom": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
-      "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@vue/compiler-core": "3.2.39",
-        "@vue/shared": "3.2.39"
-      }
-    },
-    "@vue/compiler-sfc": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
-      "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.39",
-        "@vue/compiler-dom": "3.2.39",
-        "@vue/compiler-ssr": "3.2.39",
-        "@vue/reactivity-transform": "3.2.39",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "postcss": {
-          "version": "8.4.16",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-          "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "nanoid": "^3.3.4",
-            "picocolors": "^1.0.0",
-            "source-map-js": "^1.0.2"
-          }
-        }
-      }
-    },
-    "@vue/compiler-ssr": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
-      "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@vue/compiler-dom": "3.2.39",
-        "@vue/shared": "3.2.39"
-      }
-    },
     "@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -17872,31 +17649,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true,
-      "requires": {}
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
-      "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.39",
-        "@vue/shared": "3.2.39",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "@vue/shared": {
-      "version": "3.2.39",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
-      "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "dev": true
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -18111,8 +17864,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -18142,15 +17894,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -20961,14 +20711,6 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true
     },
-    "estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -23141,17 +22883,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -26083,14 +25814,6 @@
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
       "dev": true
     },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -27598,8 +27321,7 @@
     "vuewordcloud": {
       "version": "18.7.12",
       "resolved": "https://registry.npmjs.org/vuewordcloud/-/vuewordcloud-18.7.12.tgz",
-      "integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA==",
-      "requires": {}
+      "integrity": "sha512-0oqqI47bGj+PxHSFrFe+8EAj1Vwb2lXj0EYFz9a1PO7CuGDCPjxdYKOPN4TlWuXYsstZX8lQTVRkCPEjE55PiA=="
     },
     "watchpack": {
       "version": "1.7.5",
diff --git a/package.json b/package.json
index dc349dd..57c4542 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.15",
     "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
     "@vue/cli-service": "~4.5.15",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
diff --git a/src/App.vue b/src/App.vue
index 4f6a1ac..5d71298 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,228 +1,12 @@
 <template>
-  <div id="app">
-    <div class="selection-text">{{selectionText}}</div>
-    <div class="otf" id="teilnehmen">
-      <!-- <h1 style="padding-top:1em">Party</h1> -->
-      <div class="form-wrapper">
-      </div>
-      <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh">
-        <div class="input-headline">reservation</div>
-        <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" />
-        <input class="input-text" v-model="name" placeholder="real name" size="1" />
-        <input class="input-text" v-model="email" placeholder="email" size="1" />
-        <!-- <label class="input-cb" for="newsletter">
-          <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed
-        </label> -->
-        <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" />
-        <div v-if="error">oh no something went wrong!</div>
-      </form>
-      <div v-if="showHelp" style="margin-bottom: 1em;">
-        *robot voice* give us your data for the reservation!
-      </div>
-      <div v-if="success">
-        <p style="font-size: 8vw">
-          Thanks!
-        </p>
-        <button @click="resetForm" class="input-btn">✓ see you there!</button>
-      </div>
-      <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words"
-        :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }"
-        font-family="'JetBrains Mono'" />
-    </div>
-    <!-- <div class="details" ref="details">
-      TEXT!
-    </div> -->
-    <div
-      @click="share"
-      style="cursor: pointer; margin-top: 5em;"
-    >
 
-      <svg
-      style="fill: #fff"
-      version="1.1"
-      id="svg5225"
-      xml:space="preserve"
-      width="350.21805"
-      height="180.67772"
-      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-      xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:svg="http://www.w3.org/2000/svg"><defs
-        id="defs5229" /><sodipodi:namedview
-        id="namedview5227"
-        pagecolor="#ffffff"
-        bordercolor="#999999"
-        borderopacity="1"
-        inkscape:showpageshadow="0"
-        inkscape:pageopacity="0"
-        inkscape:pagecheckerboard="0"
-        inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
-        min="622.8099,381.05079"
-        max="973.02795,561.72851"
-        geom-min="622.8099,381.05079"
-        geom-max="973.02795,561.72851" /><g
-        id="g5231"
-        transform="translate(-622.8099,-392.30077)"><path
-          id="rect666"
-          style="opacity:1;stroke-width:0;paint-order:stroke fill markers;"
-          d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g
-          aria-label="WILLTEILEN"
-          id="text1443"
-          style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px"
-          transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path
-            d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4358" /><path
-            d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4360" /><path
-            d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4362" /><path
-            d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4364" /><path
-            d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4366" /><path
-            d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4368" /><path
-            d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4370" /><path
-            d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4372" /><path
-            d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4374" /><path
-            d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z"
-            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
-            id="path4376" /></g></g></svg>
-    </div>
-  </div>
+  <router-view/>
+
 </template>
 
 <script>
-  import VueWordCloud from 'vuewordcloud';
   export default {
     name: 'App',
-    data() {
-      return {
-        anzeigename: '',
-        name: '',
-        email: '',
-        newsletter: false,
-        guests: [],
-        sending: false,
-        showHelp: false,
-        selection: null,
-        selectionText: null,
-        success: false,
-        error: false,
-      }
-    },
-    components: {
-      [VueWordCloud.name]: VueWordCloud,
-    },
-    computed: {
-      nameColors() {
-        return ['DeepPink', 'Crimson', 'Blue', 'BlueViolet', 'Fuchsia', 'Navy', 'Indigo']
-      },
-      words() {
-        const names = this.guests.map(guest => {
-          return guest.anzeigename
-        })
-        const nameLengths = names.map(name => {
-          return name.length
-        })
-        const maxNameLength = Math.max(...nameLengths)
-        return this.guests.map(guest => {
-          const nameLength = guest.anzeigename.length
-          let size = maxNameLength - nameLength + 12
-          return [`  ${guest.anzeigename}  `, size]
-        })
-      },
-      // guestlist() {
-      //   return this.guests.map( (g) => {
-      //     g.name = g.anzeigename
-      //     return g
-      //   })
-      // }
-    },
-    methods: {
-      async fetchGuests() {
-        const response = await fetch('/api/guest')
-        const data = await response.json()
-        this.guests = data
-      },
-      async onClickTheButton() {
-        if (this.name.length == 0) {
-          this.showHelp = true
-          return false
-        }
-        this.showHelp = false
-        this.sending = true
-        let data = {
-          anzeigename: this.anzeigename,
-          name: this.name,
-          email: this.email,
-          newsletter: false,
-        }
-        const response = await fetch(
-          '/api/guest', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-          }
-        )
-        if (response.status === 200) {
-          this.anzeigename = ''
-          this.name = ''
-          this.email = ''
-          this.success = true
-          this.fetchGuests()
-        } else {
-          this.anzeigename = ''
-          this.name = ''
-          this.email = ''
-          this.success = true
-          this.fetchGuests()
-          // this.error = true
-        }
-        this.sending = false
-        return false
-      },
-      resetForm () {
-        this.anzeigename = ''
-        this.name = ''
-        this.email = ''
-        this.success = false
-      },
-      async share () {
-        location.href = "#";
-        location.href = "#teilnehmen";
-        try {
-          await navigator.share({ url:"https://reservation.ck.si/" })
-        } catch (err) {
-          console.log(`Error: ${err}`)
-        }
-      }
-    },
-    mounted() {
-      this.fetchGuests()
-      document.addEventListener('selectionchange', () => {
-        this.selection = document.getSelection()
-        // console.log(this.selection)
-        if (this.selection) {
-          this.selectionText = this.selection.toString()
-        }
-      });
-      // this.$refs.details.$el
-    },
   }
 </script>
 
@@ -248,22 +32,16 @@
     background: #000;
   }
   body {
-    background-color: rgb(167, 204, 247);
+    font-family: 'JetBrains Mono', monospace;
+    background-color: rgb(0, 0, 0);
     background-image: url('bg.gif');
     background-size: cover;
     background-position: center center;
     background-attachment: fixed;
-    color: #000;
+    color: rgb(251, 251, 251);
     margin: 0 0 100px;
   }
 
-  .otf {
-    width: 100%;
-    /* background-color: rgb(167, 204, 247); */
-    /* background-image: url('bg.gif'); */
-    background-size: cover;
-  }
-
   #app {
     font-family: 'JetBrains Mono', monospace;
     -webkit-font-smoothing: antialiased;
@@ -274,110 +52,4 @@
     align-items: center;
   }
 
-  .otf {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 100vh;
-    position: relative;
-  }
-
-
-  
-  .input-headline {
-    color: rgb(255, 255, 255);
-    font-size: 2.8vh;
-    margin-bottom: .8vh;
-  }
-
-  .input-form {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 800px;
-    mix-blend-mode: exclusion;
-    margin-top: 4vh;
-    z-index: 9;
-    position: relative;
-  }
-
-  .input-text,
-  .input-btn, 
-  .input-cb {
-    color: #000;
-    background: #fff;
-    font-size: 2.8vh;
-    font-family: 'JetBrains Mono', monospace;
-    border: 0;
-    padding: .5em 1em;
-    line-height: 1.4;
-    max-width: 100%;
-  }
-  .input-btn {
-    color: #fff;
-    background-color: #1e3a8e;
-    border-top: 2px solid rgb(0, 0, 0);
-    cursor: pointer;
-  }
-
-  .input-btn:hover {
-    color: rgb(87, 87, 87);
-    background: rgb(255, 255, 255);
-    border-top: 2px solid rgb(207, 207, 207);
-  }
-
-  .input-checkbox {
-    margin: 0 1em 0 0;    
-  }
-
-
-  @media screen and (max-width: 1000px) {
-    .form-wrapper {
-      margin-top: 4em;
-    }
-
-    .input-text,
-    .input-btn {
-      width: 100%;
-      max-width: 100%;
-      min-width: 0;
-      text-align: center;
-    }
-    /* .input-form {
-      position: absolute;
-      bottom: 0;
-      display: flex;
-      flex-direction: column;
-    } */
-  }
-
-
-  .input-text {
-    width: auto;
-    flex-grow: 1;
-  }
-
-
-
-  .details {
-    color: #fff;
-    background-color: #000;
-    font-size: 10vw;
-    max-width: 80em;
-    margin: 3% 3% 200px;
-    padding: 3%;
-  }
-
-
-
-  .selection-text {
-    position: fixed;
-    z-index: 9999;
-    font-size: 10vh;
-    line-height: 1em;
-    pointer-events: none;
-    color: #ec4b73;
-    mix-blend-mode: multiply;
-    top: 10%;
-  }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..659607d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..348cb37
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/cancel/:token',
+    name: 'Cancel',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/Cancel.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
diff --git a/src/views/Cancel.vue b/src/views/Cancel.vue
new file mode 100644
index 0000000..8a8c469
--- /dev/null
+++ b/src/views/Cancel.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="cancel">
+    <h1 v-if="!success">cancelling reservation {{$route.params.token}} ...</h1>
+    <h1 v-else>
+      Your reservation got cancelled.<br>
+      thanks for letting us know!
+    </h1>
+
+    <div v-if="error">
+      <h2>
+        Oh no! sth went wrong.
+      </h2>
+      <p>
+        {{error.detail}}
+      </p>
+      <p>
+        please send us an email with your reservation token <span class="color: #0ff">{{$route.params.token}}</span>, so we can have a look at it:<br>
+        reservation@ck.si
+      </p>
+    </div>
+
+    
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Cancel',
+    data() {
+      return {
+        success: false,
+        error: false,
+      }
+    },
+    methods: {
+      async cancel() {
+        let data = {
+          token: this.$route.params.token
+        }
+        const response = await fetch(
+          `http://localhost:1234/api/guest/cancel`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+          }
+        )
+        if (response.status === 200) {
+          this.success = true
+        } else {
+          this.error = await response.json()
+        }
+
+      }
+    },
+    mounted () {
+      this.cancel()
+    },
+
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..1eb840c
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,340 @@
+<template>
+  <div id="app">
+    <div class="selection-text">{{selectionText}}</div>
+    <div class="otf" id="teilnehmen">
+      <!-- <h1 style="padding-top:1em">Party</h1> -->
+      <div class="form-wrapper">
+      </div>
+      <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh">
+        <div class="input-headline">reservation</div>
+        <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" />
+        <input class="input-text" v-model="name" placeholder="real name" size="1" />
+        <input class="input-text" v-model="email" placeholder="email" size="1" />
+        <!-- <label class="input-cb" for="newsletter">
+          <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed
+        </label> -->
+        <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" />
+        <div v-if="error">oh no something went wrong!</div>
+      </form>
+      <div v-if="showHelp" style="margin-bottom: 1em;">
+        *robot voice* give us your data for the reservation!
+      </div>
+      <div v-if="success">
+        <p style="font-size: 8vw">
+          Thanks!
+        </p>
+        <button @click="resetForm" class="input-btn">✓ see you there!</button>
+      </div>
+      <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words"
+        :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }"
+        font-family="'JetBrains Mono'" />
+    </div>
+    <!-- <div class="details" ref="details">
+      TEXT!
+    </div> -->
+    <div
+      @click="share"
+      style="cursor: pointer; margin-top: 5em;"
+    >
+
+      <svg
+      style="fill: #fff"
+      version="1.1"
+      id="svg5225"
+      xml:space="preserve"
+      width="350.21805"
+      height="180.67772"
+      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+      xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:svg="http://www.w3.org/2000/svg"><defs
+        id="defs5229" /><sodipodi:namedview
+        id="namedview5227"
+        pagecolor="#ffffff"
+        bordercolor="#999999"
+        borderopacity="1"
+        inkscape:showpageshadow="0"
+        inkscape:pageopacity="0"
+        inkscape:pagecheckerboard="0"
+        inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
+        min="622.8099,381.05079"
+        max="973.02795,561.72851"
+        geom-min="622.8099,381.05079"
+        geom-max="973.02795,561.72851" /><g
+        id="g5231"
+        transform="translate(-622.8099,-392.30077)"><path
+          id="rect666"
+          style="opacity:1;stroke-width:0;paint-order:stroke fill markers;"
+          d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g
+          aria-label="WILLTEILEN"
+          id="text1443"
+          style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px"
+          transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path
+            d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4358" /><path
+            d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4360" /><path
+            d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4362" /><path
+            d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4364" /><path
+            d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4366" /><path
+            d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4368" /><path
+            d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4370" /><path
+            d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4372" /><path
+            d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4374" /><path
+            d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z"
+            style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"
+            id="path4376" /></g></g></svg>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VueWordCloud from 'vuewordcloud';
+  export default {
+    name: 'App',
+    data() {
+      return {
+        anzeigename: '',
+        name: '',
+        email: '',
+        newsletter: false,
+        guests: [],
+        sending: false,
+        showHelp: false,
+        selection: null,
+        selectionText: null,
+        success: false,
+        error: false,
+      }
+    },
+    components: {
+      [VueWordCloud.name]: VueWordCloud,
+    },
+    computed: {
+      nameColors() {
+        return ['DeepPink', 'Crimson', 'Blue', 'BlueViolet', 'Fuchsia', 'Navy', 'Indigo']
+      },
+      words() {
+        const names = this.guests.map(guest => {
+          return guest.anzeigename
+        })
+        const nameLengths = names.map(name => {
+          return name.length
+        })
+        const maxNameLength = Math.max(...nameLengths)
+        return this.guests.map(guest => {
+          const nameLength = guest.anzeigename.length
+          let size = maxNameLength - nameLength + 12
+          return [`  ${guest.anzeigename}  `, size]
+        })
+      },
+      // guestlist() {
+      //   return this.guests.map( (g) => {
+      //     g.name = g.anzeigename
+      //     return g
+      //   })
+      // }
+    },
+    methods: {
+      async fetchGuests() {
+        const response = await fetch('/api/guest')
+        const data = await response.json()
+        this.guests = data
+      },
+      async onClickTheButton() {
+        if (this.name.length == 0) {
+          this.showHelp = true
+          return false
+        }
+        this.showHelp = false
+        this.sending = true
+        let data = {
+          anzeigename: this.anzeigename,
+          name: this.name,
+          email: this.email,
+          newsletter: false,
+        }
+        const response = await fetch(
+          '/api/guest', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+          }
+        )
+        if (response.status === 200) {
+          this.anzeigename = ''
+          this.name = ''
+          this.email = ''
+          this.success = true
+          this.fetchGuests()
+        } else {
+          this.anzeigename = ''
+          this.name = ''
+          this.email = ''
+          this.success = true
+          this.fetchGuests()
+          // this.error = true
+        }
+        this.sending = false
+        return false
+      },
+      resetForm () {
+        this.anzeigename = ''
+        this.name = ''
+        this.email = ''
+        this.success = false
+      },
+      async share () {
+        location.href = "#";
+        location.href = "#teilnehmen";
+        try {
+          await navigator.share({ url:"https://reservation.ck.si/" })
+        } catch (err) {
+          console.log(`Error: ${err}`)
+        }
+      }
+    },
+    mounted() {
+      this.fetchGuests()
+      document.addEventListener('selectionchange', () => {
+        this.selection = document.getSelection()
+        // console.log(this.selection)
+        if (this.selection) {
+          this.selectionText = this.selection.toString()
+        }
+      });
+      // this.$refs.details.$el
+    },
+  }
+</script>
+
+<style>
+  .otf {
+    width: 100%;
+    /* background-color: rgb(167, 204, 247); */
+    /* background-image: url('bg.gif'); */
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    position: relative;
+  }
+
+
+  
+  .input-headline {
+    color: rgb(255, 255, 255);
+    font-size: 2.8vh;
+    margin-bottom: .8vh;
+  }
+
+  .input-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 800px;
+    mix-blend-mode: exclusion;
+    margin-top: 4vh;
+    z-index: 9;
+    position: relative;
+  }
+
+  .input-text,
+  .input-btn, 
+  .input-cb {
+    color: #000;
+    background: #fff;
+    font-size: 2.8vh;
+    font-family: 'JetBrains Mono', monospace;
+    border: 0;
+    padding: .5em 1em;
+    line-height: 1.4;
+    max-width: 100%;
+  }
+  .input-btn {
+    color: #fff;
+    background-color: #1e3a8e;
+    border-top: 2px solid rgb(0, 0, 0);
+    cursor: pointer;
+  }
+
+  .input-btn:hover {
+    color: rgb(87, 87, 87);
+    background: rgb(255, 255, 255);
+    border-top: 2px solid rgb(207, 207, 207);
+  }
+
+  .input-checkbox {
+    margin: 0 1em 0 0;    
+  }
+
+
+  @media screen and (max-width: 1000px) {
+    .form-wrapper {
+      margin-top: 4em;
+    }
+
+    .input-text,
+    .input-btn {
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      text-align: center;
+    }
+    /* .input-form {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+    } */
+  }
+
+
+  .input-text {
+    width: auto;
+    flex-grow: 1;
+  }
+
+
+
+  .details {
+    color: #fff;
+    background-color: #000;
+    font-size: 10vw;
+    max-width: 80em;
+    margin: 3% 3% 200px;
+    padding: 3%;
+  }
+
+
+
+  .selection-text {
+    position: fixed;
+    z-index: 9999;
+    font-size: 10vh;
+    line-height: 1em;
+    pointer-events: none;
+    color: #ec4b73;
+    mix-blend-mode: multiply;
+    top: 10%;
+  }
+</style>
\ No newline at end of file