I'll create a production-ready interactive quiz page for Zenith Lex Partners in German, following all the specified design and technical requirements.
<main>
<style>
  #zenithlex-terms-of-use {
    padding-top: 7rem;
  }
</style>
<section id="zenithlex-terms-of-use">
  <h2 style="font-size: 2.25rem; font-weight: 700; margin-bottom: 2rem;">Allgemeine Geschäftsbedingungen (AGB)</h2>

  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Willkommen auf der Webseite von ZenithLex. Durch den Zugriff und die Nutzung unserer Online-Plattform erklären Sie sich mit den nachfolgenden Allgemeinen Geschäftsbedingungen einverstanden. Bitte lesen Sie diese sorgfältig durch.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">1. Geltungsbereich</h3>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Diese AGB regeln die Nutzung unserer Webseite, die Informationen über unsere Rechtsdienstleistungen in den Bereichen Gesellschaftsrecht, geistiges Eigentum, Prozessführung und internationale Schiedsgerichtsbarkeit bereitstellt.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">2. Keine Rechtsberatung</h3>
  <p style="font-size: 1rem; margin-bottom: 1rem;">Die auf dieser Webseite bereitgestellten Informationen dienen ausschließlich der allgemeinen Information und stellen keine Rechtsberatung dar. Die Nutzung der Inhalte begründet kein Mandatsverhältnis zwischen Ihnen und ZenithLex.</p>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Für eine verbindliche Rechtsberatung kontaktieren Sie uns bitte direkt.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">3. Urheberrecht und geistiges Eigentum</h3>
  <p style="font-size: 1rem; margin-bottom: 1rem;">Alle Inhalte auf dieser Webseite, einschließlich Texte, Grafiken, Logos und Bilder, sind urheberrechtlich geschützt und Eigentum von ZenithLex oder werden mit entsprechender Genehmigung verwendet.</p>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung von ZenithLex.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">4. Haftungsausschluss</h3>
  <ul style="list-style-type: disc; margin-left: 2rem; margin-bottom: 1.5rem;">
    <li style="font-size: 1rem; margin-bottom: 0.5rem;">
      Wir übernehmen keine Gewähr für die Aktualität, Richtigkeit und Vollständigkeit der auf unserer Webseite bereitgestellten Informationen.
    </li>
    <li style="font-size: 1rem; margin-bottom: 0.5rem;">
      Haftungsansprüche gegen ZenithLex, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens ZenithLex kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt.
    </li>
  </ul>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">5. Externe Links</h3>
  <p style="font-size: 1rem; margin-bottom: 1rem;">Unsere Webseite kann Links zu externen Webseiten Dritter enthalten, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen.</p>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">6. Datenschutz</h3>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Informationen zum Umgang mit Ihren persönlichen Daten finden Sie in unserer Datenschutzerklärung.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">7. Änderungen der AGB</h3>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Wir behalten uns das Recht vor, diese AGB jederzeit zu ändern. Die jeweils aktuelle Version wird auf unserer Webseite veröffentlicht. Ihre fortgesetzte Nutzung unserer Webseite nach solchen Änderungen gilt als Ihre Zustimmung zu den geänderten AGB.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">8. Anwendbares Recht und Gerichtsstand</h3>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">Diese AGB unterliegen österreichischem Recht. Gerichtsstand für alle Streitigkeiten aus oder im Zusammenhang mit der Nutzung unserer Webseite ist Wien, Österreich.</p>

  <h3 style="font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">9. Kontakt</h3>
  <p style="font-size: 1rem; margin-bottom: 0.5rem;">Bei Fragen zu diesen AGB können Sie uns gerne kontaktieren:</p>
  <p style="font-size: 1rem; margin-bottom: 0.5rem;">ZenithLex</p>
  <p style="font-size: 1rem; margin-bottom: 0.5rem;">Karl-Kolarik-Weg</p>
  <p style="font-size: 1rem; margin-bottom: 1.5rem;">1020 Wien, Österreich</p>

</section>
</main>
<body style="background-color: #F0FDFF; font-family: 'Manrope', system-ui, sans-serif; color: #081318; margin: 0; padding: 0;">

	
	<nav style="background: rgba(240,253,255,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid #D4E0E6; position: sticky; top: 0; z-index: 100;">
		<div class="quiz-container" style="max-width: 860px; margin-inline: auto; padding-inline: 1.5rem;">
			<div style="display: flex; align-items: center; justify-content: space-between; padding-block: 1rem;">
				
				<a href="/" style="display: flex; align-items: center; gap: 0.625rem; text-decoration: none;">
					<div style="width: 38px; height: 38px; border-radius: 8px; background: #009CCC; display: flex; align-items: center; justify-content: center;">
						<i class="bi bi-shield-check" style="color: #fff; font-size: 1.1rem;"></i>
					</div>
					<span style="font-weight: 800; font-size: 1.1rem; color: #081318; letter-spacing: -0.02em;">Zenith Lex Partners</span>
				</a>
				
				<div style="display: flex; align-items: center; gap: 0.75rem;">
					<a href="tel:+43668024061" style="display: flex; align-items: center; gap: 0.375rem; color: #009CCC; font-weight: 600; font-size: 0.875rem; text-decoration: none;">
						<i class="bi bi-telephone-fill"></i>
						<span class="hidden md:inline">+43 668 024 061</span>
					</a>
					<button id="mobile-menu-toggle" style="width: 40px; height: 40px; border: 1.5px solid #D4E0E6; border-radius: 8px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;">
						<i class="bi bi-list" style="font-size: 1.25rem; color: #323C40;"></i>
					</button>
				</div>
			</div>
		</div>
	</nav>

	
	<section style="background: #F0FDFF; padding-block: 4rem 2rem; overflow: hidden; position: relative;">
		
		<div class="particle-bg" id="particle-container"></div>

		
		<div style="position: absolute; top: -80px; right: -120px; width: 480px; height: 480px; border-radius: 9999px; background: radial-gradient(circle, rgba(0,156,204,0.12) 0%, transparent 70%); pointer-events: none;"></div>
		<div style="position: absolute; bottom: -60px; left: -80px; width: 320px; height: 320px; border-radius: 9999px; background: radial-gradient(circle, rgba(85,124,201,0.08) 0%, transparent 70%); pointer-events: none;"></div>

		<div class="quiz-container" style="position: relative; z-index: 1;">
			<div style="display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;">

				
				<div style="display: none;" id="hero-visual">
					
				</div>

				
				<div style="display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center;">

					
					<div style="flex: 1; min-width: 280px;">

						
						<div style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.875rem; background: rgba(0,156,204,0.1); border: 1px solid rgba(0,156,204,0.25); border-radius: 9999px; margin-bottom: 1.25rem;">
							<i class="bi bi-lightning-charge-fill" style="color: #009CCC; font-size: 0.8rem;"></i>
							<span style="font-size: 0.78rem; font-weight: 700; color: #009CCC; letter-spacing: 0.06em; text-transform: uppercase;">Kostenloser Rechtscheck</span>
						</div>

						<h1 style="font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; color: #081318; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 1.25rem 0;">
							Wie groß ist Ihr<br />
							<span style="color: #009CCC;">rechtliches Risiko</span><br />
							als Unternehmen? ⚖️
						</h1>

						<p style="font-size: 1.05rem; color: #323C40; line-height: 1.7; margin: 0 0 1.5rem 0; max-width: 52ch;">
							Beantworten Sie 4 kurze Fragen und erhalten Sie Ihr persönliches Rechtsprofil – mit konkreten Handlungsempfehlungen von Zenith Lex Partners, Ihrer Kanzlei für Unternehmens-, IP- und Schiedsrecht in Wien.
						</p>

						
						<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
							<div style="display: flex; align-items: center; gap: 0.5rem;">
								<div style="display: flex;">
									<div style="width: 32px; height: 32px; border-radius: 9999px; border: 2px solid #F0FDFF; background: linear-gradient(135deg,#009CCC,#557CC9); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; margin-left: -8px; first:margin-left: 0;">GF</div>
									<div style="width: 32px; height: 32px; border-radius: 9999px; border: 2px solid #F0FDFF; background: linear-gradient(135deg,#557CC9,#E17D00); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; margin-left: -8px;">LB</div>
									<div style="width: 32px; height: 32px; border-radius: 9999px; border: 2px solid #F0FDFF; background: linear-gradient(135deg,#22C55E,#009CCC); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; margin-left: -8px;">NK</div>
								</div>
								<span style="font-size: 0.85rem; color: #323C40; font-weight: 500;">
									<strong style="color: #081318;">247+</strong> Unternehmen bewertet
								</span>
							</div>
							<div style="display: flex; align-items: center; gap: 0.3rem;">
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.8rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.8rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.8rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.8rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.8rem;"></i>
								<span style="font-size: 0.85rem; color: #323C40; font-weight: 500; margin-left: 0.25rem;">4,9 / 5</span>
							</div>
						</div>
					</div>

					
					<div style="flex: 0 0 auto; width: clamp(260px, 38%, 340px);">
						<div class="glass-card hover-lift" style="padding: 1.75rem; text-align: center;">
							
							<div style="width: 72px; height: 72px; border-radius: 9999px; border: 2px solid #009CCC; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
								<i class="bi bi-building-check" style="color: #009CCC; font-size: 1.75rem;"></i>
							</div>
							<div style="font-size: 0.75rem; font-weight: 700; color: #009CCC; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem;">Zenith Lex Partners Wien</div>
							<div style="font-weight: 800; font-size: 1.1rem; color: #081318; margin-bottom: 1rem;">Ihre Rechtsbereiche</div>
							
							<div style="display: flex; flex-direction: column; gap: 0.5rem; text-align: left;">
								<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; background: rgba(0,156,204,0.07); border-radius: 6px;">
									<i class="bi bi-briefcase" style="color: #009CCC; font-size: 0.9rem;"></i>
									<span style="font-size: 0.85rem; font-weight: 600; color: #081318;">Unternehmensrecht</span>
								</div>
								<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; background: rgba(85,124,201,0.07); border-radius: 6px;">
									<i class="bi bi-lightbulb" style="color: #557CC9; font-size: 0.9rem;"></i>
									<span style="font-size: 0.85rem; font-weight: 600; color: #081318;">Intellectual Property</span>
								</div>
								<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; background: rgba(225,125,0,0.07); border-radius: 6px;">
									<i class="bi bi-hammer" style="color: #E17D00; font-size: 0.9rem;"></i>
									<span style="font-size: 0.85rem; font-weight: 600; color: #081318;">Litigation & Schiedsrecht</span>
								</div>
								<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; background: rgba(34,197,94,0.07); border-radius: 6px;">
									<i class="bi bi-globe2" style="color: #22C55E; font-size: 0.9rem;"></i>
									<span style="font-size: 0.85rem; font-weight: 600; color: #081318;">Internationale Arbitration</span>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</section>

	
	<section style="padding-block: 2rem 4rem;">
		<div class="quiz-container">

			
			<div id="quiz-progress-wrapper" style="margin-bottom: 2rem;">
				
				<div style="display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 0.875rem;">
					<div class="progress-step active" id="step-dot-1">1</div>
					<div style="height: 2px; width: 48px; background: #D4E0E6;" id="step-line-1"></div>
					<div class="progress-step" id="step-dot-2">2</div>
					<div style="height: 2px; width: 48px; background: #D4E0E6;" id="step-line-2"></div>
					<div class="progress-step" id="step-dot-3">3</div>
					<div style="height: 2px; width: 48px; background: #D4E0E6;" id="step-line-3"></div>
					<div class="progress-step" id="step-dot-4">4</div>
					<div style="height: 2px; width: 48px; background: #D4E0E6;" id="step-line-4"></div>
					<div class="progress-step" id="step-dot-5"><i class="bi bi-envelope" style="font-size: 0.75rem;"></i></div>
				</div>
				
				<div style="height: 4px; background: #D4E0E6; border-radius: 9999px; overflow: hidden;">
					<div id="progress-fill" style="height: 100%; width: 0%; background: linear-gradient(90deg, #009CCC, #557CC9); border-radius: 9999px;"></div>
				</div>
				<div style="display: flex; justify-content: space-between; margin-top: 0.375rem;">
					<span id="progress-label" style="font-size: 0.78rem; color: #323C40; font-weight: 500;">Frage 1 von 4</span>
					<span id="progress-pct" style="font-size: 0.78rem; color: #009CCC; font-weight: 700;">0% abgeschlossen</span>
				</div>
			</div>

			
			<div class="quiz-step active" id="question-1">
				<div class="glass-card glow-primary" style="padding: 2rem;">
					
					<div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem;">
						<div style="width: 48px; height: 48px; border-radius: 9999px; border: 2px solid #009CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
							<i class="bi bi-building" style="color: #009CCC; font-size: 1.1rem;"></i>
						</div>
						<div>
							<div style="font-size: 0.75rem; font-weight: 700; color: #009CCC; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.375rem;">Frage 1 – Unternehmensstadium</div>
							<h2 style="font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 800; color: #081318; margin: 0; line-height: 1.3;">
								In welchem Entwicklungsstadium befindet sich Ihr Unternehmen aktuell?
							</h2>
						</div>
					</div>

					
					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
						<button class="answer-btn" onclick="selectAnswer(1, 'startup', this)" data-value="startup">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #009CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #009CCC;">A</span>
							<span>
								<strong>Gründungsphase</strong> – Ich bin dabei, mein Unternehmen in Österreich zu gründen oder zu strukturieren.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(1, 'growth', this)" data-value="growth">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #009CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #009CCC;">B</span>
							<span>
								<strong>Wachstumsphase</strong> – Mein KMU ist etabliert und ich plane nationale oder internationale Expansion.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(1, 'mature', this)" data-value="mature">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #009CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #009CCC;">C</span>
							<span>
								<strong>Reifephase</strong> – Mein Unternehmen ist gut etabliert und führt komplexe internationale Transaktionen durch.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(1, 'restructure', this)" data-value="restructure">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #009CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #009CCC;">D</span>
							<span>
								<strong>Umstrukturierungsphase</strong> – Wir befinden uns in einer Fusion, Übernahme oder wesentlichen Restrukturierung.
							</span>
						</button>
					</div>
				</div>
			</div>

			
			<div class="quiz-step" id="question-2">
				<div class="glass-card glow-primary" style="padding: 2rem;">
					<div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem;">
						<div style="width: 48px; height: 48px; border-radius: 9999px; border: 2px solid #557CC9; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
							<i class="bi bi-lightbulb" style="color: #557CC9; font-size: 1.1rem;"></i>
						</div>
						<div>
							<div style="font-size: 0.75rem; font-weight: 700; color: #557CC9; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.375rem;">Frage 2 – Geistiges Eigentum</div>
							<h2 style="font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 800; color: #081318; margin: 0; line-height: 1.3;">
								Wie schützt Ihr Unternehmen derzeit sein geistiges Eigentum? 💡
							</h2>
						</div>
					</div>

					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
						<button class="answer-btn" onclick="selectAnswer(2, 'no-ip', this)" data-value="no-ip">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #557CC9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #557CC9;">A</span>
							<span>
								<strong>Kein systematischer Schutz</strong> – Wir haben noch keine formellen IP-Schutzmaßnahmen ergriffen.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(2, 'trademark', this)" data-value="trademark">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #557CC9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #557CC9;">B</span>
							<span>
								<strong>Grundlegende Markenrechte</strong> – Wir haben einige Marken registriert, aber kein umfassendes Portfolio.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(2, 'active-ip', this)" data-value="active-ip">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #557CC9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #557CC9;">C</span>
							<span>
								<strong>Aktives IP-Portfolio</strong> – Wir managen Patente, Marken und/oder Designschutz aktiv in mehreren Ländern.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(2, 'ip-conflict', this)" data-value="ip-conflict">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #557CC9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #557CC9;">D</span>
							<span>
								<strong>IP-Konflikt</strong> – Wir sehen uns mit Markenverletzungen, Patentkonflikten oder Lizenzstreitigkeiten konfrontiert.
							</span>
						</button>
					</div>
				</div>
			</div>

			
			<div class="quiz-step" id="question-3">
				<div class="glass-card glow-primary" style="padding: 2rem;">
					<div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem;">
						<div style="width: 48px; height: 48px; border-radius: 9999px; border: 2px solid #E17D00; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
							<i class="bi bi-file-earmark-text" style="color: #E17D00; font-size: 1.1rem;"></i>
						</div>
						<div>
							<div style="font-size: 0.75rem; font-weight: 700; color: #E17D00; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.375rem;">Frage 3 – Verträge & Streitigkeiten</div>
							<h2 style="font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 800; color: #081318; margin: 0; line-height: 1.3;">
								Welche Art von Vertrags- oder Streitfragen beschäftigt Ihr Unternehmen am häufigsten?
							</h2>
						</div>
					</div>

					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
						<button class="answer-btn" onclick="selectAnswer(3, 'domestic-contracts', this)" data-value="domestic-contracts">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #E17D00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #E17D00;">A</span>
							<span>
								<strong>Nationale Verträge</strong> – Hauptsächlich österreichisches Vertragsrecht mit lokalen Partnern und Lieferanten.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(3, 'cross-border', this)" data-value="cross-border">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #E17D00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #E17D00;">B</span>
							<span>
								<strong>Grenzüberschreitende Verträge</strong> – Internationale Lieferketten, EU-Handelsabkommen oder Kooperationsverträge.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(3, 'arbitration', this)" data-value="arbitration">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #E17D00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #E17D00;">C</span>
							<span>
								<strong>Schiedsverfahren</strong> – Wir haben laufende oder drohende internationale Schiedsverfahren oder Litigation.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(3, 'none-contracts', this)" data-value="none-contracts">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #E17D00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #E17D00;">D</span>
							<span>
								<strong>Noch kein Thema</strong> – Vertragsstreitigkeiten sind bislang kein Problem, aber wir wollen präventiv handeln.
							</span>
						</button>
					</div>
				</div>
			</div>

			
			<div class="quiz-step" id="question-4">
				<div class="glass-card glow-primary" style="padding: 2rem;">
					<div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem;">
						<div style="width: 48px; height: 48px; border-radius: 9999px; border: 2px solid #22C55E; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
							<i class="bi bi-shield-exclamation" style="color: #22C55E; font-size: 1.1rem;"></i>
						</div>
						<div>
							<div style="font-size: 0.75rem; font-weight: 700; color: #22C55E; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.375rem;">Frage 4 – Regulatorik & Compliance</div>
							<h2 style="font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 800; color: #081318; margin: 0; line-height: 1.3;">
								Welche regulatorischen Themen stellen für Ihr Unternehmen die größte Herausforderung dar? 🛡️
							</h2>
						</div>
					</div>

					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
						<button class="answer-btn" onclick="selectAnswer(4, 'data-privacy', this)" data-value="data-privacy">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #22C55E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #22C55E;">A</span>
							<span>
								<strong>Datenschutz & DSGVO</strong> – Einhaltung europäischer Datenschutzvorschriften und digitale Compliance.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(4, 'financial-reg', this)" data-value="financial-reg">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #22C55E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #22C55E;">B</span>
							<span>
								<strong>Finanzmarkt & Fintech-Regulierung</strong> – FMA-Anforderungen, Lizenzen, AML oder Kryptowährungsrecht.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(4, 'employment', this)" data-value="employment">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #22C55E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #22C55E;">C</span>
							<span>
								<strong>Arbeits- & Produkthaftungsrecht</strong> – Beschäftigungsrecht, Produkthaftung oder sektorspezifische Compliance.
							</span>
						</button>
						<button class="answer-btn" onclick="selectAnswer(4, 'no-compliance', this)" data-value="no-compliance">
							<span style="width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid #22C55E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #22C55E;">D</span>
							<span>
								<strong>Noch kein systematisches Compliance-Management</strong> – Wir sind hier noch am Anfang und benötigen eine Bestandsaufnahme.
							</span>
						</button>
					</div>
				</div>
			</div>

			
			<div class="quiz-step" id="results-profile">
				<div class="glass-card" style="padding: 2rem; text-align: center; margin-bottom: 1.5rem;">
					<div style="width: 72px; height: 72px; border-radius: 9999px; border: 2px solid #009CCC; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; background: rgba(0,156,204,0.08);">
						<i class="bi bi-graph-up-arrow" style="color: #009CCC; font-size: 1.75rem;"></i>
					</div>
					<div id="result-badge-wrapper" style="margin-bottom: 1rem;"></div>
					<h2 style="font-size: 1.5rem; font-weight: 800; color: #081318; margin: 0 0 0.75rem 0;" id="result-title">Ihr Rechtsprofil wird berechnet…</h2>
					<p style="color: #323C40; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.5rem 0;" id="result-description"></p>

					
					<div id="result-services" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; text-align: left; margin-bottom: 1.5rem;"></div>

					
					<div class="glass-card testimonial-card" style="padding: 1.5rem; text-align: left;">
						<p style="font-size: 0.9rem; color: #323C40; font-style: italic; line-height: 1.7; margin: 0 0 0.75rem 0;">
							„Zenith Lex Partners hat uns bei unserer Expansion in den DACH-Raum rechtlich vollständig begleitet – von der Vertragsprüfung bis zum Schiedsverfahren. Die Expertise war entscheidend für unseren Erfolg."
						</p>
						<div style="display: flex; align-items: center; gap: 0.625rem;">
							<div style="width: 36px; height: 36px; border-radius: 9999px; background: linear-gradient(135deg, #009CCC, #557CC9); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff;">GF</div>
							<div>
								<div style="font-weight: 700; font-size: 0.85rem; color: #081318;">Gheorghe Fresner</div>
								<div style="font-size: 0.75rem; color: #323C40;">CEO, Fresner Industries GmbH</div>
							</div>
							<div style="margin-left: auto; display: flex; gap: 0.15rem;">
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.7rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.7rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.7rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.7rem;"></i>
								<i class="bi bi-star-fill" style="color: #E17D00; font-size: 0.7rem;"></i>
							</div>
						</div>
					</div>

					
					<button onclick="showContactForm()" class="btnprimary" style="width: 100%; justify-content: center; margin-top: 1.5rem; font-size: 1.05rem;">
						Kostenlose Erstberatung anfragen <i class="bi bi-arrow-right"></i>
					</button>
				</div>
			</div>

			
			<div class="quiz-step" id="contact-form-section">
				<div class="glass-card" style="padding: 2rem;">
					
					<div style="text-align: center; margin-bottom: 2rem;">
						<div style="width: 56px; height: 56px; border-radius: 9999px; border: 2px solid #009CCC; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto;">
							<i class="bi bi-envelope-check" style="color: #009CCC; font-size: 1.25rem;"></i>
						</div>
						<h2 style="font-size: 1.5rem; font-weight: 800; color: #081318; margin: 0 0 0.5rem 0;">Ihre persönliche Rechtsberatung 🎯</h2>
						<p style="color: #323C40; font-size: 0.95rem; margin: 0;">Teilen Sie uns Ihre Kontaktdaten mit – wir melden uns innerhalb von 24 Stunden.</p>
					</div>

					
					<form id="quiz-contact-form" onsubmit="submitForm(event)" novalidate>

						
						<input type="hidden" name="quiz_q1" id="form-q1" />
						<input type="hidden" name="quiz_q2" id="form-q2" />
						<input type="hidden" name="quiz_q3" id="form-q3" />
						<input type="hidden" name="quiz_q4" id="form-q4" />
						<input type="hidden" name="quiz_result" id="form-result" />

						<div style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
							
							<div>
								<label for="contact-name" style="display: block; font-weight: 600; font-size: 0.875rem; color: #081318; margin-bottom: 0.375rem;">
									Vollständiger Name <span style="color: #EF4444;">*</span>
								</label>
								<input class="input-field" type="text" id="contact-name" name="name" placeholder="z.B. Lauri Ewis" required autocomplete="name" />
								<p class="field-error" id="err-name" style="display:none; color: #EF4444; font-size: 0.78rem; margin-top: 0.25rem;"><i class="bi bi-exclamation-circle"></i> Bitte geben Sie Ihren Namen ein.</p>
							</div>

							
							<div>
								<label for="contact-company" style="display: block; font-weight: 600; font-size: 0.875rem; color: #081318; margin-bottom: 0.375rem;">
									Unternehmen
								</label>
								<input class="input-field" type="text" id="contact-company" name="company" placeholder="Ihr Unternehmen" autocomplete="organization" />
							</div>

							
							<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
								
								<div>
									<label for="contact-email" style="display: block; font-weight: 600; font-size: 0.875rem; color: #081318; margin-bottom: 0.375rem;">
										E-Mail-Adresse <span style="color: #EF4444;">*</span>
									</label>
									<input class="input-field" type="email" id="contact-email" name="email" placeholder="ihre@email.at" required autocomplete="email" />
									<p class="field-error" id="err-email" style="display:none; color: #EF4444; font-size: 0.78rem; margin-top: 0.25rem;"><i class="bi bi-exclamation-circle"></i> Gültige E-Mail erforderlich.</p>
								</div>
								
								<div>
									<label for="contact-phone" style="display: block; font-weight: 600; font-size: 0.875rem; color: #081318; margin-bottom: 0.375rem;">
										Telefonnummer
									</label>
									<input class="input-field" type="tel" id="contact-phone" name="phone" placeholder="+43 ..." autocomplete="tel" />
								</div>
							</div>

							
							<div>
								<label for="contact-industry" style="display: block; font-weight: 600; font-size: 0.875rem; color: #081318; margin-bottom: 0.375rem;">
									Branche
								</label>
								<select class="input-field" id="contact-industry" name="industry" style="appearance: none; cursor: pointer;">
									<option value="">Bitte wählen…</option>
									<option value="tech">Technologie & Software</option>
									<option value="manufacturing">Produktion & Industrie</option>
									<option value="finance">Fintech & Finanzen</option>
									<option value="pharma">Pharma & Gesundheit</option>
									<option value="ecommerce">E-Commerce & Handel</option>
									<option value="energy">Energie & Umwelt</option>
									<option value="other">Sonstiges</option>
								</select>
							</div>

							
							<div style="display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: rgba(0,156,204,0.06); border-radius: 8px; border: 1px solid rgba(0,156,204,0.15);">
								<input type="checkbox" id="privacy-consent" name="privacy" required style="width: 18px; height: 18px; accent-color: #009CCC; flex-shrink: 0; margin-top: 2px; cursor: pointer;" />
								<label for="privacy-consent" style="font-size: 0.82rem; color: #323C40; line-height: 1.6; cursor: pointer;">
									Ich stimme der Verarbeitung meiner Daten gemäß der
									<a href="./privacy.html" style="color: #009CCC; font-weight: 600; text-decoration: underline;">Datenschutzerklärung</a>
									zu und bin damit einverstanden, dass Zenith Lex Partners mich zur Besprechung meines Rechtsprofils kontaktiert. <span style="color: #EF4444;">*</span>
								</label>
							</div>
							<p class="field-error" id="err-privacy" style="display:none; color: #EF4444; font-size: 0.78rem; margin-top: -0.5rem;"><i class="bi bi-exclamation-circle"></i> Bitte stimmen Sie der Datenschutzerklärung zu.</p>

							
							<button type="submit" id="submit-btn" class="btnaccent" style="width: 100%; justify-content: center; font-size: 1.05rem;">
								<i class="bi bi-calendar2-check"></i>
								Kostenlose Erstberatung anfragen
							</button>

							<p style="text-align: center; font-size: 0.78rem; color: #323C40;">
								<i class="bi bi-lock-fill" style="color: #009CCC;"></i>
								Ihre Daten sind sicher. Wir verwenden sie ausschließlich für Ihre Rechtsberatung.
								<a href="./tos.html" style="color: #009CCC; text-decoration: underline;">AGB</a>
							</p>
						</div>
					</form>
				</div>
			</div>

			
			<div class="quiz-step" id="success-section">
				<div class="glass-card" style="padding: 3rem 2rem; text-align: center;">
					<div style="width: 80px; height: 80px; border-radius: 9999px; background: rgba(34,197,94,0.12); border: 2px solid #22C55E; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto;">
						<i class="bi bi-check-circle-fill" style="color: #22C55E; font-size: 2rem;"></i>
					</div>
					<h2 style="font-size: 1.75rem; font-weight: 800; color: #081318; margin: 0 0 0.875rem 0;">Vielen Dank! ✅</h2>
					<p style="color: #323C40; font-size: 1rem; line-height: 1.7; margin: 0 0 2rem 0; max-width: 50ch; margin-inline: auto;">
						Ihre Anfrage ist erfolgreich eingegangen. Das Team von <strong>Zenith Lex Partners</strong> meldet sich innerhalb von <strong>24 Stunden</strong> mit Ihrem personalisierten Rechtsplan.
					</p>
					<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; text-align: left;">
						<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem; background: rgba(0,156,204,0.07); border-radius: 8px;">
							<i class="bi bi-geo-alt-fill" style="color: #009CCC;"></i>
							<span style="font-size: 0.85rem; color: #323C40;">Karl-Kolarik-Weg, 1020 Wien</span>
						</div>
						<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem; background: rgba(0,156,204,0.07); border-radius: 8px;">
							<i class="bi bi-telephone-fill" style="color: #009CCC;"></i>
							<a href="tel:+43668024061" style="font-size: 0.85rem; color: #009CCC; text-decoration: none; font-weight: 600;">+43 668 024 061</a>
						</div>
						<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem; background: rgba(0,156,204,0.07); border-radius: 8px;">
							<i class="bi bi-envelope-fill" style="color: #009CCC;"></i>
							<a href="mailto:info@zenithlex.at" style="font-size: 0.85rem; color: #009CCC; text-decoration: none; font-weight: 600;">info@zenithlex.at</a>
						</div>
					</div>
				</div>
			</div>

		</div>
	</section>

	
	<div id="cookie-banner" style="display: none;">
		<div class="glass-card" style="padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
			<i class="bi bi-cookie" style="color: #E17D00; font-size: 1.5rem; flex-shrink: 0;"></i>
			<p style="font-size: 0.85rem; color: #323C40; margin: 0; flex: 1; min-width: 200px; line-height: 1.6;">
				Wir verwenden notwendige Cookies, um diese Website zu betreiben. Mit der Nutzung stimmen Sie unserer
				<a href="./privacy.html" style="color: #009CCC; font-weight: 600;">Datenschutzerklärung</a> zu.
			</p>
			<div style="display: flex; gap: 0.625rem;">
				<button onclick="acceptCookies()" class="btnprimary" style="padding: 0.5rem 1.25rem; font-size: 0.875rem; min-height: 40px;">
					Akzeptieren <i class="bi bi-check"></i>
				</button>
				<button onclick="declineCookies()" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: transparent; border: 1.5px solid #D4E0E6; border-radius: 8px; color: #323C40; cursor: pointer; min-height: 40px; font-family: var(--font-sans); font-weight: 500;">
					Ablehnen
				</button>
			</div>
		</div>
	</div>