lukas-h · April 9, 2025 06:38
diff --git a/form.html b/form.html
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Gastro hoch drei – Demo starten</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --purple: #B4AFE1;
      --green: #C8E690;
      --coral: #EFA593;
      --dark: #2E2E2E;
      --light: #F8F6F8;
      --white: #ffffff;
    }

    body {
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      background-color: var(--light);
      color: var(--dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      text-align: center;
    }

    .step-indicator {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: center;
    }

    .step {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--white);
    }

    .step.active {
      background-color: var(--purple);
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 10px;
      font-weight: 600;
    }

    p {
      font-size: 1.1rem;
      margin-bottom: 30px;
      max-width: 600px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 15px;
      max-width: 800px;
      width: 100%;
      margin-bottom: 30px;
    }

    .grid button, .form button {
      background-color: var(--green);
      color: var(--dark);
      border: none;
      padding: 12px;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .grid button:hover {
      background-color: #b1d976;
    }

    .form input {
      width: 100%;
      max-width: 400px;
      padding: 12px;
      margin: 10px auto;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }

    .form .cta {
      background-color: var(--purple);
      color: var(--white);
      margin-top: 20px;
    }

    .form .cta:hover {
      background-color: #9b91db;
    }

    .hidden {
      display: none;
    }

    .form small {
      font-size: 0.75rem;
      color: #555;
      margin-top: 20px;
      display: block;
    }
  </style>
 </head>
 <body>

  <div id="step1" class="step-section">
    <div class="step-indicator">
      <div class="step active">1</div>
      <div class="step">2</div>
      <div class="step">3</div>
    </div>
    <h1>Nur noch wenige Sekunden bis zur Demo</h1>
    <p>Welche Art von Gastronomiebetrieb führen Sie?</p>
    <div class="grid">
      <button onclick="nextStep(2)">Restaurant</button>
      <button onclick="nextStep(2)">Food Truck</button>
      <button onclick="nextStep(2)">Lieferservice</button>
      <button onclick="nextStep(2)">Café</button>
      <button onclick="nextStep(2)">Fast Food</button>
      <button onclick="nextStep(2)">Bar/Kneipe</button>
      <button onclick="nextStep(2)">Bäckerei</button>
      <button onclick="nextStep(2)">Catering</button>
    </div>
  </div>

  <div id="step2" class="step-section hidden">
    <div class="step-indicator">
      <div class="step active">1</div>
      <div class="step active">2</div>
      <div class="step">3</div>
    </div>
    <h1>Wie hoch ist Ihr Jahresumsatz?</h1>
    <p>EUR (€)</p>
    <div class="grid">
      <button onclick="nextStep(3)">Unbekannt / kein Umsatz</button>
      <button onclick="nextStep(3)">1–300 Tsd.</button>
      <button onclick="nextStep(3)">301–500 Tsd.</button>
      <button onclick="nextStep(3)">501 Tsd. – 1 Mio.</button>
      <button onclick="nextStep(3)">1 Mio. – 2 Mio.</button>
      <button onclick="nextStep(3)">2 Mio. – 5 Mio.</button>
      <button onclick="nextStep(3)">5+ Mio.</button>
      <button onclick="nextStep(3)">Das möchte ich nicht sagen</button>
    </div>
  </div>

  <div id="step3" class="step-section hidden">
    <div class="step-indicator">
      <div class="step active">1</div>
      <div class="step active">2</div>
      <div class="step active">3</div>
    </div>
    <h1>Gleich haben Sie es geschafft!</h1>
    <p>Nehmen Sie sich Zeit, wir haben einen Platz für Sie reserviert.</p>
    <form class="form" action="https://www.lightspeedhq.de/pc/restaurant/gastgewerbe-kassensystem-6/" method="get" target="_blank">
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="E-Mail Adresse" required />
      <input type="tel" name="telefon" placeholder="Telefonnummer" />
      <input type="text" name="firma" placeholder="Firmenname" />
      <button type="submit" class="cta">Jetzt ansehen</button>
      <small>Mit Klick auf „Jetzt ansehen“ stimmen Sie unseren <a href="#" style="color: var(--purple);">AGB</a> und der <a href="#" style="color: var(--purple);">Datenschutzerklärung</a> zu.</small>
    </form>
  </div>

  <script>
    function nextStep(step) {
      document.querySelectorAll(".step-section").forEach(s => s.classList.add("hidden"));
      document.getElementById("step" + step).classList.remove("hidden");
    }
  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Gastro hoch drei – Demo starten</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
	<style>
	:root {
	--purple: #B4AFE1;
	--green: #C8E690;
	--coral: #EFA593;
	--dark: #2E2E2E;
	--light: #F8F6F8;
	--white: #ffffff;
	}

	body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: var(--light);
	color: var(--dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	text-align: center;
	}

	.step-indicator {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: center;
	}

	.step {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--white);
	}

	.step.active {
	background-color: var(--purple);
	}

	h1 {
	font-size: 2rem;
	margin-bottom: 10px;
	font-weight: 600;
	}

	p {
	font-size: 1.1rem;
	margin-bottom: 30px;
	max-width: 600px;
	}

	.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 15px;
	max-width: 800px;
	width: 100%;
	margin-bottom: 30px;
	}

	.grid button, .form button {
	background-color: var(--green);
	color: var(--dark);
	border: none;
	padding: 12px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
	}

	.grid button:hover {
	background-color: #b1d976;
	}

	.form input {
	width: 100%;
	max-width: 400px;
	padding: 12px;
	margin: 10px auto;
	border-radius: 8px;
	border: 1px solid #ccc;
	font-size: 1rem;
	}

	.form .cta {
	background-color: var(--purple);
	color: var(--white);
	margin-top: 20px;
	}

	.form .cta:hover {
	background-color: #9b91db;
	}

	.hidden {
	display: none;
	}

	.form small {
	font-size: 0.75rem;
	color: #555;
	margin-top: 20px;
	display: block;
	}
	</style>
	</head>
	<body>

	<div id="step1" class="step-section">
	<div class="step-indicator">
	<div class="step active">1</div>
	<div class="step">2</div>
	<div class="step">3</div>
	</div>
	<h1>Nur noch wenige Sekunden bis zur Demo</h1>
	<p>Welche Art von Gastronomiebetrieb führen Sie?</p>
	<div class="grid">
	<button onclick="nextStep(2)">Restaurant</button>
	<button onclick="nextStep(2)">Food Truck</button>
	<button onclick="nextStep(2)">Lieferservice</button>
	<button onclick="nextStep(2)">Café</button>
	<button onclick="nextStep(2)">Fast Food</button>
	<button onclick="nextStep(2)">Bar/Kneipe</button>
	<button onclick="nextStep(2)">Bäckerei</button>
	<button onclick="nextStep(2)">Catering</button>
	</div>
	</div>

	<div id="step2" class="step-section hidden">
	<div class="step-indicator">
	<div class="step active">1</div>
	<div class="step active">2</div>
	<div class="step">3</div>
	</div>
	<h1>Wie hoch ist Ihr Jahresumsatz?</h1>
	<p>EUR (€)</p>
	<div class="grid">
	<button onclick="nextStep(3)">Unbekannt / kein Umsatz</button>
	<button onclick="nextStep(3)">1–300 Tsd.</button>
	<button onclick="nextStep(3)">301–500 Tsd.</button>
	<button onclick="nextStep(3)">501 Tsd. – 1 Mio.</button>
	<button onclick="nextStep(3)">1 Mio. – 2 Mio.</button>
	<button onclick="nextStep(3)">2 Mio. – 5 Mio.</button>
	<button onclick="nextStep(3)">5+ Mio.</button>
	<button onclick="nextStep(3)">Das möchte ich nicht sagen</button>
	</div>
	</div>

	<div id="step3" class="step-section hidden">
	<div class="step-indicator">
	<div class="step active">1</div>
	<div class="step active">2</div>
	<div class="step active">3</div>
	</div>
	<h1>Gleich haben Sie es geschafft!</h1>
	<p>Nehmen Sie sich Zeit, wir haben einen Platz für Sie reserviert.</p>
	<form class="form" action="https://www.lightspeedhq.de/pc/restaurant/gastgewerbe-kassensystem-6/" method="get" target="_blank">
	<input type="text" name="name" placeholder="Name" required />
	<input type="email" name="email" placeholder="E-Mail Adresse" required />
	<input type="tel" name="telefon" placeholder="Telefonnummer" />
	<input type="text" name="firma" placeholder="Firmenname" />
	<button type="submit" class="cta">Jetzt ansehen</button>
	<small>Mit Klick auf „Jetzt ansehen“ stimmen Sie unseren <a href="#" style="color: var(--purple);">AGB</a> und der <a href="#" style="color: var(--purple);">Datenschutzerklärung</a> zu.</small>
	</form>
	</div>

	<script>
	function nextStep(step) {
	document.querySelectorAll(".step-section").forEach(s => s.classList.add("hidden"));
	document.getElementById("step" + step).classList.remove("hidden");
	}
	</script>

	</body>
	</html>