body {

background-color: #fffff;–––––

font-family: 'Raleway', sans-serif;

color: #1a1a1a;

margin: 2rem;

}

.form-container {

background: #FFF2E;

padding: 2rem;

border-radius: 2rem;

box-shadow: 0 0 20px rgba(0,0,0,0.05);

max-width: 600px;

margin: auto;

}

h2 {

font-weight: 700;

font-size: 2rem;

margin-bottom: 2rem;

}

label {

display: block;

margin: 1.2rem 0 0.5rem;

font-size: 1.1rem;

font-weight: 500;

}

select {

width: 100%;

padding: 1rem;

border-radius: 1rem;

border: 1px solid #e0d6c5;

font-size: 1rem;

background-color: #fff;

appearance: none;

}

.btn {

margin-top: 2rem;

width: 100%;

padding: 1.2rem;

background-color: #DE9D45;

color: white;

font-size: 1.2rem;

font-weight: 600;

border: none;

border-radius: 1.5rem;

cursor: pointer;

transition: transform 0.2s ease-in-out;

}

.btn:hover {

transform: scale(1.03);

}

.result {

margin-top: 2rem;

padding: 2rem;

background: #FFF2DE;

border-radius: 1rem;

text-align: center;

}

.result strong {

display: block;

font-size: 1.4rem;

margin-top: 0.5rem;

}

.result a {

display: inline-block;

margin-top: 1rem;

background: #DE9D45;

color: white;

padding: 1rem 2rem;

border-radius: 1rem;

text-decoration: none;

font-weight: 600;

transition: transform 0.2s ease-in-out;

}

.result a:hover {

transform: scale(1.03);

}

</style>

<div class="form-container">

<h2>Hosting-Empfehlung finden</h2>

<label for="type">1. Was für eine Seite planst du?</label>

<select id="type" onchange="showProducts()">

<option value="">Bitte auswählen</option>

<option value="1000">Blog oder Portfolio</option>

<option value="2000">Standard-Webseite</option>

<option value="4000">Online-Shop oder Business-Projekt</option>

<option value="8000">Großprojekt oder Agentur</option>

</select>

<label for="pages">2. Wie viele Seiteninhalte / Unterseiten brauchst du?</label>

<select id="pages">

<option value="">Bitte auswählen</option>

<option value="1">1–5</option>

<option value="2">5–15</option>

<option value="3">Über 15</option>

</select>

<div id="product-question" style="display: none;">

<label for="products">2a. Wie viele Produkte planst du?</label>

<select id="products">

<option value="">Bitte auswählen</option>

<option value="1">Unter 100 Produkte</option>

<option value="2">100–500 Produkte</option>

<option value="3">Über 500 Produkte</option>

</select>

</div>

<label for="priority">3. Welche Funktion ist dir am wichtigsten?</label>

<select id="priority">

<option value="">Bitte auswählen</option>

<option value="performance">Performance</option>

<option value="preis">Preis-Leistung</option>

<option value="skalierbarkeit">Skalierbarkeit</option>

</select>

<button class="btn" onclick="getRecommendation()">JETZT HOSTING FINDEN</button>

<div class="result" id="result" style="display:none;">

<div>Empfehlung für dein Projekt</div>

<strong id="package-name">Webhosting 1000</strong>

<a id="package-link" href="#" target="_blank">JETZT PAKET AUFRUFEN</a>

</div>

</div>

<script>

function showProducts() {

const siteType = document.getElementById('type').value;

const productQ = document.getElementById('product-question');

productQ.style.display = siteType === "4000" ? "block" : "none";

}

function getRecommendation() {

const siteType = document.getElementById('type').value;

const result = document.getElementById('result');

const name = document.getElementById('package-name');

const link = document.getElementById('package-link');

let recommendation = "Webhosting 1000";

let url = "https://example.com/1000";

if (siteType === "2000") {

recommendation = "Webhosting 2000";

url = "https://example.com/2000";

} else if (siteType === "4000") {

recommendation = "Webhosting 4000";

url = "https://example.com/4000";

} else if (siteType === "8000") {

recommendation = "Webhosting 8000";

url = "https://example.com/8000";

}

name.textContent = recommendation;

link.href = url;

result.style.display = "block";

}

</script>